欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

js如何实现页面侧滑菜单的效果(附代码)

程序员文章站 2022-04-14 09:16:43
...
本篇文章给大家带来的内容是关于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

jQuery+CSS实现一个侧滑导航菜单代码_jquery

JS实现的左侧竖向滑动菜单效果代码_javascript技巧

以上就是js如何实现页面侧滑菜单的效果(附代码)的详细内容,更多请关注其它相关文章!

相关标签: 页面侧滑菜单