最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
js实现页面侧滑菜单效果
时间：2022-11-14 22:02:18 编辑：袖梨 来源：一聚教程网
写手机站的时候经常会有侧滑菜单，下面就为大家介绍：
先定义一个最外层div container，这个也是页面显示部分，设置样式overflow: hidden;
然后在container里面定义个div为侧滑菜单，样式为：position: absolute;top: 0px;left:-菜单宽度；
还需要在container里面写一个div main，这个div里面存放主页面
下面就是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'});
}
})
相关文章
- 永远的蔚蓝星球酣眠不醒闪电之子 酣眠不醒闪电之子皮肤分享 03-20
- jm天堂漫画-官网最新入口 03-20
- 女神漫画免费阅读在线观看最新版本下载安装入口页面-女神漫画全集高清无广告完整版在线阅读页面 03-20
- 梦境护卫队资源获取途径及规划分享 03-20
- 心动小镇2026年3月17日溜溜橡木及无暇萤石位置 03-20
- 麻花豆传媒剧沈娜娜全集免费-麻花豆传媒剧高清在线观看 03-20