Автор

Раздвижная, анимированная навигация

Раздвижная, анимированная навигация


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

В исходниках находятся три варианта навигации.

 

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

 

Мы решили осуществить идею с растягивающейся навигацией и создать 3 разных пользовательских функции, когда этот фрагмент был бы полезен: 1) фиксированная навигация, 2) добавление кнопки контента и 3) кнопка редактирования контента.

 

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

Структура HTML довольно простая: nav.cd-stretchy-nav используется для обертывания неупорядоченного списка (содержащего элементы навигации) и a.cd-nav-trigger (для значка меню).
Для создания эластичного фона используется дополнительный элемент span.stretchy-nav-bg.

<nav class="cd-stretchy-nav">
<a class="cd-nav-trigger" href="#0">
Menu
<span aria-hidden="true"></span>
</a>

<ul>
<li><a href="#0" class="active"><span>Home</span></a></li>
<li><a href="#0"><span>Portfolio</span></a></li>
<!-- other list items here -->
</ul>

<span aria-hidden="true" class="stretchy-nav-bg"></span>
</nav>

 

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

Мы создали класс .cd-stretchy-nav, чтобы определить основной стиль для растягивающей навигации. Затем мы использовали два дополнительных класса: add-content и .edit-content для настройки панелей инструментов для добавления и редактирования контента соответственно.

Основная идея анимации: мы назначаем span.stretchy-nav-bg фиксированную высоту и ширину (то же самое, что и a.cd-nav-trigger); при открытии навигации мы используем класс .nav-is-visible для анимации его высоты (или ширины для панели инструментов add-content), чтобы создать эффект растяжения при отображении элементов списка навигации.

.cd-stretchy-nav {
  position: fixed;
  z-index: 2;
  top: 40px;
  right: 5%;
}
.cd-stretchy-nav .stretchy-nav-bg {
  /* this is the stretching navigation background */
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  width: 60px;
  height: 60px;
  border-radius: 30px;
  background: #9acd91;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  transition: height 0.2s, box-shadow 0.2s;
}
.cd-stretchy-nav.nav-is-visible .stretchy-nav-bg {
  height: 100%;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2);
}

Для элементов навигации мы определили 2 разных анимации CSS: scaleIn для значков элементов и slideIn для ярлыков элементов.

.cd-stretchy-nav ul {
  position: relative;
  z-index: 2;
  visibility: hidden;
  transition: visibility 0.3s;
}
.cd-stretchy-nav ul a {
  position: relative;
}
.cd-stretchy-nav ul a::after {
  /* navigation item icons */
  content: '';
  position: absolute;
  height: 16px;
  width: 16px;
  transform: translateY(-50%) scale(0);
  opacity: .6;
  background: url(../img/cd-sprite-1.svg) no-repeat 0 0;
}
.cd-stretchy-nav ul span {
  /* navigation item labels */
  display: block;
  opacity: 0;
  transform: translateX(-25px);
}
 
.cd-stretchy-nav.nav-is-visible ul {
  visibility: visible;
}
.cd-stretchy-nav.nav-is-visible ul a::after {
  /* navigation item icons */
  transform: translateY(-50%) scale(1);
  animation: scaleIn 0.15s backwards;
}
.cd-stretchy-nav.nav-is-visible ul span {
  opacity: 1;
  transform: translateX(0);
  animation: slideIn 0.15s backwards;
}
 
.cd-stretchy-nav.nav-is-visible ul li:first-of-type a::after,
.cd-stretchy-nav.nav-is-visible ul li:first-of-type span {
  animation-delay: 0.05s;
}
/* animation delay for other children here ...*/
 
@keyframes scaleIn {
  from {
    transform: translateY(-50%) scale(0);
  }
  to {
    transform: translateY(-50%) scale(1);
  }
}
 
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-25px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

Для панелей инструментов:

Когда открыта навигация, мы показываем только значки элементов (используя анимацию scaleIn), а метки элементов отображаются при наведении курсора на навигацию (с использованием переходов CSS).

Например, для панели инструментов редактирования мы имеем:

.cd-stretchy-nav.edit-content ul span {
  position: absolute;
  top: 0;
  right: 35px;
  height: 30px;
  line-height: 30px;
  opacity: 0;
  visibility: hidden;
  background-color: rgba(0, 0, 0, 0.55);
  transition: opacity 0.2s, visibility 0.2s;
}
.cd-stretchy-nav.edit-content ul span::after {
  /* triangle below the tooltip */
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  height: 0;
  width: 0;
  border: 4px solid transparent;
  border-left-color: rgba(0, 0, 0, 0.55);
}
 
.no-touch .cd-stretchy-nav.edit-content.nav-is-visible ul a:hover span {
  opacity: 1;
  visibility: visible;
}

 

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

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

 

Вот и всё!

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

vk.com/club.ssdru

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



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

Раздвижная, анимированная навигация

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


Раздвижная, анимированная навигация

Градиент является прекрасным инструментом манипуляции с цветом в CSS3. Вместо того, чтобы использовать изображение, для создания эффекта градиента на веб-странице, куда выгодней будет воспользоваться CSS3 градиентом и тем самым «облегчить» сайт. Так как пользователю не нужно будет тратить времени и трафика на загрузку фонового изображения. Существует два основных вида градиента: радиальный и линейный. Сегодняшний пост будет именно о них.


Раздвижная, анимированная навигация

Вторичная панель содержимого, которая складывается плотно, поддерживается CSS-преобразованиями и jQuery.


Раздвижная, анимированная навигация

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


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

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


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

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

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close