Простая навигация, которая автоматически скрывается, когда пользователь прокручивается вниз и становится видимой, когда пользователь прокручивается вверх.
Авто-скрытие навигации уже довольно давно, особенно на мобильных устройствах. Идея этого шаблона UX проста, но эффективна: мы хотим, чтобы навигация была легкодоступной, поэтому мы придерживаемся ее. Однако мы автоматически скрываем его, когда пользователь прокручивается вниз, чтобы создать больше места для контента. Если пользователь прокручивается, мы интерпретируем его поведение как желание доступа к навигации, поэтому мы возвращаем его.
В файле для скачивания находятся три примера навигации!
Создание структуры
Структура HTML состоит из элемента header.cd-auto-hide-header, который используется для обертывания основной навигации nav.cd-primary-nav и main.cd-main-content для основного содержимого страницы.
<header class="cd-auto-hide-header">
<div class="logo"><a href="#0"><img src="img/cd-logo.svg" alt="Logo"></a></div>
<nav class="cd-primary-nav">
<a href="#cd-navigation" class="nav-trigger">
<span>
<em aria-hidden="true"></em>
Menu
</span>
</a> <!-- .nav-trigger -->
<ul id="cd-navigation">
<li><a href="#0">The team</a></li>
<li><a href="#0">Our Services</a></li>
<li><a href="#0">Our Projects</a></li>
<li><a href="#0">Contact Us</a></li>
</ul>
</nav> <!-- .cd-primary-nav -->
</header> <!-- .cd-auto-hide-header -->
<main class="cd-main-content">
<!-- content here -->
</main> <!-- .cd-main-content -->Если на странице есть суб-навигация, внутри элемента заголовка добавляется дополнительный nav.cd-secondary-nav:
<header class="cd-auto-hide-header">
<div class="logo"><a href="#0"><img src="img/cd-logo.svg" alt="Logo"></a></div>
<nav class="cd-primary-nav">
<a href="#cd-navigation" class="nav-trigger">
<span>
<em aria-hidden="true"></em>
Menu
</span>
</a> <!-- .nav-trigger -->
<ul id="cd-navigation">
<!-- links here -->
</ul>
</nav> <!-- .cd-primary-nav -->
<nav class="cd-secondary-nav">
<ul>
<li><a href="#0">Intro</a></li>
<!-- additional links here -->
</ul>
</nav> <!-- .cd-secondary-nav -->
</header> <!-- .cd-auto-hide-header -->
<main class="cd-main-content sub-nav">
<!-- content here -->
</main> <!-- .cd-main-content -->Наконец, если вторичная навигация находится ниже основного блока, элемент .cd-hero вставлен прямо под <header>, а затем элемент .cd-secondary-nav:
<header class="cd-auto-hide-header">
<div class="logo"><a href="#0"><img src="img/cd-logo.svg" alt="Logo"></a></div>
<nav class="cd-primary-nav">
<a href="#cd-navigation" class="nav-trigger">
<span>
<em aria-hidden="true"></em>
Menu
</span>
</a> <!-- .nav-trigger -->
<ul id="cd-navigation">
<!-- links here -->
</ul>
</nav> <!-- .cd-primary-nav -->
</header> <!-- .cd-auto-hide-header -->
<section class="cd-hero">
<!-- content here -->
</section> <!-- .cd-hero -->
<nav class="cd-secondary-nav">
<ul>
<!-- links here -->
</ul>
</nav> <!-- .cd-secondary-nav -->
<main class="cd-main-content sub-nav-hero">
<!-- content here -->
</main> <!-- .cd-main-content -->
Добавление стиля
Мы использовали класс .cd-auto-hide-header для определения основного стиля заголовка с автосогласованием. По умолчанию заголовок имеет фиксированное положение и верхнюю часть 0; Когда пользователь начинает прокручивать вниз, скрытый класс .is-hidden заголовок прямо над окном просмотра.
.cd-auto-hide-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
transition: transform .5s;
}
.cd-auto-hide-header.is-hidden {
transform: translateY(-100%);
}В файле style.css (или style.scss, если вы используете Sass - sass-lang.com) код, который вы найдете прямо под описанием '1. Auto-Hiding Navigation - Simple '- это тот, который вам нужно включить в свой проект, если вы используете «Простую» автоматическую скрытую навигацию (только для основной навигации).
Если ваш заголовок имеет суб-навигацию (прямо под основной навигацией), тогда вам нужно включить также стиль, который вы найдете в разделе «2». Auto-Hiding Navigation - с описанием Sub Nav. Этот второй блок кода используется для определения основного стиля для вторичной навигации (с использованием класса .cd-secondary-nav).
Наконец, если ваша вторичная навигация находится ниже основного раздела, в дополнение к предыдущим двум блокам вам необходимо включить также код под «3». Auto-Hiding Navigation - с Sub Nav + Hero Image ". Это используется для определения двух классов: .fixed и .slide-up, которые добавляются во вторичную навигацию при прокрутке (первая из них делает ее «липкой», а вторая - слайдом, когда основная навигация скрыта).
.cd-secondary-nav.fixed {
position: fixed;
top: 60px;
}
.cd-secondary-nav.slide-up {
transform: translateY(-60px);
}Наконец, блоки «Main content» и «Intro Section» используются для определения базового стиля для элементов .cd-main-content и .cd-hero elements (в основном для заполнения / поля для учета фиксированного заголовка).
Обработка событий
Мы используем jQuery для прослушивания события прокрутки на объекте окна.
var scrolling = false;
$(window).on('scroll', function(){
if( !scrolling ) {
scrolling = true;
(!window.requestAnimationFrame)
? setTimeout(autoHideHeader, 250)
: requestAnimationFrame(autoHideHeader);
}
});Функция autoHideHeader () заботится о том, чтобы скрывать / показывать навигацию в зависимости от того, прокручивается ли пользователь вверх или вниз.
