Плаваюче меню на сайті за допомогою css
Думаю, багато хто бачив на сучасних сайтах верхнє меню, яке при прокрутки миші прилипає (фіксується) зверху екрану. Розглянемо спосіб реалізації даного завдання.
Найпростіше зробити таке меню за допомогою звичайного css.
Розглянемо на живому прикладі. Припустимо у нас така структура меню (горизонтальне, зверху екрану).
Для того, щоб воно автоматично прилипало до верху сторінки досить додати стиль:position: fixed; - дозволяє прокручувати меню зверху сторінки
top: 0px; - вказує, що меню починається з самого верху сторінки.
left: 0px; - зрушує меню в ліву частину екрану
Таких не хитрим методом ми можемо зафіксувати будь-яке меню зверху екрану.
Повний код прикладу зі стилями:
Залишиться тільки зрушити основний контент сайту на величину, рівну висоті меню. Бо якщо після такого меню вивести будь-якої контент, то меню буде закривати його. Щоб уникнути цієї проблеми поставте відступ зверху на body або div з вашим контентом. Наприклад так: body.
Властивість fixed часто використовується для створення плаваючого фону. Наприклад, коли потрібно, щоб при прокрутки сторінки фон залишався на місці, а сайт прокручувався. Для цього ви можете використовувати наступний стиль:
Читайте також
- Як створити плаваючу кнопку на сайті html + css
- Отримати, призначити CSS стиль в JQuery
- Створюємо вікна по центру екрана JQuery + css: position absolute
- Застосувати css до будь-якого за рахунком елементу
