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

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

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

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

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

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


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

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

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

<div id="dl-menu" class="dl-menuwrapper">
 <button>Open Menu</button>
 <ul class="dl-menu">
 <li>
 <a href="#">Item 1</a>
 <ul class="dl-submenu">
 <li class="dl-back"><a href="#">back</a></li>
 <li><a href="#">Sub-Item 1</a></li>
 <li><a href="#">Sub-Item 2</a></li>
 <li><a href="#">Sub-Item 3</a></li>
 <li>
 <a href="#">Sub-Item 4</a>
 <ul class="dl-submenu">
 <li class="dl-back"><a href="#">back</a></li>
 <li><a href="#">Sub-Sub-Item 1</a></li>
 <li><a href="#">Sub-Sub-Item 2</a></li>
 <li><a href="#">Sub-Sub-Item 3</a></li>
 </ul>
 </li>
 <li><!-- ... --></li>
 <!-- ... -->
 </ul>
 </li>
 <li><!-- ... --></li>
 <li><!-- ... --></li>
 <!-- ... -->
 </ul>
</div><!-- /dl-menuwrapper -->

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

.dl-menu.dl-animate-out-1 {
 animation: MenuAnimOut1 0.4s linear forwards;
}
 
@keyframes MenuAnimOut1 {
 50% {
 transform: translateZ(-250px) rotateY(30deg);
 }
 75% {
 transform: translateZ(-372.5px) rotateY(15deg);
 opacity: .5;
 }
 100% {
 transform: translateZ(-500px) rotateY(0deg);
 opacity: 0;
 }
}
 
.dl-menu.dl-animate-in-1 {
 animation: MenuAnimIn1 0.3s linear forwards;
}
 
@keyframes MenuAnimIn1 {
 0% {
 transform: translateZ(-500px) rotateY(0deg);
 opacity: 0;
 }
 20% {
 transform: translateZ(-250px) rotateY(30deg);
 opacity: 0.5;
 }
 100% {
 transform: translateZ(0px) rotateY(0deg);
 opacity: 1;
 }
}

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

$( '#dl-menu' ).dlmenu({
 animationClasses : { in : 'animation-class-name', out : 'animation-class-name' }
});

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

Автор: Mary Lou

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

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

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

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

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

Получить

Метки: ,

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

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree