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

 

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

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

Шаг 1. HTML

Структура проста:  навигация и его кнопкой запуска находятся внутри #cd-nav div. Параметр <SPAN> внутри  .cd-nav-trigger привязка будет использоваться для создания значка меню но только с помощью CSS.

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

Компактное фиксированное меню для сайта на JS

Шаг 2. CSS

Так мы хотим правильного отображения начиная с мобильного телефона, мы устанавливаем position: fixed для неупорядоченного списка внутри навигационной панели #cd-nav. Мы хотим, чтобы меню было в правом нижнем углу для сенсорных устройств, это обеспечит легкий доступ даже если вы держите телефон одной рукой. Когда пользователь нажимает на кнопку навигации  .cd-nav-trigger мы устанавливаем класс .is-visible для отображения неупорядоченного списка, который изменяет Scale CSS3 значение от 0 до 1 — с CSS3 переходом для сглаживания трансформации.

Когда окно просмотра больше, чем 1170px, мы меняем позицию навигации c фиксированной на абсолютную. Как пользователь прокручивает вниз, мы используем JQuery и добавляем класс .is-fixed для #cd-nav, таким образом, перемещая всю навигацию к нижней правой части экрана — тот же эффект, который используем для сенсорных устройствах.

@media only screen and (min-width: 1170px) {

Шаг 3. JS

Мы определили смещение переменной для переключения класса .is-fixed:

Функция checkMenu () отвечает о плавном поведении навигации при прокрутке:

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

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