How To Create a Transforming Hamburger Menu Icon - Transformicons Burger Menu - Tutorial

Hôm nay mình sẽ giới thiệu cho các bạn một hiệu ứng Transforming Hamburger Menu Icon đơn giản bằng CSS3 vô cùng ấn tượng.
<div id="btn-menu" class="">
    <span class=""></span>
    <span class=""></span>
    <span class=""></span>
</div>

#btn-menu {
	position: relative;
	span {
		width: 34px;
		height: 4px;
		background-color: #262626;
		display: block;
		margin-bottom: 8px;
		-webkit-transition: .5s;-o-transition: .5s;transition: .5s;
		position: relative;
		&:last-child {
			margin-bottom: 0;
		}
		&:nth-child(1) {
			-webkit-transform-origin: left;
			    -ms-transform-origin: left;
			        transform-origin: left;
		}
		&:nth-child(2) {
			-webkit-transform-origin: center;
			    -ms-transform-origin: center;
			        transform-origin: center;
		}
		&:nth-child(3) {
			-webkit-transform-origin: left;
			    -ms-transform-origin: left;
			        transform-origin: left;
		}
	}
	&.open {
		span {
			&:nth-child(1) {
				-webkit-transform: rotate(45deg);
				    -ms-transform: rotate(45deg);
				        transform: rotate(45deg);
				left: 5px;
			}
			&:nth-child(2) {
				-webkit-transform: rotate(315deg);
				    -ms-transform: rotate(315deg);
				        transform: rotate(315deg);
				right: 0px;
			}
			&:nth-child(3) {
				-webkit-transform: scaleX(0);
				    -ms-transform: scaleX(0);
				        transform: scaleX(0);
			}
		}
	}
}

jQuery(document).ready(function($) {
    $("#btn-menu").click(function(event) {
        $(this).toggleClass('open');
    });
});

0 thảo luận về How To Create a Transforming Hamburger Menu Icon - Transformicons Burger Menu - Tutorial

comment_blank
Hãy để lại #comment của bạn mình sẽ giải đáp thắc mắc một cách sớm nhất có thể.

Bài viết cùng chuyên mục