首先是html代码：
<html>
<head>
<title>PopView</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="myScript.js"></script>
<link rel="stylesheet" type="text/css" href="myStyle.css" />
</head>
<body>
<div id="popView"></div>
</body>
</html>然后是javascript代码（使用jquery实现）：
$(document).ready(function(){
var isHiden = true; /*控制切换菜单*/
$('#popView').click(function(){
if(isHiden){
$('#popView').animate({left:'+=380px'});//菜单块向右移动
}else{
$('#popView').animate({left:'-=380px'}); //菜单块向左移动
}
isHiden = !isHiden;
});
});最后是css代码：
/*弹出菜单*/
#popView{
/*左侧弹出窗口的长宽、圆角、背景颜色*/
height: 400px;
width: 400px;
border-radius: 10px;
background-color: #7AC5CD;
/*布局排版*/
position:absolute;
z-index:2;
left:-390px;
/*字体设置*/
text-align: center;
color: #FFFFFF;
}
运行效果如图：
点击之后导航栏从左向右滑入：
878
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
