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

 

Фиксированная навигация будет реализована с помощью  jQuery powered scroll. Ничего особенного здесь нет, но это удобный фрагмент для создания данной навигации, чтобы быстро путешествовать по содержимому страницы. Мы часто встречаем подобный эффект на сайтах, по этому такой пример будет полезный разработчикам, которые планируют его реализовать.

Шаг 1. HTML

Мы создали раздел section#cd-intro , чтобы обернуть наше фоновое изображение, а также название и кнопку в центре. Так как у нас будет навигация которая трансформируется во вторичное меню, то нам необходим неупорядоченный список, который вставляется в .cd-secondary-nav элемент. Все оставшееся содержимое было помещено в .cd-main-content элемент.

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

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

Шаг 2. CSS

У нас будет адаптивное меню, это позволит добиться лучшего отображения на различном разрешении. Когда пользователь прокручивает больше значения высоты, чем указано в разделе section#cd-intro, мы присваиваем .is-fixed  класс в  .cd-secondary-nav, изменяя его положение с относительного значения на фиксированное:

Мы также хотим, чтобы при прокрутке у нас появляться наш логотип и кнопку вызова «Читать урок», когда вторичная навигационная панель фиксируется. Для этого мы определили два класса: .is-hidden и  .slide-in:

Шаг 3. JS

Когда пользователь прокручивает больше указанного значения и  пытается перейти ко вторичному меню, мы присваиваем ему .is-fixed класс, чтобы изменить позиционирование меню с нижнего на фиксированный верхний; мы добавляем .animate-children значение с 50 мс. задержкой (из-за ошибки Firefox) для того, чтобы оживить переход между навигацией.

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

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Читайте также: