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

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

Установка:

Шаг 1. HTML

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

Код
<header><!-- ... --></header>
<div id="cd-nav">
<a href="#0" class="cd-nav-trigger">Меню<span></span></a>
<nav id="cd-main-nav">
<ul>
<li><a href="#0">Главная</a></li>
<li><a href="#0">Сервис</a></li>
<li><a href="#0">Портфолио</a></li>
<li><a href="#0">О нас</a></li>
<li><a href="#0">Контактsы</a></li>
</ul>
</nav>
</div>
<main><!-- Контент здесь --></main>


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

Шаг 2. CSS

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

Код
#cd-nav ul {
position: fixed;
width: 90%;
max-width: 400px;
right: 5%;
bottom: 20px;
visibility: hidden;
overflow: hidden;
z-index: 1;
transform: scale(0);
transform-origin: 100% 100%;
transition: transform 0.3s, visibility 0s 0.3s;
}
#cd-nav ul.is-visible {
visibility: visible;
transform: scale(1);
transition: transform 0.3s, visibility 0s 0s;
}
.cd-nav-trigger {
position: fixed;
bottom: 20px;
right: 5%;
width: 44px;
height: 44px;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
z-index: 2;
}


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

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

Код
#cd-nav ul {
position: absolute;
width: auto;
max-width: none;
bottom: auto;
top: 36px;
visibility: visible;
transform: scale(1);
transition: all 0s;
}
#cd-nav.is-fixed ul {
position: fixed;
width: 90%;
max-width: 400px;
bottom: 20px;
top: auto;
visibility: hidden;
transform: scale(0);
}
}


Шаг 3. JS

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

Код
var offset = 300;


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

Код
var navigationContainer = $('#cd-nav'),
mainNavigation = navigationContainer.find('#cd-main-nav ul');
$(window).scroll(function(){
checkMenu();
});
function checkMenu() {
if( $(window).scrollTop() > offset && !navigationContainer.hasClass('is-fixed')) {
} else if ($(window).scrollTop() <= offset) {
if( mainNavigation.hasClass('is-visible') && !$('html').hasClass('no-csstransitions') ) {
}
else if( mainNavigation.hasClass('is-visible') && $('html').hasClass('no-csstransitions') ) {
}
else {
}
}
}


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

Вот и все. Готово!
К материалу оставили 0 комментариев