Раскрывающаяся навигация

2
297

В данном материале, показан пример создания кнопки (триггера) для вызова раскрывающегося меню навигации.

Источником вдохновения стал красивый концепт с сайта dribbble от

  1. Фиксированная навигация
  2. Кнопка добавления контента
  3. Кнопка редактирования контента

Иконки: Nucleoapp.com

stretchy-navigation-featured
Демо Скачать

Создаем структуру

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

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

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

Курсы программирования в городе Харькове — easycode.com.ua . EasyCode — это ваш шанс попасть в мир IT. Наша школа объединяет классных ITшников, влюбленных в свое дело, и всех желающих, кто готов впитывать их знания и опыт.

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

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

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

Для тулбара редактирования контента, к примеру, мы используем следующее:

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

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

 

2 КОММЕНТАРИИ

  1. Как сделать, что бы меню было по левую сторону, и соответственно текст позиционировался с права

    • Поменяйте позиционирование элементов с правой стороны на левую. И измените padding элемента текста.

ОСТАВЬТЕ ОТВЕТ

Пожалуйста оставьте комментарий!
Введите ваше имя