Фиксированное меню для сайта, липкое меню
Очень часто при разработке сайта возникает необходимость создания фиксированного меню. Фиксированное меню — это меню которое закреплено (зафиксировано) в верхней части страницы сайта и остается на месте при прокрутке . Так-же бывает необходимо создать липкое меню — меню, которое прокручивается вместе с контентом страницы до определенного момента, а затем фиксируется (прилипает) и остается на месте при дальнейшей прокрутке. Для новичков в сайтостроении обе этих задачи вызывают определенные трудности, хотя в создании как фиксированного, так и липкого меню, ничего сложного нет.
Фиксированное меню
Давайте разберем подробно как нам создать фиксированное меню на HTML и CSS. Оказывается очень просто. Вот код HTML:
<html> <head> <style> .mymenu li { display: inline-block; font-size: 24px; font-weight: 700; padding: 15px 20px; color: #cc7777; } .fix-top{ position:fixed; top: 0px; right:40px; } </style> </head> <body> <div class="fix-top"> <nav class="mymenu"> <ul> <li>Главная </li> <li>О нас</li> <li>Услуги</li> <li>Контакты</li> </ul> </nav> </div> </body> </html>
Мы создали меню с классом «mymenu» и обернули его в div с классом «fix-top».
А в стилях CSS мы делаем наше фиксированное меню горизонтальным (display: inline-block; ) и немного стилизуем пункты меню, чтобы выглядели не очень страшно. А далее самое главное — придадим свойству position класса «fix-top», значение fixed. Именно это действие заставит наше меню стать фиксированным.
Липкое меню
Липкое меню немного посложнее. Код HML:
<html> <head> <style> .mymenu li { display: inline-block; font-size: 24px; font-weight: 700; padding: 15px 20px; color: #cc7777; } .fix{ position:fixed; top: 5px; left:40px; } .not_fix{ position: absolute; top: 300px; left:30px; }</style> </head> <body> <div id="sticky" class="not_fix"> <nav class="mymenu"> <ul> <li>Главная </li> <li>О нас</li> <li>Услуги</li> <li>Контакты</li> </ul> </nav> </div> </body> <script> window.onscroll = function(){ var scrolled = window.pageYOffset || document.documentElement.scrollTop; var o=document.getElementById('sticky'); if (scrolled > 320) o.setAttribute('class','fix'); else o.setAttribute('class','not_fix'); } </script> </html>
Здесь так-же в стилях CSS делаем наше липкое меню горизонтальным и стилизуем пункты. А ниже прописываем два класса (fix и not_fix), за счет которых наше липкое меню прилепиться и зафиксируется при прокрутке. Еще ниже скрипт, который заставляет наше липкое меню менять эти классы при определенной высоте прокрутки (scrolled > 320), вместо 320 можете поставить свое число.
Вот и все.
Пример работы фиксированное меню и липкое меню можно посмотреть здесь Пример фиксированного меню и липкого меню.
А здесь скачать страничку с примером: fix-menu.
Если кого-то интересует как сделать меню адаптивным — читайте здесь: Как создать адаптивное меню для сайта за 10 минут.
Всего комментариев: 0