您的位置：首页 > Web前端 > HTML

[HTML]如何实现导航栏的从左滑入效果：点击隐藏，再次点击消失

2013-06-28 16:23 579 查看

首先是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;
}

运行效果如图：

点击之后导航栏从左向右滑入：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航