Отзывчивое Многоуровневое Меню

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

[ ДЕМО | ИСХОДНИКИ ]

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

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

Ознакомьтесь, как использовалось данное меню на практике –>

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

<div id="dl-menu" class="dl-menuwrapper">
	<button class="dl-trigger">Open Menu</button>
	<ul class="dl-menu">
		<li>
			<a href="#">Item 1</a>
			<ul class="dl-submenu">
				<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><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 -->

Анимации задаются в специальных классах анимации:


.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 : { classin : 'animation-class-name', classout : 'animation-class-name' }
});

Мы надеемся, что вам подошло это многоуровневое меню и вы будете использовать его в своих проектах!

Оригинал | Очень вольный перевод: команда PhilippovPavel.ru 

Читайте также:

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

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