Многоуровневое меню

Многоуровневое меню

От автора: простое многоуровневое меню с легкой анимацией при переходе между пунктами и «хлебными крошками» с кнопкой возврата назад.

скачать исходникидемо

Сегодня у нас проект по созданию многоуровневого меню с анимацией. Основная задача – анимировать каждый пункт меню при переходе на новый уровень. Анимация начинается с пункта, на который был совершен клик, и потом с легкой задержкой распространяется на остальные пункты меню. На внутренних уровнях анимация работает по таким же принципам. Мы самостоятельно добавили так называемые хлебные крошки и кнопку назад (в нашем демо скрыта). Подуровни связаны между собой с помощью атрибута data-. Для мобильных устройств мы добавили несколько медиа запросов, а также специальную кнопку для возвращения меню в прежнее состояние.

В демо использованы иконки Organic Food от Wojciech Zasina и Feather icon set от Cole Bemis. Пожалуйста, обратите внимание на то, что мы используем несколько современных свойств CSS, которые поддерживаются только в современных браузерах.

HTML

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

CSS

JavaScript

Проект на GitHub

Автор: Mary Lou

Источник: http://tympanus.net/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Фреймворк Bootstrap - верстаем адаптивно, просто, быстро!

Получите видеокурс по основам Bootstrap

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (1)

  1. Частица Бога

    В контент вставляю фотогалерею, а она не работает. В чем может быть причина?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree