Фиксированное меню для сайта, липкое меню

Опубликовано: 19.11.2019 в категории: HTML/CSS

Очень часто при разработке сайта возникает необходимость создания фиксированного меню. Фиксированное меню — это меню которое закреплено (зафиксировано) в верхней части страницы сайта и остается на месте при прокрутке . Так-же бывает необходимо создать липкое меню — меню, которое прокручивается вместе с контентом страницы до определенного момента, а затем фиксируется (прилипает) и остается на месте при дальнейшей прокрутке. Для новичков в сайтостроении обе этих задачи вызывают определенные трудности, хотя в создании как фиксированного, так и липкого меню, ничего сложного нет.

Фиксированное меню, липкое меню

Фиксированное меню

Давайте разберем подробно как нам создать фиксированное меню на 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

Оставить комментарий

Ваш email не будет опубликован.

Заявка на бесплатную консультацию

Для бесплатной консультации укажите свое имя и номер телефона в форме ниже. Я перезвоню Вам и отвечу на все вопросы.

    Даю свое согласие на обработку персональных данных.

    ×
    Заказать сайт

    Чтобы заказать сайт заполните форму ниже. Я перезвоню Вам, отвечу на все вопросы, приму Ваш заказ и назову его ориентировочную стоимость.

      Даю свое согласие на обработку персональных данных.

      ×
      Заказать сайт по акции "Все включено"

      Для заказа сайта по акции «Все включено» заполните форму ниже. Я перезвоню Вам, отвечу на все вопросы, и приму Ваш заказ.

        Даю свое согласие на обработку персональных данных.

        ×
        Заказ услуги

        Для заказа услуги заполните форму ниже. Я перезвоню Вам, чтобы уточнить подробности, оговорить сроки и стоимость услуги.

          Даю свое согласие на обработку персональных данных.

          ×