jQuery手机端侧边栏滑出导航菜单

所属分类:导航-垂直导航,手风琴菜单

 28704  268  查看评论 (13)
分享到微信朋友圈
X
jQuery手机端侧边栏滑出导航菜单 ie兼容8

更新时间:2018/7/5 下午12:45:39

更新说明:修复遮罩下的页面滑动bug
                 修复点击底层li后无法跳转bug


插件有点low。使用插件要引入相关jq包。及插件的css、js。

需要按照index.html里面的代码布局及类的命名。

插件的初始话很简单,如下:

$('#menu').leftMenu({
  "triggerBtn":".btn"
}).init()

$('#menu')是包裹侧栏的div的id值

'.btn'是显示或隐藏侧栏按钮的class

目前插件只需传入一个的参数即可。

要想修改对应样式到.css文件修改即可。

相关插件-垂直导航,手风琴菜单

基于jQuery的垂直菜单特效

网站上常用的到的垂直菜单,基于jQuery的垂直菜单特效
  垂直导航
 35277  310

jquery下拉菜单导航

jquery hover事件下拉菜单导航仿京东商城商品分类导航样式布局,通过鼠标滑过商品分类导航展示商品分类子菜单内容的效果
  垂直导航
 39671  304

jQuery nav导航(原创)

基于jquery的导航,可折叠可展开。
  垂直导航
 16575  206

jQuery后台左侧菜单导航

jQuery导航菜单 适用于后台网站侧边多级下拉导航菜单
  垂直导航
 96955  666

讨论这个项目(13)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    xx 0
    2020/9/29 13:26:32
    怎么设置某个一级菜单默认是展开状态的 回复
    five 0
    2020/7/6 13:42:10
    怎么改只有二级菜单,现在只有三级菜单 回复
    ██刮刮看 0
    2019/12/30 14:27:07
    展开后,里面的链接不能跳转 回复
    ■。  画个问号给明天 0
    2019/10/29 13:18:11
    三级菜单如果li里字太多会换行,导致三级菜单的高度太小,有的三级菜单显示不出来
        西瓜1
        2019/10/29 13:47:42

        修改以下样式,lefMenu.css中第35行,让其超出自动换行

        .leftMenu ul li {
            width: 90%;
           position: relative;
           padding: 10px 0 10px 20px;
           height: auto;word-wrap:break-word;
        }
    回复
    Fans7 0
    2019/10/28 17:35:05
    点击遮罩层关闭菜单栏后页面所有a标签不能跳转
        Fans70
        2019/10/29 11:16:37
        添加一行$('.menu-dark-back').css("display", "none"),已解决谢谢
        Fans71
        2019/10/29 11:27:46
        错了,应该是$('.menu-dark-back').remove()
        丫头0
        2020/4/8 9:25:59
        在哪里添加呢,研究了半天
    回复
      0
    2019/7/12 10:22:24
    打开没法点啊
        回眸一笑0
        2019/7/23 18:58:28
        你的意思是说,展开后点击最里层没办法跳转是吗
    回复
    ? 0
    2018/10/22 22:05:09
    怎么从右侧滑动呢 不想要左侧的
        回眸一笑1
        2018/10/23 9:02:04
        想从右侧滑动,修改css属性就好。将leftMenu的left改成right同时将.leftMenu.menu-open的left改成right就可以了
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复