- Как сделать — Фиксированное меню
- Cоздать фиксированное меню
- Пример
- Пример
- Создать фиксированное нижнее меню
- Пример
- Создаем фиксированное навигационное меню
- Примеры
- Создание фиксированной навигационной панели
- HTML
- CSS
- Примечание
- Подводя итоги
- Фиксирующаяся при скролле панель навигации, только CSS
- position: sticky
- scroll-margin-top
- HTML-код примера фиксирующейся при прокрутке панели навигации
- CSS-код примера фиксирующейся панели скролл-навигации
- Пара слов о поддержке position: sticky и scroll-margin-top браузерами
- Фиксированное меню при прокрутке страницы
Как сделать — Фиксированное меню
Узнайте, как создать «фиксированное» меню с помощью CSS.
Cоздать фиксированное меню
Шаг 1) Добавить HTML:
Пример
Какой-то текст какой-то текст.. какой-то текст какой-то текст..
Шаг 2) Добавить CSS:
Чтобы создать фиксированное верхнее меню, используйте position:fixed и top:0 . Примечание, что фиксированное меню будет накладываться на другой контент. Чтобы исправить это, добавьте margin-top (к содержимому), которое равно или больше высоты вашего меню.
Пример
/* Навигационная панель */
.navbar overflow: hidden;
background-color: #333;
position: fixed; /* Установите навигационную панель в фиксированное положение */
top: 0; /* Расположите навигационную панель в верхней части страницы */
width: 100%; /* Полная ширина */
>
/* Ссылки в панели навигации */
.navbar a float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
>
/* Изменение фона при наведении курсора мыши */
.navbar a:hover background: #ddd;
color: black;
>
/* Основное содержание */
.main margin-top: 30px; /* Добавить верхнее поле, чтобы избежать наложения */
>
Создать фиксированное нижнее меню
Чтобы создать фиксированное нижнее меню, используйте position:fixed и bottom:0 :
Пример
/* Навигационная панель */
.navbar position: fixed; /* Установите навигационную панель в фиксированное положение */
bottom: 0; /* Расположите навигационную панель в нижней части страницы */
width: 100%; /* Полная ширина */
>
/* Основное содержание */
.main margin-bottom: 30px; /* Добавить в нижнее поле, чтобы избежать наложения */
>
Совет: Зайдите на наш учебник CSS Навигации, чтобы узнать больше о навигационных панелях.
Создаем фиксированное навигационное меню
Фиксированное навигационное меню часто называют « липким » меню, потому как его суть, помимо самой навигации, состоит в том, что оно всегда остается в одном положении на странице, независимо от скроллинга пользователя.
Это довольно распространенная практика, когда в шаблонной навигации по сайту используется подобный вариант исполнения меню, да и не только меню.
Строка поиска, кнопки социальных сетей, всевозможные уведомления. Подобный шаблон гарантирует, что наиболее важные элементы сайта будут находиться в легкодоступном месте независимо от того, где именно на странице в данный момент находится посетитель.
В этой статье я покажу вам простой CSS -прием для внедрения в сайт горизонтального « липкого » навигационного меню.
Примеры
Прежде чем начать, мы взглянем на несколько сайтов, которые уже используют фиксированные навигационные панели, просто для того, чтобы увидеть, как это работает на практике.
Ниже я привожу несколько ссылок.
В Niice используется фиксированная панель навигации, которая содержит в себе окно поиска и меню навигации по сайту. Во время просмотра проектов, вы можете быстро фильтровать их, не прерываясь на перемещение по сайту, используя окно поиска в верхней части экрана:
Разработчики онлайн-публикатора 99U встроили в навигационную панель меню навигации. Во время чтения новости пользователь ресурса имеет возможность моментального перехода в необходимый ему раздел сайта:
Сайт Forbes.com расположил меню, систему поиска по сайту и виджет для авторизации на фиксированной панели навигации, предоставив пользователю, читающему новости удобство быстрого доступа.
Это позволяет пользователям быстро прыгать к следующей статье после прочтения предыдущей. Фиксированная панель навигации увеличивает время нахождения пользователя на сайте, потому как читатели постоянно используют меню для выбора свежих новостей:
И, как хорошо видно из предыдущего примера, навигационная панель существенно повышает юзабилити сайта с множеством разнообразного контента.
Навигационная панель это отличный способ, позволяющий сократить время, потраченное на переход от одной задачи к другой при работе с сайтом ( поиск, авторизация, перемещение по структуре ). Говоря по-существу, этот элемент дизайна, повышает эффективность сайта, применяя законы Фиттса :
Создание фиксированной навигационной панели
Теперь, когда мы просмотрели достаточно примеров и осознали преимущества навигации подобного типа, приступим, непосредственно, к повышению эффективности работы нашего онлайн — ресурса.
Ниже демонстрационный пример того, как это выглядит на практике:
ПРОСМОТРЕТЬ ДЕМО
СКАЧАТЬ ИСХОДНИКИ С GITHUB
Перейти к GitHub Repository
HTML
Разметка требуется минимальная — элемент блочной верстки, в который мы поместим содержимое фиксированной навигационной панели:
Элемент nav отлично подходит в данном случае. Он предоставляет сторонним сервисам ( таким, как например роботы поисковых систем ) возможность без проблем понимать информационную структуру вашего сайта. Элемент nav по умолчанию является блочным, так что не нужно писать лишнюю строчку CSS -кода.
Но если вы не хотите использовать nav, то подойдет любой по умолчанию блочный элемент, например div . Также можно использовать inline -элемент, такой как span , но прописать ему в CSS -коде свойство display: block .
CSS
Вот CSS -код, который заставляет нашу навигационную панель фиксироваться в одном месте:
Ранее, мы присвоили нашему HTML -элементу класс fixed-nav-bar , поэтому сейчас просто применим к данному селектору нужные стили.
Значения трех последних свойств ( width , height и background-color ) меняйте на подходящие для вашего сайта.
Давайте теперь рассмотрим подробнее эти четыре волшебных CSS -свойства, ответственных за магию:
Когда мы устанавливаем значение position равным fixed панель позиционируется относительно области просмотра. Это и позволяет панели оставаться на одном месте:
Устанавливая свойства top , left и right в 0, мы избегаем нежелательного появления отступов по сторонам панели навигации.
Подсказка : если нужно разместить панель в » подвале » области просмотра то, нужно просто заменить top: 0 на bottom: 0 :
Такое большое значение z-index используется, чтобы избежать появления другого элемента HTML -разметки поверх фиксированной панели навигации ( если конечно не появится элемента со значением z-index больше, чем 9999 ).
Примечание
В демо-примере применен довольно устаревший вариант респонсивного, выполненного на CSS , навигационного меню. В этом виде оно является концепцией, но не имеет законченной формы. Так как в этом уроке нашей основной целью стала постройка фиксированной навигационной панели, которая может являться контейнером для любых других элементов страницы, меню я обсуждать не стану.
Исследуйте исходный код , если вам станет интересно, как работает эта часть ( если возникнут непонятные моменты, просто делайте tweet и я буду счастлив помочь вам разобраться ).
Подводя итоги
Фиксированная панель навигации довольно проста в реализации. Она требует минимальной HTML -разметки и всего несколько CSS -свойств, которые мы с вами рассмотрели.
Обсуждаемый в этой статье метод имеет отличную кроссбраузерную совместимость, потому как использует только проверенные и надежные свойства CSS , и, таким образом, будет работать должным образом даже в самых древних веб-браузерах. Тем не менее, если обратная совместимость сильно важна для ваших проектов, вы можете принять решение о замене nav ( который относится к HTML5 ) на div .
В нужном контексте фиксированная панель навигации сможет улучшить удобство использования, потому что ее использование уменьшает задержку при переходе к новой задаче, по сравнению с традиционной горизонтальной панелью навигации, которая требует прокрутки обратно к верхней части страницы.
Фиксирующаяся при скролле панель навигации, только CSS
Как закрепить панель навигации в верхней части страницы только с помощью CSS и не скроллить её вместе с контентом.
Долгое время для фиксации панели навигации требовалось использовать JavaScript, чтобы определить, когда при прокрутке страницы ей нужно добавить CSS-класс для переключения в position: absolute .
Чтобы получить аналогичный эффект, можно использовать только простое CSS-свойство.
position: sticky
Свойство position: sticky укажет браузеру, что следует позволить элементу прокручиваться вместе с остальной частью документа, пока он не достигнет верхней части страницы. Как только это произойдет, позиция элемента фиксируется, а остальные элементы на странице прокручиваются за ним.
На первый взгляд всё работает нормально. Но, если приглядеться, клик по ссылке в навигации скроллит контент так, что заголовок секции самым бесстыдным образом оказывается под зафиксировавшейся панелью с навигацией. Это поправимо.
scroll-margin-top
Свойство scroll-margin-top укажет браузеру высоту отступа, которую он должен использовать при скролле к контейнеру. Это свойство следует указывать элементам с якорями, на которые ведут ссылки из панели навигации.
Добавим контейнерам свойство scroll-margin-top и присвоим ему значение 1em . Теперь, когда браузер перейдёт по ссылке к якорю, он оставит сверху отступ 1em .
И ещё: этот отступ применяется только к прокрутке. Сам элемент-контейнер по-прежнему сохраняет свои обычные отступы в контексте документа.
HTML-код примера фиксирующейся при прокрутке панели навигации
CSS-код примера фиксирующейся панели скролл-навигации
body < margin: 0 auto; max-width: 40em; width: 88%; >.section < color: #ffffff; height: 75vh; margin: 0; scroll-margin-top: 1em; > #a < background-color: #0074d9; >#b < background-color: #2ecc40; >#c < background-color: #ff851b; >#d < background-color: #b10dc9; >h2 < margin: 0; padding: 0; >.sticky < background-color: #ffffff; position: -webkit-sticky; position: sticky; top: 0; > .list-inline < list-style: none; margin-left: -0.5em; margin-right: -0.5em; padding: 0; >.list-inline > li < display: inline-block; margin-left: 0.5em; margin-right: 0.5em; >.list-inline > li:before < content: "\200B"; /* 1 */ position: absolute; /* 2 */ >
Пара слов о поддержке position: sticky и scroll-margin-top браузерами
Свойство position: sticky работает во всех современных браузерах, но на момент написания этой заметки не работает с элементами thead и tr в Chrome и Edge (хотя оно работает с th ), а также table в Firefox.
Свойство scroll-margin-top работает во всех современных браузерах.
Оба CSS свойства не работают в маргинальном IE-11 и более старых версиях IE.
Фиксированное меню при прокрутке страницы
Очень часто на сайтах с большим количеством контента посетитель теряется на странице и чтобы найти навигационное меню приходится листать на самый верх страницы. Технологии не стоят на месте, экраны мониторов и их разрешения становятся больше, потому сейчас на сайте уже не жалко выделить сверху 40 пикселей под фиксированное меню при прокрутке страницы сайта. Посетитель сможет всегда видеть в каком он разделе находится, а также иметь быстрый доступ к навигационному меню. В конце концов это увеличивает глубину просмотра сайта 🙂
Какова суть фиксированного навигационного меню на сайте? Изначально наше меню находится на привычном ему месте, где-то в шапке, в моем случае на расстоянии 140px от верхнего края. Как только посетитель прокручивает страницу на эти самые 140px внизу, меню фиксируется в самом верху окна и там остается все оставшееся время, пока скролл не будет возвращен вновь в верхнее положение.
Фиксированное меню при прокрутке страницы это по сути панель управления, которая всегда с тобой. Меню у нас будет простое, без выпадающих элементов.
От теории к практике. Все достаточно просто и минималистично, большая часть когда отдается стилям, которые вы уже сами настраиваете под себя. Я сделала фиксированное меню как на рисунке, при скролле цвет меню становится чуть прозрачным, чтобы оно не выглядело тяжелым и под ним был виден контент.
Наши стили. У меня меню шириной 1180px, расположено по центру. Шапка высотой 180px, меню с прокруткой в него входит и занимает 40px. Значит расстояние от верха 140px. Запомним это число)
#header < height: 180px; >#navigation < background: #EF0505; height: 40px; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4); font-size: 16px; line-height: 40px; position: relative; top: 140px; >#navigation.fixed < position: fixed; top: 0; width: 100%; background: rgba(239, 5, 5, 0.95); >#navigation ul < width: 1180px; padding-left: 0; margin: 0 auto; display: block; >#menu li < float: left; list-style: none; padding: 0 25px; border-right: 1px solid #D60000; >#menu a < color: #fff; text-decoration: none; font-family: Verdana; >#menu>li a:hover
И вот те несколько строчек кода, которые творят волшебство) Мы задаем условия прокрутки страницы, выше 140px или ниже. В зависимости от этого присваивается класс fixed для нашего навигационного меню. А с этим классом, как указано выше мы делаем меню фиксированным и закрепленным сверху.
jQuery(function($) < $(window).scroll(function()< if($(this).scrollTop()>140) < $('#navigation').addClass('fixed'); >else if ($(this).scrollTop() <140)< $('#navigation').removeClass('fixed'); >>); >);
Число 140 вы можете заменить на любое другое. Это ваш отступ меню от верхнего края.