jQuery实现左菜单:
思路:
1、左菜单开始left坐标为负,即不在主页面内。
2、当点击按钮时,修改左菜单与主页面的坐标,使左菜单将主页面"向右顶",再次点击按钮还原起始坐标实现收起菜单。
3、css添加"transition:0.5s"实现动画效果,完成左菜单实现。
实现代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- viewport移动端限制缩放大小 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<title>左菜单</title>
<style>
*{
margin:0;
padding:0;
width:100%;
height:100%;
overflow:hidden; /* 隐藏超出屏幕部分 */
}
.menu{
height:100%;
width:75%;
background:#f1103a;
position:absolute; /* 绝对定位 */
transition:0.25s; /* 动画效果 */
}
.menu_hide{
left:-75%;
}
.menu_show{
left:0;
}
.content{
height:100%;
width:100%;
background:#000000;
position:absolute; /* 绝对定位 */
transition:0.25s; /* 动画效果 */
}
.content_hide{
left:75%;
}
.content_show{
left:0;
}
</style>
<script>
var oc = 1;
function clickLeft(){
if(oc==1){
$('#aside').removeClass('menu_hide').addClass('menu_show');
$('#wrap').removeClass('content_show').addClass('content_hide');
oc=0;
}else if(oc==0){
$('#aside').removeClass('menu_show').addClass('menu_hide');
$('#wrap').removeClass('content_hide').addClass('content_show');
oc=1;
}
}
</script>
</head>
<body>
<div id="aside" class="menu menu_hide">
<!--<h2 style="text-align:center;padding:10%;font-size:50px">Side Menu</h2>-->
</div>
<div id='wrap' class="content content_show">
<input type='button' id='btn' value="菜单" οnclick="clickLeft()" style="margin-left:2%;font-size:1em;width:10em;height:5em"/>
<input type='button' id='btn' value="菜单" οnclick="clickLeft()" style="margin-left:2%;font-size:1em;width:10em;height:5em"/>
<input type='button' id='btn' value="菜单" οnclick="clickLeft()" style="margin-left:2%;font-size:1em;width:10em;height:5em"/>
<input type='button' id='btn' value="菜单" οnclick="clickLeft()" style="margin-left:2%;font-size:1em;width:10em;height:5em"/>
<input type='button' id='btn' value="菜单" οnclick="clickLeft()" style="margin-left:2%;font-size:1em;width:10em;height:5em"/>
<input type='button' id='btn' value="菜单" οnclick="clickLeft()" style="margin-left:2%;font-size:1em;width:10em;height:5em"/>
</div>
</body>
</html>