Как сделать фиксированное меню
Если верхняя панель навигации или просто меню (это одно и тоже), исчезает с поля зрения, при прокрутке странице, то перед вами точно не фиксированное меню.
Фиксированное меню, не следует вниз за прокруткой, а всегда остается наверху страницы. Это очень удобно для пользователя, у него всегда есть возможность, быстро перейти к другому разделу вашего сайта, не крутя колесико мышки.
Демонстрация.
Тем не менее при очевидных преимуществах наличия фиксированного меню, на каждом втором сайте, меню не зафиксированное. Может это не просто сделать, требует умений программирования на JavaScript? Сейчас мы это выясним.
Как всегда начнем с HTML разметки
Создадим блок див с классом nav, внутри которого три ссылки на разделы сайта – это и есть наше меню.
<div class="nav">
<a href="#home">Главная</a>
<a href="#news">Новости</a>
<a href="#contact">Контакт</a>
</div>
Создадим второй блок с каким-то текстом – это контент нашего сайта.
<div class="main">
<h1>Фиксированное верхнее меню</h1>
<p>Какой-то текст какой-то текст какой-то текст..</p>
</div>
Добавим CSS
Теперь подходим к ключевому моменту, меню еще не закреплено. Вы увидите, насколько просто сделать верхнее фиксированное меню. Поскольку данный способ работает только в том случае, когда меню находится над шапкой сайта.
.nav {
width: 100%;
position: fixed;
top: 0;
background-color: #c2185b;
}
Ссылки-пункты для меню.
.nav a {
float: left;
padding: 12px 14px;
display: block;
color: #fff;
font-size: 18px;
}
Поменяем цвет при наведении.
.nav a:hover {
color: #000;
background: #f8bbd0;
}
Внимательный читатель возможно заметил, что теперь меню перекрыло верхнюю часть текста, расположенного в блоке ниже. Нам надо сдвинуть блок с контентом ниже, на высоту самого меню, примерно на 35 пикселей.
.main {
padding: 14px;
margin-top: 35px;
height: 1200px;
}
Как сделать нижнее фиксированное меню?
Нужно буквально поменять два слова. Вместо top, прописываем bottom: 0, и соответственно вместо margin-top, пишем margin-botom: 35px.
Итак, выяснилось, что сделать фиксированное меню очень просто, даже начинающему веб-разработчику. У меня остается только две версии, почему не все это делают:
Просто не задумываются об удобстве пользователя, а заказчик видимо тоже не слишком глубоко продумывает технические детали сайта.
Либо меню находится под шапкой сайта, а здесь нужен другой подход.
Фиксация меню под шапкой
Как зафиксировать меню под шапкой?
Я знаю два простых способа, как это сделать.
1) Поместите шапку и меню в общий div и примените position: fixed и top: 0 к этому блоку. Таким образом, шапка вместе с меню закрепятся наверху страницы.
2) При помощи скрипта и библиотеки jQuery, когда у верхней границы браузера зафиксируется только меню без шапки.
Перед закрытием тега head, вставьте ссылку на библиотеку.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Вставьте небольшой скрипт перед закрывающим тегом body.
<script type="text/javascript">
$(function(){
$(window).scroll(function() {
var top = $(document).scrollTop();
if (top < 100) $(".nav").css({top: '0', position: 'relative'});
else $(".nav").css({top: '0', position: 'fixed'});
});
});
</script>
Замените 100 (высота шапки) на ваше значение, а также название класса nav, на ваш класс или идентификатор. Теперь при прокрутке, вы будете видеть зафиксированным только меню без шапки.
Демонстрация.
-
Создано 05.12.2018 10:30:48
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.