Фіксована горизонтальне меню
Розглянемо два варіанти:
- засобами css: position: fixed без шапки сайту,
- торкнемося більш цікавою реалізації разом з шапкою сайту, коли ми фіксуємо тільки меню при активній прокручуванні, залишаючи його завжди на виду, але якщо відвідувач повертається до шапки сайту, то наше меню «стає на своє місце». Приклад реалізації такого підходу Ви можете подивитися у Yandex а.
Фіксуємо горизонтальне меню з CSS: position: fixed.
З одного боку все просто і легко вирішується засобами css за дві секунди:
Приклад HTML верстки фіксованого горизонтального меню:
CSS верстка фіксованого горизонтального меню:
А тепер поставимо відступ для вмісту сторінки, рівний висоті меню:
І ось у нас «майже» все вийшло. Меню у відвідувача «завжди на виду». Але що ж робити, якщо у нас в дизайні розташована шапка сайту, після якої слід саме меню, а в шапці у нас логотип, девіз сайту, банери.
Ну що ж, ми можемо зафіксувати і шапку сайту, зробивши відступ вмісту рівним висоті шапки і меню, разом з відступами між ними.
Отже, розглянемо варіант, коли меню «йде» за шапкою сайту, але якщо відвідувач активно прокручує вниз, меню «фіксується» вгорі і залишається на місці. Шапка сайту при цьому не видно. Якщо ж відвідувач повертається до шапки сторінки, меню «стає» на своє місце «за шапкою сайту».
Для початку прівёдем повну HTML верстку прикладу макета сторінки:
Шаблон нашого сайту складається з декількох типових областей:
- шапки сайту - #header. висотою 150px
- горизонтального меню - # menu-top-almost-fixed - висотою 30px,
- основноюінформаційною області сторінки - #content,
- підвалу сайту - #footer.
Наведемо css верстку:
Для початку поставимо відступ від шапки до вмісту, рівний висоті нашого меню + невеликий відступ з запасом для естетичної краси. #header
А тепер подбаємо про те, щоб при прокручуванні меню «фіксувалося» точно у верхній частині сторінки.
А приклад реалізації Ви можете переглянути за цим посиланням. і скориставшись коліщатком прокрутки.
Отже, тут все просто. В налаштуваннях ми передаємо скрипту наступні параметри:
- var m1 = 150; - висота шапки в пікселях,
- var m2 = 2; - відступ, коли під час прокрутки шапка вже не видно,
- var menuID = "menu-top-almost-fixed"; - id горизонтального меню для закріплення,
- var menuOpacityOnChange = "0.7"; - прозорість меню при скролінгу:
- 1 - непрозоре
- 0.5 - напівпрозоре
- 0.0 - повністю прозоре
В цьому варіанті ми трошки «тюнінгували» наше меню, і при прокручуванні ми додаємо йому напівпрозорості.
Відразу напрошується більш класичний варіант, коли ми не змінюємо прозорість меню, а просто робимо для меню підкладку у вигляді фону з кольором меню і нижній напівпрозорої кордоном (в якій градієнт плавно «переходить» від непрозорого кольору до прозорого):
Змінюємо трохи CSS верстку для нашого горизонтального фіксованого меню:
Отже, тут все просто. В налаштуваннях ми передаємо скрипту наступні параметри:
- var m1 = 150; - висота шапки в пікселях,
- var m2 = 0; - відступ, коли під час прокрутки шапка вже не видно.
Приклад реалізації Ви можете подивитися, перейшовши за цим посиланням. і скориставшись коліщатком прокрутки.
Меню працює відмінно, але, якщо перезавантажити сторінку, меню з'являється з першим відступом
При наявності такої проблеми необхідно викликати меню після завантаження сторінки одноразово.
Для цього змінимо код виклику функції з:
На наступний код:
Після завантаження сторінки ми відразу викликаємо нашу функцію marginMenuTop. яка перевірить стан меню на сторінці, і застосує потрібний стиль
Реалізуємо частково фіксоване меню за допомогою jQuery плагіна Afixx з Twitter Bootstrap
Більше інформації про веб технологіях можна дізнатися з нашого переліку всіх статей на сайті: