响应式菜单栏： bootstrap + jQuery

bootstrap库能够很方便的实现PC和移动上的响应式操作。

jQuery库大大的简化了脚本的开发；

html:

<html>
<body>
<div class='main_content'>
	<div class='nav_list'>
		{include file="admin@public/nav"}
		<a href="#" class="js-yw-nav-toggle yw-nav-toggle"><i></i></a>			<!-- fixed  left bottom -->
	</div>
	<div class='manager_content '>
		{block name="content"}{/block}	
	</div>
</div>
</body>
</html>

css:

.yw-nav-toggle i::before, .yw-nav-toggle i::after {
	content: '';
	width: 30px;
	height: 2px;
	background: #000;
	position: absolute;
	left: 0;
	-webkit-transition: 0.2s;
	-o-transition: 0.2s;
	transition: 0.2s;
}

.yw-nav-toggle i::before {
	top: -7px;
}

.yw-nav-toggle i::after {
	bottom: -7px;
}

.yw-nav-toggle:hover i::before {
	top: -10px;
}

.yw-nav-toggle:hover i::after {
	bottom: -10px;
}

.yw-nav-toggle:active i::before {
	top: 0px;
	-webkit-transform: rotateZ(45deg);
	-moz-transform: rotateZ(45deg);
	-ms-transform: rotateZ(45deg);
	-o-transform: rotateZ(45deg);
	transform: rotateZ(45deg);
}

.yw-nav-toggle:active i::after {
	bottom: 0px;
	-webkit-transform: rotateZ(-45deg);
	-moz-transform: rotateZ(-45deg);
	-ms-transform: rotateZ(-45deg);
	-o-transform: rotateZ(-45deg);
	transform: rotateZ(-45deg);
}

.nav_list {
	position: fixed;
	width: 150px;
	border: 1px solid #0d5c57;
	margin-left: 2px;
	margin-top: 10px;
	-moz-transform: translateX(0px);
	-webkit-transform: translateX(0px);
	-ms-transform: translateX(0px);
	-o-transform: translateX(0px);
	transform: translateX(0px);
	-moz-transform: translateX(0px);
	-webkit-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
}

@media screen and (max-width: 768px) {
	.yw-nav-toggle {
		opacity: 1;
		visibility: visible;
	}
	.nav_list {
		width: 150px;
		-moz-transform: translateX(-150px);
		-webkit-transform: translateX(-150px);
		-ms-transform: translateX(-150px);
		-o-transform: translateX(-150px);
		transform: translateX(-150px);
		-moz-transform: translateX(-150px);
	}
}


body.nav_offscreen .nav_list{
	width: 150px;
	-moz-transform: translateX(0px);
	-webkit-transform: translateX(0px);
	-ms-transform: translateX(0px);
	-o-transform: translateX(0px);
	transform: translateX(0px);
}

jQuery:

	var nav_off = function() {
		$('.js-yw-nav-toggle').on('click', function(event) {
			event.preventDefault();
			var $this = $(this);

			if ($("body").hasClass("nav_offscreen")) {
				$("body").removeClass("nav_offscreen");
			} else {
				$("body").addClass("nav_offscreen");
			}

		})
		
		$(Window).scroll(function(){			
			if ($("body").hasClass("nav_offscreen")) {
				$("body").removeClass("nav_offscreen");
			} 
		})
	}

响应式菜单栏： bootstrap + jQuery

猜你喜欢