Автор

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

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


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

 

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

 

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

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

 

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

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

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

Библиотека WebGL позволяет создавать в браузере удивительные 3D игры, сцены и эффекты. Пока большинство из них только для развлечений, но некоторые могут быть уже сегодня использоваться на динамичных сайтах. Сегодня мы бы хотели привести пример реализации эффекта воды, который не оставит Вас равнодушным. Впечатляет, что так просто можно реализовать объемную графику прямо в окне браузера. Кроме этого данная технология стремительно набирает обороты и пользуется популярностью в веб-дизайнеров. Советуем Вам присмотреться к данной технологии.


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

Представляю вашему вниманию два генератор градиента на CSS. С помощью онлайн градиент генераторов css Вы сможете создать фон (background) для вашего сайта блога или проекта. Сервисы просты в управлении и имеет интуитивно понятный интерфейс и гибкие настройки которые максимально позволяют получить тот результат который вам необходим.


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

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

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


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

Скругленный навигационный триггер, который растягивается при нажатии / нажатии, чтобы открыть навигационные элементы.


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close