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

来源：互联网发布：ncbi数据库使用方法编辑：程序博客网时间：2024/05/19 16:50

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

运行效果如图：

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