Поділися посиланням:

Як закріпити меню до верху сторінки

Є така модна зараз фішка на деяких сайтах — при прокрутці сторінки вниз, верхня частина сайту (там може бути лого, горизонтальне меню, форма пошуку чи посилання на соцмережі) залишається на своєму місці, а інша частина сторінки ховається під неї. Виглядає непогано і функціонально — потрібні елементи меню завжди під рукою.

redservice

Це зробити не так уже й важко. Потрібно лише взяти потрібну частину сторінки (там де лого і меню чи що вам там ще потрібно) в окремий контейнер-div з параметрами position:fixed; top:0;

Таким чином, даний контейнер буде постійно зафіксований зверху. Але є одне але. Вміст фіксованого контейнера налягає на вміст іншої частини сторінки і вони обидва показуються одночасно — виходить каша. Щоб цього позбутися, потрібно вказати високе значення z-index для нашого фіксованого контейнера — в такий спосіб зробивши його верхнім шаром. Все інше при прокрутці ховатиметься під нього.

Ще один момент. Щоб наш контейнер, при першому завантаженні сторінки, не закривав собою вміст нижньої частини сайту, — її (нижню частину сайту) слід трохи опустити. На висоту, рівну висоті нашого фіксованого контейнера. Зробити це можна, розмістивши ще один контейнер-div з відповідним значенням висоти.

На цьому все.

Ось, як це виглядає в коді.

Код html:
<div class=”headerfixed”>
тут ваш логотип, пункти меню, форма пошуку чи ін.
</div> 
<div class=”pusto”></div>

Код css:
.headerfixed
{
width:100%;
position:fixed;
top:0;
z-index:1000;
}

.pusto
{
height:100px;
}

Можна, звичайно ж, додати багато різних ефектів, типу тінь від верхньої смужки, зміщення на кілька пікселів (ефект заломлення) чи напівпрозорість… та це на любителя.

Вам буде цікаво:

Категорія: інтернети
Мітки:, , ,





Відповісти