Автор

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

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


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

 

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

 

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

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

 

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

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 соответственно.

 

Вот и всё!

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

vk.com/club.ssdru

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



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

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

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


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

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


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

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


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

Чего вы можете добиться с помощью CSS 3D Transforms. Будут случаи, когда вы будете в полной мере использовать возможности CSS 3D. 


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

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


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

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

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close