html5手机端上下左右滑动菜单代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 html5手机端上下左右滑动菜单代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<title>html5手机端上下左右滑动菜单代码</title>
<link href="css/nav_sytle.css" rel="stylesheet">
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/nav.js"></script>
</head>
<body>
<div class="con">
    <button class="left">左抽屉菜单</button>
    <button class="right">右抽屉菜单</button>
    <button class="down">下抽屉菜单</button>
    <button class="up">上抽屉菜单</button>
</div>
<div class="bgDiv"></div>
<div class="leftNav">
    <span>菜单1</span>
    <span>菜单2</span>
    <span>菜单3</span>
    <span>菜单4</span>
</div>
<div class="rightNav">
    <span>菜单1</span>
    <span>菜单2</span>
    <span>菜单3</span>
    <span>菜单4</span>
</div>
<div class="downNav">
    <span>菜单1</span>
    <span>菜单2</span>
    <span>菜单3</span>
    <span>菜单4</span>
</div>
<div class="upNav">
    <span>菜单1</span>
    <span>菜单2</span>
    <span>菜单3</span>
    <span>菜单4</span>
</div>
</body>
</html>

JS代码(nav.js):

$(function (){
	var left = $('.left');
	var right = $('.right');
	var down = $('.down');
	var up = $('.up');
	var bg = $('.bgDiv');
	var leftNav = $('.leftNav');
	var rightNav = $('.rightNav');
	var downNav = $('.downNav');
	var upNav = $('.upNav');
	showNav(left,leftNav,"left");
	showNav(right,rightNav,"right");
	showNav(up,upNav,"up");
	showNav(down,downNav,"down");
	function showNav(btn,navDiv,direction){
	btn.on('click',function (){
	bg.css({
	display:"block",transition:"opacity .5s"}
);
	if (direction == "right"){
	navDiv.css({
	right:"0px",transition:"right 1s"}
);
}
else if (direction == "left"){
	navDiv.css({
	left:"0px",transition:"left 1s"}
);
}
else if (direction == "up"){
	navDiv.css({
	top:"0px",transition:"top 1s"}
);
}
else if (direction == "down"){
	navDiv.css({
	bottom:"0px",transition:"bottom 1s"}
);
}
}
);
}
$('span').each(function (){
	var dom = $(this);
	dom.on('click',function (){
	hideNav();
	alert(dom.text())}
);
}
);
	bg.on('click',function (){
	hideNav();
}
);
	function hideNav(){
	leftNav.css({
	left:"-50%",transition:"left .5s"}
);
	rightNav.css({
	right:"-50%",transition:"right .5s"}
);
	upNav.css({
	top:"-40%",transition:"top .5s"}
);
	downNav.css({
	bottom:"-50%",webkitTransition:"bottom .5s",oTransition:"bottom .5s",mozTransition:"bottom .5s",transition:"bottom .5s"}
);
	bg.css({
	display:"none",transition:"display 1s"}
);
}
}
);

CSS代码(nav_sytle.css):

*{margin:0;padding:0;}
body{background-color:green;}
.con{position:absolute;z-index:0;top:50%;margin-top:-51px;left:50%;margin-left:-202px;}
button{width:100px;height:100px;background-color:#fff;border:1px solid #ccc;float:left;}
button:hover{background-color:#f5f5f5;}
span{display:inline-block;width:96%;height:50px;margin-left:2%;line-height:50px;border-bottom:1px solid #f5f5f5;text-align:center;}
span:hover{background-color:#f5f5f5;}
.bgDiv{width:100%;height:100%;background-color:#000;opacity:.5;position:fixed;display:none;z-index:99;bottom:0;}
.leftNav{width:50%;max-width:400px;height:100%;background-color:#fff;position:fixed;z-index:999;top:0;left:-50%;}
.rightNav{width:50%;max-width:400px;height:100%;background-color:#fff;position:fixed;z-index:999;top:0;right:-50%;}
.upNav{width:100%;height:40%;background-color:#fff;position:fixed;z-index:999;top:-40%;}
.downNav{width:100%;height:40%;background-color:#fff;position:fixed;z-index:999;bottom:-40%;}

附件:下载该文件资源,减少时间成本(增值服务)