Home / Hướng Dẫn / CSS / Tạo Drop menu Responsive

Tạo Drop menu Responsive

Trong bài hướng dẫn này, chúng tôi muốn chia sẻ đến các bạn một Drop Menu. Chúng tiết kiệm không gian cho các menu có nhiều nội dung.

Tạo Drop menu Responsive

Demo Download

Cấu trúc của menu như sau:



<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 -->

Cấu hình CSS làm chuyển động như sau:


.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;
	}
}

Thêm plugin jQuery và gọi thực hiện:


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

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Time limit is exhausted. Please reload CAPTCHA.