Loading

Эластичная навигация для сайта с помощью CSS3

untitled-1Эластичность, сейчас, весьма популярная. Разнообразие девайсов заставляет разработчиков придумывать новые приемы для реализации навигации для разных объектов. В данном уроке мы рассмотрим процесс построения и стилизации замечательной эластической навигации для сайта. В демонстрации мы сделали несколько версий, для отображения в разных условиях, первая навигация это обычная кнопка вызывающая эффект анимации и меню, вторая версия будет реализованная для загрузки мультимедийных файлов.

 

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

Шаг 1. HTML

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

С разметкой не должно возникнуть проблем, если вы немного понимаете в HTML-разметке, так как в ней все просто и понятно, давайте перейдем к следующему шагу.

%d1%8d%d0%bb%d0%b0%d1%81%d1%82%d0%b8%d1%87%d0%bd%d0%b0%d1%8f-%d0%bd%d0%b0%d0%b2%d0%b8%d0%b3%d0%b0%d1%86%d0%b8%d1%8f-%d0%b4%d0%bb%d1%8f-%d1%81%d0%b0%d0%b9%d1%82%d0%b0-%d1%81-%d0%bf%d0%be%d0%bc%d0%be

Шаг 2. CSS

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

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

Для пунктов навигации, мы определили две различные анимации CSS:  scaleIn - для иконок пункта , и slideIn - для элементов содержания; свойство задержки используется для анимации разных дочерних элементов в разные моменты времени.

Для панелей инструментов мы установили следующие правила: когда навигация открыта мы зададим отображение значков (используя scaleIn. анимацию), чтобы отображались метки при наведении курсора мы будем использовать CSS Transitions. Для панели инструментов (третья демонстрация),  у нас получились следующие правила:

Мы использовали JQuery для отслеживания события, когда вы нажимаете на a.cd-nav-trigger, и когда добавляете или удаляете событие с классом .nav-is-visible из nav.cd-stretchy-nav. 

Вот и все. Готово!

1

Автор публикации

не в сети 3 года

RUDEBOX

13
Комментарии: 0Публикации: 19Регистрация: 21-11-2015

Отправить ответ

Оставьте первый комментарий!

Войти с помощью: 
  Subscribe  
Notify of
Авторизация
*
*
Войти с помощью: 
Регистрация
*
*
*
Войти с помощью: 
Генерация пароля