Автор

Полноэкранная навигация с плавающими элементами меню на jQuery

Полноэкранная навигация с плавающими элементами меню на jQuery


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

 

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

 

Мы использовали анимацию CSS и щепотку jQuery для анимации элементов навигации и позволяли им вскакивать и выходить из экрана.

 

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

Структура HTML довольно простая: навигация представляет собой неупорядоченный список, семантически завернутый в элемент <nav> и помещенный в div.cd-bouncy-nav-modal.

<div class="cd-bouncy-nav-modal">
<nav>
<ul class="cd-bouncy-nav">
<li><a href="#0">Item 1</a></li>
<!-- other list items here -->
</ul>
</nav>
<a href="#0" class="cd-close">Close modal</a>
</div>

 

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

Мы использовали как CSS3-переходы, так и анимации. По умолчанию элементы списка навигации скрыты и перемещаются под окном просмотра (используя translateY (100vh)). Когда пользователь нажимает элемент .cd-bouncy-nav-trigger, класс .fade-in добавляется в .cd-bouncy-nav: его значения непрозрачности и видимости изменяются так, что они становятся видимыми (достигается плавный эффект Используя переходы CSS), в то время как элементы списка навигации анимируются с использованием анимации cd-move-in.

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

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

Примечание!

Мы устанавливаем режим анимации-заливки: вперед, чтобы элементы списка не теряли свою позицию в конце анимации (из-за разных значений задержки анимации мы не могли назначить translateY (0) непосредственно Элементы списка).

.cd-bouncy-nav-modal {
  position: fixed;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s 0.6s, visibility 0s 0.9s;
}
.cd-bouncy-nav-modal.fade-in {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.1s 0s, visibility 0s 0s;
}
.cd-bouncy-nav li {
  transform: translateY(100vh);
}
.fade-in .cd-bouncy-nav li {
  animation: cd-move-in 0.4s;
  animation-fill-mode: forwards;
}
@keyframes cd-move-in {
  0% {
    transform: translateY(100vh);
  }
  65% {
    transform: translateY(-1.5vh);
  }
  100% {
    transform: translateY(0vh);
  }
}

 

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

Мы использовали jQuery для прослушивания события щелчка на .cd-bouncy-nav-trigger (или элементе .cd-close) и, соответственно, добавили / удалили класс .fade-in / .fade-out.

 

Вот и всё!

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

vk.com/club.ssdru

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



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

Полноэкранная навигация с плавающими элементами меню на jQuery

Пост был написан мной 25.09.2011 и я его немного обновил и описал результаты этого неприятного факта. «Сегодня лопатил интернет и набрел на клон моего сайта. Дело в том, что этот домен (www.studio25kadr.ru) ранее принадлежал мне, но мне пришлось его поменять на существующий <a href="/">www.s-sd.ru</a>...


Полноэкранная навигация с плавающими элементами меню на jQuery

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


Полноэкранная навигация с плавающими элементами меню на jQuery

Модальное окно «product quick view», анимированное с использованием CSS3 и Velocity.js, которое обеспечивает пользователю быстрый доступ к основной информации о продукте.


Полноэкранная навигация с плавающими элементами меню на jQuery

Минимальный и настраиваемый фрагмент, позволяющий быстро генерировать семантическую форму в ваших веб-проектах.


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

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


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

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

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close