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: '';
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;
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- 768px) {
.yw-nav-toggle {
opacity: 1;
visibility: visible;
}
.nav_list {
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{
150px;
-moz-transform: translateX(0px);
-webkit-transform: translateX(0px);
-ms-transform: translateX(0px);
-o-transform: translateX(0px);
transform: translateX(0px);
}
jQuery:
//click;
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");
$this.removeClass("active");
} else {
$("body").addClass("nav_offscreen");
$this.addClass("active");
}
});
$(Window).scroll(function(){
if ($("body").hasClass("nav_offscreen")) {
$("body").removeClass("nav_offscreen");
$(".js-yw-nav-toggle").removeClass("active");
}
});
}
var menuOutClick = function() {
$(document).click(
function(e) {
var container = $(".nav_list, .js-yw-nav-toggle");
if (!container.is(e.target)
&& container.has(e.target).length === 0) {
if ($("body").hasClass("nav_offscreen")) {
$("body").removeClass("nav_offscreen");
$(".js-yw-nav-toggle").removeClass("active");
}
}
});
}