Автор

Полноэкранная навигация

Полноэкранная навигация


Полностраничное меню, которое заменяет текущий контент, вытесняя его с экрана.

 

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

 

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

Вот быстрый прототип конечного эффекта, который мы собрали вместе:

 

Создание структуры

HTML структурирован в 3 основных элемента: <main> - содержащий видимый контент, div.cd-nav - обертывание навигации и кнопка действия .cd-nav-trigger.

.cd-nav состоит из двух элементов div.cd-half-block, первый из которых содержит навигацию (.cd-primary-nav), а второй - контактную информацию (.cd-contact-info).

<div id="cd-nav" class="cd-nav">
<div class="cd-navigation-wrapper">
<div class="cd-half-block">
<h2>Navigation</h2>

<nav>
<ul class="cd-primary-nav">
<li><a href="#0" class="selected">The team</a></li>
<!-- list items here -->
</ul>
</nav>
</div><!-- .cd-half-block -->

<div class="cd-half-block">
<address>
<ul class="cd-contact-info">
<li><a href="mailto:info@myemail.co">info@myemail.co</a></li>
<!-- other contact info here -->
</ul>
</address>
</div> <!-- .cd-half-block -->
</div> <!-- .cd-navigation-wrapper -->
</div> <!-- .cd-nav -->

Триггер .cd-nav содержит значок span.cd-nav-icon, который используется для создания значка гамбургера (сам элемент является центральной линией, а его псевдоэлементы :: after и :: before используются для создания Верхняя и нижняя линии) и элемент svg, который используется для создания круга загрузки.

<a href="#cd-nav" class="cd-nav-trigger">Menu 
<span class="cd-nav-icon"></span>

<svg x="0px" y="0px" width="54px" height="54px" viewBox="0 0 54 54">
<circle fill="transparent" stroke="#66788f" stroke-width="1" cx="27" cy="27" r="25" stroke-dasharray="157 157" stroke-dashoffset="157"></circle>
</svg>
</a>

 

Добавление стиля

Когда пользователь нажимает кнопку .cd-nav-trigger, в тело добавляется класс .navigation-is-open: этот класс запускает анимацию значка гамбургера и вход в меню.

Что касается значка гамбургер, анимацию можно разделить на 3 части:

  1. Преобразование значка гамбургера в стрелку: .cd-nav-icon ::after и .cd-nav-icon::before того, как псевдоэлементы будут повернуты на 45 / -45deg (используя в качестве начала координат правый край Элемента), и их ширина уменьшается до 50%;
  2. Поворот всего .cd-nav-icon (180deg);
  3. Эффект загрузки окружности: значение stroke-dashoffset элемента circle установлено равным нулю (изначально у него есть stroke-dasharray = "157 157" и stroke-dashoffset = "157", где 157 - значение окружности).

CSS3 Переходы были использованы для сглаживания шагов анимации.

Вот быстрая анимация, показывающая весь процесс:

.cd-nav-trigger {
transition: transform 0.5s;
}
.navigation-is-open .cd-nav-trigger {
/* rotate trigger when navigation becomes visible */
transform: rotate(180deg);
}
.cd-nav-trigger .cd-nav-icon::before,
.cd-nav-trigger .cd-nav-icon:after {
/* upper and lower lines of the menu icon */
width: 100%;
height: 100%;
transition: transform 0.5s, width 0.5s, top 0.3s;
}
.cd-nav-trigger .cd-nav-icon::before {
transform-origin: right top;
transform: translateY(-6px);
}
.cd-nav-trigger .cd-nav-icon::after {
transform-origin: right bottom;
transform: translateY(6px);
}
.navigation-is-open .cd-nav-trigger .cd-nav-icon::after,
.navigation-is-open .cd-nav-trigger .cd-nav-icon::before {
/* animate arrow --> from hamburger to arrow */
width: 50%;
transition: transform 0.5s, width 0.5s;
}
.navigation-is-open .cd-nav-trigger .cd-nav-icon::before {
transform: rotate(45deg);
}
.navigation-is-open .cd-nav-trigger .cd-nav-icon::after {
transform: rotate(-45deg);
}
.cd-nav-trigger circle {
/* circle border animation */
transition: stroke-dashoffset 0.4s 0s;
}
.navigation-is-open .cd-nav-trigger circle {
stroke-dashoffset: 0;
transition: stroke-dashoffset 0.4s 0.3s;
}

Для эффекта входа в меню элементы <main> и .cd-navigation-wrapper переведены (по оси X) на 100%. Чтобы создать более реалистичный эффект нажатия, мы использовали кубическую кривую Безье в качестве временной функции перехода. Эта кривая позволяет вам установить 4 параметра (контрольные точки кривой), чтобы создать оптимальную кривую ускорения для свойства, которое изменяется во время вашего перехода.

Есть инструменты (например cubic-bezier.com), который позволяет вам настроить свою кривую и предварительно просмотреть эффект, прежде чем использовать его в свой код (вы также можете легко экспортировать параметры окончательной кривой).

Ниже приведена быстрая анимация, которая покажет вам разницу между пользовательскими функциями кубического безье и линейной:

 

Обработка событий

Мы использовали jQuery для прослушивания события click на .cd-nav-trigger и добавлении / удалении класса .navigation-is-open соответственно.

 

Вот и всё!


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



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

Полноэкранная навигация

Как установить кнопки социальных сетей для своего сайта или как добавить блок с кнопками социальных сетей — тема данного урока. Я постараюсь дать вам информацию о самых популярных способах размещения кнопок.

Размещение кнопок социальных сетей на сайте при помощи официальных виджетов:

Кнопка Вконтакте- Мне нравится
Кнопка FaceBook — Like
Кнопка Twitter — Твитнуть
Кнопка Одноклассники — Класс
Кнопка Google — Plus 1


Полноэкранная навигация

Простой шаблон, который позволяет отображать события на временной шкале, а также организовывать их группами (дни недели, конференц-залы и т. Д.).


Полноэкранная навигация

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


Полноэкранная навигация

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


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

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


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

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

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close