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

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

Если верхняя панель навигации или просто меню (это одно и тоже), исчезает с поля зрения, при прокрутке странице, то перед вами точно не фиксированное меню.

Фиксированное меню, не следует вниз за прокруткой, а всегда остается наверху страницы. Это очень удобно для пользователя, у него всегда есть возможность, быстро перейти к другому разделу вашего сайта, не крутя колесико мышки.

Демонстрация.

Тем не менее при очевидных преимуществах наличия фиксированного меню, на каждом втором сайте, меню не зафиксированное. Может это не просто сделать, требует умений программирования на JavaScript? Сейчас мы это выясним.

Как всегда начнем с HTML разметки

Создадим блок див с классом nav, внутри которого три ссылки на разделы сайта – это и есть наше меню.

Создадим второй блок с каким-то текстом – это контент нашего сайта.

Какой-то текст какой-то текст какой-то текст..

Добавим 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, вставьте ссылку на библиотеку.

Вставьте небольшой скрипт перед закрывающим тегом body.

Замените 100 (высота шапки) на ваше значение, а также название класса nav, на ваш класс или идентификатор. Теперь при прокрутке, вы будете видеть зафиксированным только меню без шапки.

Демонстрация.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Читайте также:  Файл php что это

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 0 ):

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

    Пример горизонтального меню для лэндингов, в котором реализовано:

    • При прокрутке меню фиксируется.
    • Выделение активного пункта меню по текущему блоку.
    • По клику на меню происходит плавная прокрутка до якоря.
    • Адаптация позиции меню при изменении ширины окна браузера.

    HTML вёрстка

    jQuery

    Для работы потребуется jQuery:

    Код разнесен на две независимые секции – «Фиксация меню» и «Выделение активных пунктов».

    Очень часто на сайтах с большим количеством контента посетитель теряется на странице и чтобы найти навигационное меню приходится листать на самый верх страницы. Технологии не стоят на месте, экраны мониторов и их разрешения становятся больше, потому сейчас на сайте уже не жалко выделить сверху 40 пикселей под фиксированное меню при прокрутке страницы сайта. Посетитель сможет всегда видеть в каком он разделе находится, а также иметь быстрый доступ к навигационному меню. В конце концов это увеличивает глубину просмотра сайта 🙂

    Какова суть фиксированного навигационного меню на сайте? Изначально наше меню находится на привычном ему месте, где-то в шапке, в моем случае на расстоянии 140px от верхнего края. Как только посетитель прокручивает страницу на эти самые 140px внизу, меню фиксируется в самом верху окна и там остается все оставшееся время, пока скролл не будет возвращен вновь в верхнее положение.

    Фиксированное меню при прокрутке страницы это по сути панель управления, которая всегда с тобой. Меню у нас будет простое, без выпадающих элементов.

    Читайте также:  Войти в профиль яндекс

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

    Наши стили. У меня меню шириной 1180px, расположено по центру. Шапка высотой 180px, меню с прокруткой в него входит и занимает 40px. Значит расстояние от верха 140px. Запомним это число)

    И вот те несколько строчек кода, которые творят волшебство) Мы задаем условия прокрутки страницы, выше 140px или ниже. В зависимости от этого присваивается класс fixed для нашего навигационного меню. А с этим классом, как указано выше мы делаем меню фиксированным и закрепленным сверху.

    Число 140 вы можете заменить на любое другое. Это ваш отступ меню от верхнего края.

    Ссылка на основную публикацию
    Файл с расширением dav чем открыть
    Файл формата DAV открывается специальными программами. Чтобы открыть данный формат, скачайте одну из предложенных программ. Чем открыть файл в формате...
    У вас сломался холодильник
    Поломка холодильника всегда застает в врасплох. И определить причину моментально практически невозможно. Нужно как можно быстрее «спасти» продукты. Обычно надолго...
    У каких марок телефонов хорошая камера
    Производители будто бы соревнуются - кто сколько датчиков встроит в девайс. Есть уже с четырьмя и даже пятью камерами! Как...
    Файл подкачки windows 7 на флешку
    В прошлой статье рассказано, как определиться с оптимальным размером файла подкачки, что делать с SSD-дисками и как установить размер файла...
    Adblock detector