Компактное фиксированное меню для сайта на 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 () отвечает о плавном поведении навигации при прокрутке:

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

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

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