Автор

06 06.2017
Современная адаптивная навигация для сайта

Современная адаптивная навигация для сайта


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

 

ДЕМО
ИСХОДНИКИ

 

Авто-скрытие навигации уже довольно давно, особенно на мобильных устройствах. Идея этого шаблона 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) код, который вы найдете прямо под описанием '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 () заботится о том, чтобы скрывать / показывать навигацию в зависимости от того, прокручивается ли пользователь вверх или вниз.

 

Вот и всё!


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеjQuery

20 03.2013
Современная адаптивная навигация для сайта

В этой статье покажу способ создания всплывающего окна на любом сайте. Использовать будем jQuery плагин fancybox. А чтобы добавить смысловой нагрузки статье, вставим в модальное окошко форму отправки письма. Сразу хочу заметить модальные окна на этом плагине работают на всех браузерах. Приступим!


19 06.2015
Современная адаптивная навигация для сайта

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


15 01.2017
Современная адаптивная навигация для сайта

Представляю вашему вниманию два генератор градиента на CSS. С помощью онлайн градиент генераторов css Вы сможете создать фон (background) для вашего сайта блога или проекта. Сервисы просты в управлении и имеет интуитивно понятный интерфейс и гибкие настройки которые максимально позволяют получить тот результат который вам необходим.


06 04.2013
Современная адаптивная навигация для сайта

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


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

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

Close