Адаптивное многоуровневое меню

Адаптивное многоуровневое меню

От автора: адаптивное многоуровневое меню, показывающее свои подменю в их собственном контексте, позволяет экономить пространство при отображении и использовании.

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

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

Пожалуйста, заметьте: оно работает как положено только в браузерах, поддерживающих соответствующие свойства CSS.

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

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

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

Структура меню содержит неупорядоченный список, в котором может быть произвольное количество вложенных списков:

Анимация определяется в классах animation:

А плагин вызывается как тут:

Надеемся, вам понравился этот маленький эксперимент и вы сочтете его вдохновляющим!

Автор: Mary Lou

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

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

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

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

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

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

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

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

Ваш 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