本篇文章给大家带来的内容是关于js如何实现页面侧滑菜单的效果（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
写手机站的时候经常会有侧滑菜单，下面就为大家介绍：
先定义一个最外层p container，这个也是页面显示部分，设置样式overflow: hidden;
然后在container里面定义个p为侧滑菜单，样式为：position: absolute;top: 0px;left:-菜单宽度；
还需要在container里面写一个p main，这个p里面存放主页面
下面就是js实现了
大致思路如下：当点击菜单按钮显示菜单时，main向一旁移动菜单宽度的大小，菜单left为0；菜单消失时，还原至原来状态
代码如下：
$(".navBtn").click(function(){
var left = $(".leftNav").css("left");
left = parseInt(left);
if(left<0){
$(".main").animate({ marginLeft : 403},{duration:'fast'});
$(".leftNav").animate({ left : 0},{duration:'fast'});
}else{
$(".main").animate({marginLeft:0},{duration:'fast'});
$(".leftNav").animate({left:-403},{duration:'fast'});
}
})相关推荐：
CSS3手机端侧滑菜单 4种滑动菜单特效_html/css_WEB-ITnose
JS实现的左侧竖向滑动菜单效果代码_javascript技巧
以上是js如何实现页面侧滑菜单的效果（附代码）的详细内容。更多信息请关注PHP中文网其他相关文章！
