Автор

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

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

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


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

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


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

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


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close