Создаем фиксированное навигационное меню
Фиксированное навигационное меню часто называют « липким » меню, потому как его суть, помимо самой навигации, состоит в том, что оно всегда остается в одном положении на странице, независимо от скроллинга пользователя.
Это довольно распространенная практика, когда в шаблонной навигации по сайту используется подобный вариант исполнения меню, да и не только меню.
Строка поиска, кнопки социальных сетей, всевозможные уведомления. Подобный шаблон гарантирует, что наиболее важные элементы сайта будут находиться в легкодоступном месте независимо от того, где именно на странице в данный момент находится посетитель.
В этой статье я покажу вам простой CSS -прием для внедрения в сайт горизонтального « липкого » навигационного меню.
Примеры
Прежде чем начать, мы взглянем на несколько сайтов, которые уже используют фиксированные навигационные панели, просто для того, чтобы увидеть, как это работает на практике.
Ниже я привожу несколько ссылок.
В Niice используется фиксированная панель навигации, которая содержит в себе окно поиска и меню навигации по сайту. Во время просмотра проектов, вы можете быстро фильтровать их, не прерываясь на перемещение по сайту, используя окно поиска в верхней части экрана:
Разработчики онлайн-публикатора 99U встроили в навигационную панель меню навигации. Во время чтения новости пользователь ресурса имеет возможность моментального перехода в необходимый ему раздел сайта:
Сайт Forbes.com расположил меню, систему поиска по сайту и виджет для авторизации на фиксированной панели навигации, предоставив пользователю, читающему новости удобство быстрого доступа.
Это позволяет пользователям быстро прыгать к следующей статье после прочтения предыдущей. Фиксированная панель навигации увеличивает время нахождения пользователя на сайте, потому как читатели постоянно используют меню для выбора свежих новостей:
И, как хорошо видно из предыдущего примера, навигационная панель существенно повышает юзабилити сайта с множеством разнообразного контента.
Навигационная панель это отличный способ, позволяющий сократить время, потраченное на переход от одной задачи к другой при работе с сайтом ( поиск, авторизация, перемещение по структуре ). Говоря по-существу, этот элемент дизайна, повышает эффективность сайта, применяя законы Фиттса :
Создание фиксированной навигационной панели
Теперь, когда мы просмотрели достаточно примеров и осознали преимущества навигации подобного типа, приступим, непосредственно, к повышению эффективности работы нашего онлайн — ресурса.
Ниже демонстрационный пример того, как это выглядит на практике:
HTML
Разметка требуется минимальная — элемент блочной верстки, в который мы поместим содержимое фиксированной навигационной панели:
Элемент nav отлично подходит в данном случае. Он предоставляет сторонним сервисам ( таким, как например роботы поисковых систем ) возможность без проблем понимать информационную структуру вашего сайта. Элемент nav по умолчанию является блочным, так что не нужно писать лишнюю строчку CSS -кода.
Но если вы не хотите использовать nav, то подойдет любой по умолчанию блочный элемент, например div . Также можно использовать inline -элемент, такой как span , но прописать ему в CSS -коде свойство display: block .
CSS
Вот CSS -код, который заставляет нашу навигационную панель фиксироваться в одном месте:
.fixed-nav-bar
Ранее, мы присвоили нашему HTML -элементу класс fixed-nav-bar , поэтому сейчас просто применим к данному селектору нужные стили.
Значения трех последних свойств ( width , height и background-color ) меняйте на подходящие для вашего сайта.
Давайте теперь рассмотрим подробнее эти четыре волшебных CSS -свойства, ответственных за магию:
position: fixed;
Когда мы устанавливаем значение position равным fixed панель позиционируется относительно области просмотра. Это и позволяет панели оставаться на одном месте:
top: 0; left: 0; right: 0;
Устанавливая свойства top , left и right в 0, мы избегаем нежелательного появления отступов по сторонам панели навигации.
Подсказка : если нужно разместить панель в » подвале » области просмотра то, нужно просто заменить top: 0 на bottom: 0 :
z-index: 9999;
Такое большое значение z-index используется, чтобы избежать появления другого элемента HTML -разметки поверх фиксированной панели навигации ( если конечно не появится элемента со значением z-index больше, чем 9999 ).
На этом, пожалуй, все.
Примечание
В демо-примере применен довольно устаревший вариант респонсивного, выполненного на CSS , навигационного меню. В этом виде оно является концепцией, но не имеет законченной формы. Так как в этом уроке нашей основной целью стала постройка фиксированной навигационной панели, которая может являться контейнером для любых других элементов страницы, меню я обсуждать не стану.
Исследуйте исходный код, если вам станет интересно, как работает эта часть ( если возникнут непонятные моменты, просто делайте tweet и я буду счастлив помочь вам разобраться ).
Подводя итоги
Фиксированная панель навигации довольно проста в реализации. Она требует минимальной HTML -разметки и всего несколько CSS -свойств, которые мы с вами рассмотрели.
Обсуждаемый в этой статье метод имеет отличную кроссбраузерную совместимость, потому как использует только проверенные и надежные свойства CSS , и, таким образом, будет работать должным образом даже в самых древних веб-браузерах. Тем не менее, если обратная совместимость сильно важна для ваших проектов, вы можете принять решение о замене nav ( который относится к HTML5 ) на div .
В нужном контексте фиксированная панель навигации сможет улучшить удобство использования, потому что ее использование уменьшает задержку при переходе к новой задаче, по сравнению с традиционной горизонтальной панелью навигации, которая требует прокрутки обратно к верхней части страницы.
Закрепить блок меню
Как пример position:fixed на блок меню. Еще полезно придать ему z-index побольше, чтобы новые элементы не налезали на шапку. Если меню не «прилипает» к потолку — используйте top:0px.
11 янв 2017 в 11:37
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
Самый простой вариант, как-то так:
$(window).on('scroll', function(e) < var $header = $('.header'), $menu = $('.main-menu'), scroll = $(this).scrollTop(); if (scroll >= $header.height()) < $menu.addClass('fixed'); >else < $menu.removeClass('fixed'); >>);body < height: 1000px; >.header < background: #eee; height: 80px; >.main-menu < width: 100%; height: 30px; background: #f00; >.main-menu.fixed
Шапка Меню Отслеживать
ответ дан 11 янв 2017 в 11:49
Ihor Tkachuk Ihor Tkachuk
1,296 1 1 золотой знак 8 8 серебряных знаков 12 12 бронзовых знаков
position:fixed на блок меню/шапку. Еще полезно придать ему z-index побольше, чтобы новые элементы не налезали на шапку. Если меню не «прилипает» к потолку — используйте top:0px. т.е.
.header
Отслеживать
ответ дан 11 янв 2017 в 11:42
alexoander alexoander
1,640 14 14 серебряных знаков 20 20 бронзовых знаков
Не советую использовать position:fixed, потому что он вырывает блок из документа и придется возиться с отступами или подложками, чтобы контент не залезал под шапку.
Испльзуйте position: sticky вместе с top:0. Это «приклеит» шапку к верху экрана и при скролле она останется на верху. И, при этом, не придется следующему элементу (на каждой странице) задавать margin/padding или писать js код или делать подложку (моветон).
НО! Чтобы навигация не «спряталась» под шапку, их стоит вместе поместить в обертку! Либо, если у Вас другие планы на обертку и высота шапки неизменно статична и равна N px, то просто примените стили к header и к меню, задав стилям меню параметр top: N px; .
Так же, соблюдайте семантику при верстке. Внутри тега section ОБЯЗАТЕЛЬНО должен быть заголовок (теги h1-h6), потому что они обрабатываются поисковиками для выдачи в поиске.
А меню, содержащее навигационные ссылки, должно быть внутри тега nav.
Поэтому, предлагаю Вам использовать данную разметку:
.heading-wrapper
Logo
Как сделать меню на CSS?
Доброго времени суток! Есть задача сделать меню на css. Вчера весь день просидел и не смог сделать задумку. Вот внешний вид меню Сильно не пинайте, в верстке пока новичек.
Отслеживать
51.2k 86 86 золотых знаков 266 266 серебряных знаков 505 505 бронзовых знаков
задан 8 окт 2012 в 10:03
alexfedosienko alexfedosienko
45 4 4 серебряных знака 13 13 бронзовых знаков
@alexfedosienko, Пожалуйста, уточните, что вы сделали сами и что не получилось.
8 окт 2012 в 10:06
Думаю, что для начала надо сделать две вещи: 1) Определиться с тем, как распределяется ширина компонента меню. Всем по 20% или, скажем, по 100px. 2) Набросать хотябы какую-нибудь стртовую версию общей разметки и поазать. Используйте сервис: jsfiddle.net
8 окт 2012 в 10:09
jsfiddle.net/NMJUs/12 Пока сделано только вот это
8 окт 2012 в 10:55
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
Есть два способа выстроить два элемента друг за другом:
display: inline; Но на самом деле лучше display: inline-block; необходимую «строчность» элемента вы получите, но так же остануться и некоторые особенности блочности: возможность задавать ширину, пэддинги и т.д.
float: left; Обычное обтекание. Этот способ мне нравиться больше. Любой обтекаемый элемент делается блочным. Между блочными элементами не появляются пробелы. Хотя бы по этому я нахожу его более уместным. Но у обтекания больше особенностей. Например то, что обтекание надо сбрасывать. Делается это свойством clear: both; (сразу и левое и правое обтекание). Тег с таким свойством должен идти после последнего обтекаемого элемента. Чтобы не засорять HTML лишними тегами, рекоменду добавить в код класс clearfix (смотрите код) и просто добавлять его родительскому оберточнуму тегу. При помощи псевдоклассов before и after добавляются нужные элементы со сбросом обтекания.
Первый и последний элементы совсем не нужно унифицировать в html. Вы можете использовать псевдоклассы CSS:
.menu li:first-child < >.menu li:last-child
Скруглить углы попробуйте при помощи свойства border-radius.
Самим элементам li добавьте ширину в 20%.
Ссылки внутри элементов сделайте блочными (display: block), чтобы они заняли всю ширину элемента.
UPD1:
1) Есть очень удобный сервис для вставки случайных картинок: lorempixel.com. Берем с него ссылку типа: http://lorempixel.com/20/20/people — и это прямая ссылка размера 20х20 на картинку из категории people. Вставляйте вместо иконок соц. сетей.
2) Рекомендую для меню навигации использовать ul / li. А для меню действий использовать menu / li. Навигационному меню принято выставлять класс .nav или .navigation.
3) Когда вы раскидываете несколько компонентов, типа li, с содержимым img, то все, что касается разметки, например margin или размеры, применяйте к li.
4) Фон пропал потому что не сбросили отекание. Добавьте оберточному тегу кмпонентов меню класс clearfix.
5) Если сами меню вы раскидываете при помощи обтекания то их обертке (background) так же добавьте этот clearfix.
6) И побольше логики в коде. Пишите селекторы друг за другом, по смысловому порядку.
Горизонтальное меню для сайта
-
, а затем применить CSS-стили к его элементам. Такое расположение меню является наиболее распространенным в силу очевидных преимуществ в его позиционировании на веб-странице.
Как сделать горизонтальное меню: разметка и примеры оформления
- Содержание:
- HTML-разметка и базовые стили для горизонтального меню
- 1. Адаптивное меню с эффектом подчёркивания при наведении на ссылку
- 2. Адаптивное меню для свадебного сайта
- 3. Адаптивное меню с фестонами
- 4. Адаптивное меню на ленточке
- 5. Адаптивное меню с логотипом по середине
- 6. Адаптивное меню с логотипом слева
HTML-разметка и базовые стили для горизонтального меню
HTML разметка для горизонтальной навигации
Существует несколько способов разместить их горизонтально. Для начала нужно сбросить стили браузера по умолчанию для элементов навигации:
ul < list-style: none; /*убираем маркеры списка*/ margin: 0; /*убираем верхнее и нижнее поле, равное 1em*/ padding-left: 0; /*убираем левый отступ, равный 40px*/ >a See the Pen GJxayB by Elena Nazarova (@nazarelen) on CodePen.
Способ 1. li
Делаем элементы списка строчными. В результате они располагаются по горизонтали, с правой стороны между ними добавляется промежуток, равный 0.4em (вычисляется относительно размера шрифта). Чтобы убрать его, добавляем для li отрицательное правое поле li . Дальше стилизуем ссылки по своему желанию.
Способ 2. li
Делаем элементы списка плавающими. В результате они располагаются по горизонтали. Высота блока-контейнера ul становится равной нулю. Чтобы решить эту проблему, добавляем для ul , расширяя его и позволяя ему таким образом содержать плавающие элементы. Для ссылок добавляем a и стилизуем их по своему желанию.
Способ 3. li
Делаем элементы списка строчно-блочными. Они располагаются по горизонтали, с правой стороны образуется промежуток, как и в первом случае. Для ссылок добавляем a и стилизуем их по своему желанию.
Способ 4. ul
Делаем список ul гибким контейнером с помощью модели CSS3 flexbox. В результате элементы списка располагаются горизонтально. Добавляем для ссылок a и стилизуем их по своему желанию.
1. Адаптивное меню с эффектом подчёркивания при наведении на ссылку
@import url('https://fonts.googleapis.com/css?family=Ubuntu+Condensed'); .menu-main < list-style: none; margin: 40px 0 5px; padding: 25px 0 5px; text-align: center; background: white; >.menu-main li .menu-main li:after < content: "|"; color: #606060; display: inline-block; vertical-align:top; >.menu-main li:last-child:after .menu-main a < text-decoration: none; font-family: 'Ubuntu Condensed', sans-serif; letter-spacing: 2px; position: relative; padding-bottom: 20px; margin: 0 34px 0 30px; font-size: 17px; text-transform: uppercase; display: inline-block; transition: color .2s; >.menu-main a, .menu-main a:visited .menu-main a.current, .menu-main a:hover .menu-main a:before, .menu-main a:after < content: ""; position: absolute; height: 4px; top: auto; right: 50%; bottom: -5px; left: 50%; background: #feb386; transition: .8s; >.menu-main a:hover:before, .menu-main .current:before .menu-main a:hover:after, .menu-main .current:after @media (max-width: 550px) < .menu-main .menu-main li .menu-main li:after .menu-main a < padding: 25px 0 20px; margin: 0 30px; >>2. Адаптивное меню для свадебного сайта
@import url('https://fonts.googleapis.com/css?family=PT+Sans'); .top-menu < position: relative; background: #fff; box-shadow: inset 0 0 10px #ccc; >.top-menu:before, .top-menu:after < content: ""; display: block; height: 1px; border-top: 3px solid #575350; border-bottom: 1px solid #575350; margin-bottom: 2px; >.top-menu:after < border-bottom: 3px solid #575350; border-top: 1px solid #575350; box-shadow: 0 2px 7px #ccc; margin-top: 2px; >.menu-main < list-style: none; padding: 0 30px; margin: 0; font-size: 18px; text-align: center; position: relative; >.menu-main:before, .menu-main:after < content: "\25C8"; line-height: 1; position: absolute; top: 50%; transform: translateY(-50%); >.menu-main:before .menu-main:after .menu-main li < display: inline-block; padding: 5px 0; >.menu-main a < text-decoration: none; display: inline-block; margin: 2px 5px; padding: 6px 15px; font-family: 'PT Sans', sans-serif; font-size: 16px; color: #777777; border-bottom: 1px solid transparent; transition: .3s linear; >.menu-main .current, .menu-main a:hover < border-radius: 3px; background: #f3ece1; color: #313131; text-shadow: 0 1px 0 #fff; border-color: #c6c6c6; >@media (max-width: 500px) < .menu-main li >3. Адаптивное меню с фестонами
@import url('https://fonts.googleapis.com/css?family=PT+Sans+Caption'); .menu-main < list-style: none; padding: 0 30px; margin: 0; font-size: 18px; text-align: center; position: relative; background: white; >.menu-main:after < content: ""; position: absolute; width: 100%; height: 20px; left: 0; bottom: -20px; background: radial-gradient(white 0%, white 70%, rgba(255,255,255,0) 70%, rgba(255,255,255,0) 100%) 0 -10px; background-size: 20px 20px; background-repeat: repeat-x; >.menu-main li .menu-main a < text-decoration: none; display: inline-block; margin: 0 15px; padding: 10px 30px; font-family: 'PT Sans Caption', sans-serif; color: #777777; transition: .3s linear; position: relative; >.menu-main a:before, .menu-main a:after < content: ""; position: absolute; top: calc(50% - 3px); width: 6px; height: 6px; border-radius: 50%; background: #F58262; opacity: 0; transition: .5s ease-in-out; >.menu-main a:before .menu-main a:after .menu-main a.current:before, .menu-main a.current:after, .menu-main a:hover:before, .menu-main a:hover:after .menu-main a.current, .menu-main a:hover @media(max-width:680px) < .menu-main li >4. Адаптивное меню на ленточке
@import url('https://fonts.googleapis.com/css?family=PT+Sans+Caption'); .top-menu < margin: 0 60px; position: relative; background: #5A394E; box-shadow: inset 1px 0 0 rgba(255,255,255,.1), inset -1px 0 0 rgba(255,255,255,.1), inset 150px 0 150px -150px rgba(255,255,255,.12), inset -150px 0 150px -150px rgba(255,255,255,.12); >.top-menu:before, .top-menu:after < content: ""; position: absolute; z-index: 2; left: 0; width: 100%; height: 3px; >.top-menu:before < top: 0; border-bottom: 1px dashed rgba(255,255,255,.2); >.top-menu:after < bottom: 0; border-top: 1px dashed rgba(255,255,255,.2); >.menu-main < list-style: none; padding: 0; margin: 0; text-align: center; >.menu-main:before, .menu-main:after < content: ""; position: absolute; width: 50px; height: 0; top: 8px; border-top: 18px solid #5A394E; border-bottom: 18px solid #5A394E; transform: rotate(360deg); z-index: -1; >.menu-main:before < left: -30px; border-left: 12px solid rgba(255, 255, 255, 0); >.menu-main:after < right: -30px; border-right: 12px solid rgba(255, 255, 255, 0); >.menu-main li < display: inline-block; margin-right: -4px; >.menu-main a < text-decoration: none; display: inline-block; padding: 15px 30px; font-family: 'PT Sans Caption', sans-serif; color: white; transition: .3s linear; >.menu-main a.current, .menu-main a:hover @media (max-width: 680px) < .top-menu .menu-main li < display: block; margin-right: 0; >.menu-main:before, .menu-main:after .menu-main a >5. Адаптивное меню с логотипом по середине
@import url('https://fonts.googleapis.com/css?family=Arimo'); .top-menu < position: relative; background: rgba(34,34,34,.2); >.menu-main < list-style: none; margin: 0; padding: 0; >.menu-main:after < content: ""; display: table; clear: both; >.left-item .right-item .navbar-logo < position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); >.menu-main a < text-decoration: none; display: block; line-height: 80px; padding: 0 20px; font-size: 18px; letter-spacing: 2px; font-family: 'Arimo', sans-serif; font-weight: bold; color: white; transition: .3s linear; >.menu-main a:hover @media (max-width: 830px) < .menu-main < padding-top: 90px; text-align: center; >.navbar-logo < position: absolute; left: 50%; top: 10px; transform: translateX(-50%); >.menu-main li < float: none; display: inline-block; >.menu-main a < line-height: normal; padding: 20px 15px; font-size: 16px; >> @media (max-width: 630px) < .menu-main li >6. Адаптивное меню с логотипом слева
@import url('https://fonts.googleapis.com/css?family=Arimo'); .top-menu < background: rgba(255,255,255,.5); box-shadow: 3px 0 7px rgba(0,0,0,.3); padding: 20px; >.top-menu:after < content: ""; display: table; clear: both; >.navbar-logo .menu-main < list-style: none; margin: 0; padding: 0; float: right; >.menu-main li .menu-main a < text-decoration: none; display: block; position: relative; line-height: 61px; padding-left: 20px; font-size: 18px; letter-spacing: 2px; font-family: 'Arimo', sans-serif; font-weight: bold; color: #F73E24; transition:.3s linear; >.menu-main a:before < content: ""; width: 9px; height: 9px; background: #F73E24; position: absolute; left: 50%; transform: rotate(45deg) translateX(6.5px); opacity: 0; transition: .3s linear; >.menu-main a:hover:before @media (max-width: 660px) < .menu-main < float: none; padding-top: 20px; >.top-menu < text-align: center; padding: 20px 0 0 0; >.menu-main a .menu-main a:before > @media (max-width: 600px) < .menu-main li >