Получать рассылку по электронной почте

Введите свой email-адрес:

Delivered by FeedBurner

Навигация

Меню на jQuery для вашего сайта, прилипающее к верху окна

stickymenu

Давайте же рассмотрим какие “липкие” меню имеются  у нас в наличии. Для их работы вам потребуется подключить jQuery, поэтому заблаговременно скачайте на сайте jquery.com минимизированную версию jQuery 1.11.2.

1. Первое из тех, которые мне хочется рассмотреть – меню Smint – красивое и простое меню ярко-голубого цвета.

SMINT   The simple jQuery plugin for lovers of one page websites.

Смотреть демо и скачать

Сначала подключаем файл стилей, к примеру назовем его demo.css.

Теперь подключаем наши скрипты. Можно сделать это как в разделе head html-страницы, так и перед закрывающим тегом body, такой прием часто используют так как скрипты должны загружаться в последнюю очередь.

Для того, чтобы инициализировать меню, задать ему начальные параметры вставим следующий код

Параметр scrollSpeed отвечает за скорость прокрутки меню, поскольку при нажатии на любой пункт будет происходить плавная прокрутка к соответствующему разделу. subMenu соответственно класс меню, который должен быть указан для скрипта (метка, которой нужно обозначить то самое меню, которое мы будем использовать).

Структура html должна выглядеть следующим образом

Как видим, страница состоит из отдельных блоков класса .section, помимо того каждый блок имеет свой собственный класс .s1, .s2, .s3, .s4, причем первый из них .sTop располагается выше навигации.
Навигация же, которую мы обозначили .subMenu состоит из ссылок с якорями на каждый из разделов #s1, #s2 и т.д.

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

Скачиваем и подключаем требуемые скрипты

waypoints-sticky.js  как раз и нужен для создания липкого меню.

Далее нужно написать специальный код для того, чтобы активные пункты меню высвечивались при клике на них и при прокрутке. Это очень удобно, когда страница длинная и разбита на секции. Инициализируем Waypoints чтобы “приклеить” навигацию сверху $('#sticky').waypoint('sticky'). Переменной sections присвоим все разделы, а переменной navigation_links – навигационные ссылки.

Находим, какая секция будет выводиться сейчас – она является активной.  При прокручивании наверх  отобразится предыдущая секция, для ее нахождения  мы воспользуемся методом  .prev().

Затем мы определяем активную ссылку active_link (атрибут href которой соответствует id  активной секции) и устанавливаем класс  selected для нее, предварительно удалив этот класс  со всех других  ссылок .

Далее указываем, что будет происходить при клике по ссылкам – анимированная прокрутка до соответствующего раздела, причем начало этого раздела будет смещено относительно верха окна на 90 пикселов вниз (иначе меню будет закрывать часть текста).

Давайте посмотрим, как будет выглядеть навигация – мы видим такие же ссылки с якорями на отдельные секции как в  меню Smint.
Обертка div обязательно должна иметь класс nav, используемый в скрипте и id= “sticky”, элемент с этим id Waypoints делает “липким”.

Каждая секция имеет соответствующий id и выглядит так

Смотреть демонстрационный пример

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

Этот вариант, пожалуй, подойдет скорее для обычного сайта, а не для Landing Page, где вся информация расположена на одной странице. Здесь отдельные пункты не будут активизироваться при прокрутке, но зато потребуется подключение только jQuery и скрипт очень простой. Рассмотрим детально как он работает.

Все действия производятся над элементом класса top-menu, этот элемент присваивается переменной $menu.

По умолчанию меню имеет класс default и скрыто с помощью стилей (свойство display:none). Во время прокрутки происходит проверка: если прокрутка вниз больше 50 и присутствует класс default, то его необходимо удалить и заменить классом fixed, который  “проявляет” меню и делает его “прилипшим” при помощи фиксированного позиционирования. В противном случае, удаляется fixed и на его место возвращается default (так будет, если прокрутить страницу вверх, к началу).

Демонстрационный пример

Понравилась статья?
Подпишитесь на RSS по e-mail
Поделитесь в социальных сетях
Вы можете также посмотреть
Комментарии
  1. Это еще одно отличное JQuery -меню для создания красивых прокручиваемых списков навигации. Его отличительной чертой является малый размер исходных файлов.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*