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>