Автор

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

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


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

 

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

 

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

 

Вот и всё!

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

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



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

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

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


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

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


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

Если вы ищете, как создать активную диаграмму (или схемы) с информацией - эта новая статья для вас. Я просматривал в Интернете, и нашел одно хорошее и серьезное решение, - Highcharts библиотека. Это чистая javascript библиотека, которая предлагает интерактивные и интуитивно понятные графики. Эта библиотека поддерживает различные возможные графики: площадь, линии, сплайн, areaspline, пирог, колонны и другие. Я думаю, что это лучший способ, чтобы получить информацию для зрителей. Сегодня в демо я подготовил несколько примеров с разными графиками.


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

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


87 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close