Автор

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

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


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

 

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

 

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

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

В данном уроке мы рассмотрим слайдер изображений с анимированными подписи, отзывчивым интерфейсом и HTML элементами, как видео, IFrame и регулятора. При этом легко добавить неограниченное количество слайдов и заголовков. Используйте его в качестве слайдера изображений, галереи фотографий, ротатора для баннерной рекламы, или даже презентации. Чтобы существенно сократить время загрузки страницы, предварительная загрузка доступна для каждого слайдера, так что изображение будут загружаться постепенно.


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

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


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

У вас раньше появлялось неприятное чувство, когда ваши подписи плохо походили к цветам кнопок, панелей, или просто текст слабо контрастировал с фоном страницы? С помощью CSS тени эту проблему легко решить, используя свойство text-shadow, чтобы улучшить читабельность и контрастность текста.


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

В этом учебнике по HTML 5 и CSS 3 расскрываются стандарты нового  поколения разработки веб приложений на простых и работающих примерах. В наше время основные браузеры и мобильные устройства поддерживают спецификации HTML 5 и CSS 3. Эти новейшие технологии это основа последующего поколения интернет-разработок. Преимущества технологий нового поколения явны: удобство и комфорт для пользователя, для программиста - простота и удобства.


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

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


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

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

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


Перейти на хостинг

О КОМПАНИИ

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

Close

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


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

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

Close