多级菜单

所属分类:导航-水平导航

 56056  381  查看评论 (13)
分享到微信朋友圈
X
多级菜单 ie兼容9

多级推菜单是跨浏览器兼容的jQuery插件,允许导航元素无限的嵌套。

这个jQuery插件的灵感来自Codrops MultiLevelPushMenu但不像它没有的CSS 3D变换,因此在旧的浏览器(即IE 8)上可以正常使用.


产品特点

多级菜单支持

导航元素的嵌套无止境

选择推/滑动DOM元素

灵活,简单的标记

JS数组输入,如HTML标记替换

跨浏览器兼容性

Chrome

Midori

Firefox

Safari

IE8+

Opera 12.16

Android Browser 4.1.2

iOS Safari 7.0.1

使用步骤

包括CSS“multilevelpushmenu.css”可以修改,以适应网站设计。

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.min.css">

字体我喜欢(使用任何其他你喜欢的)

<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700&subset=latin,cyrillic-ext,latin-ext,cyrillic' rel='stylesheet' type='text/css'>

平推式菜单CSS

<link rel="stylesheet" href="multilevelpushmenu.css" />

包括JS jQuery

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Modernizr(需要IE8)

<script src="//oss.maxcdn.com/libs/modernizr/2.6.2/modernizr.min.js"></script>

推式菜单js

<script src="jquery.multilevelpushmenu.min.js></script>

HTML标记

复制下面的HTML标记来创建菜单,exacty相同的项目,如下所示。

<div id="menu">
  <nav>
    <h2><i class="fa fa-reorder"></i>All Categories</h2>
    <ul>
        <li>
            <a href="#"><i class="fa fa-laptop"></i>Devices</a>
            <h2><i class="fa fa-laptop"></i>Devices</h2>
            <ul>
                <li>
                    <a href="#"><i class="fa fa-phone"></i>Mobile Phones</a>
                    <h2><i class="fa fa-phone"></i>Mobile Phones</h2>
                    <ul>
                        <li>
                            <a href="#">Super Smart Phone</a>
                        </li>
                        <li>
                            <a href="#">Thin Magic Mobile</a>
                        </li>
                        <li>
                            <a href="#">Performance Crusher</a>
                        </li>
                        <li>
                            <a href="#">Futuristic Experience</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#"><i class="fa fa-desktop"></i>Televisions</a>
                    <h2><i class="fa fa-desktop"></i>Televisions</h2>
                    <ul>
                        <li>
                            <a href="#">Flat Super Screen</a>
                        </li>
                        <li>
                            <a href="#">Gigantic LED</a>
                        </li>
                        <li>
                            <a href="#">Power Eater</a>
                        </li>
                        <li>
                            <a href="#">3D Experience</a>
                        </li>
                        <li>
                            <a href="#">Classic Comfort</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#"><i class="fa fa-camera-retro"></i>Cameras</a>
                    <h2><i class="fa fa-camera-retro"></i>Cameras</h2>
                    <ul>
                        <li>
                            <a href="#">Smart Shot</a>
                        </li>
                        <li>
                            <a href="#">Power Shooter</a>
                        </li>
                        <li>
                            <a href="#">Easy Photo Maker</a>
                        </li>
                        <li>
                            <a href="#">Super Pixel</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            <a href="#"><i class="fa fa-book"></i>Magazines</a>
            <h2><i class="fa fa-book"></i>Magazines</h2>
            <ul>
                <li>
                    <a href="#">National Geographics</a>
                </li>
                <li>
                    <a href="#">The Spectator</a>
                </li>
                <li>
                    <a href="#">Rambler</a>
                </li>
                <li>
                    <a href="#">Physics World</a>
                </li>
                <li>
                    <a href="#">The New Scientist</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#"><i class="fa fa-shopping-cart"></i>Store</a>
            <h2><i class="fa fa-shopping-cart"></i>Store</h2>
            <ul>
                <li>
                    <a href="#"><i class="fa fa-tags"></i>Clothes</a>
                    <h2><i class="fa fa-tags"></i>Clothes</h2>
                    <ul>
                        <li>
                            <a href="#"><i class="fa fa-female"></i>Women's Clothing</a>
                            <h2><i class="fa fa-female"></i>Women's Clothing</h2>
                            <ul>
                                <li>
                                    <a href="#">Tops</a>
                                </li>
                                <li>
                                    <a href="#">Dresses</a>
                                </li>
                                <li>
                                    <a href="#">Trousers</a>
                                </li>
                                <li>
                                    <a href="#">Shoes</a>
                                </li>
                                <li>
                                    <a href="#">Sale</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="#"><i class="fa fa-male"></i>Men's Clothing</a>
                            <h2><i class="fa fa-male"></i>Men's Clothing</h2>
                            <ul>
                                <li>
                                    <a href="#">Shirts</a>
                                </li>
                                <li>
                                    <a href="#">Trousers</a>
                                </li>
                                <li>
                                    <a href="#">Shoes</a>
                                </li>
                                <li>
                                    <a href="#">Sale</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">Jewelry</a>
                </li>
                <li>
                    <a href="#">Music</a>
                </li>
                <li>
                    <a href="#">Grocery</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">Collections</a>
        </li>
        <li>
            <a href="#">Credits</a>
        </li>
    </ul>
  </nav>
</div>


JS数组(而不是HTML标记)


您可以使用JS数组,而不是上面的HTML标记。

<script>
var arrMenu = [
  {
    title: 'All Categories',
    icon: 'fa fa-reorder',
    items: [
      {
        name: 'Devices',
        icon: 'fa fa-laptop',
        link: '#',
        items: [
          {
            title: 'Devices',
            icon: 'fa fa-laptop',
            items: [
              {
                name: 'Mobile Phones',
                icon: 'fa fa-phone',
                link: '#',
                items: [
                  {
                    title: 'Mobile Phones',
                    icon: 'fa fa-phone',
                    link: '#',
                    items: [
                      {
                        name: 'Super Smart Phone',
                        link: '#'
                      },
                      {
                        name: 'Thin Magic Mobile',
                        link: '#'
                      },
                      {
                        name: 'Performance Crusher',
                        link: '#'
                      },
                      {
                        name: 'Futuristic Experience',
                        link: '#'
                      }
                    ]
                  }
                ]
              },
              {
                name: 'Televisions',
                icon: 'fa fa-desktop',
                link: '#',
                items: [
                  {
                    title: 'Televisions',
                    icon: 'fa fa-desktop',
                    link: '#',
                    items: [
                      {
                        name: 'Flat Super Screen',
                        link: '#'
                      },
                      {
                        name: 'Gigantic LED',
                        link: '#'
                      },
                      {
                        name: 'Power Eater',
                        link: '#'
                      },
                      {
                        name: '3D Experience',
                        link: '#'
                      },
                      {
                        name: 'Classic Comfort',
                        link: '#'
                      }
                    ]
                  }
                ]
              },
              {
                name: 'Cameras',
                icon: 'fa fa-camera-retro',
                link: '#',
                items: [
                  {
                    title: 'Cameras',
                    icon: 'fa fa-camera-retro',
                    link: '#',
                    items: [
                      {
                        name: 'Smart Shot',
                        link: '#'
                      },
                      {
                        name: 'Power Shooter',
                        link: '#'
                      },
                      {
                        name: 'Easy Photo Maker',
                        link: '#'
                      },
                      {
                        name: 'Super Pixel',
                        link: '#'
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        name: 'Magazines',
        icon: 'fa fa-book',
        link: '#',
        items: [
          {
            title: 'Magazines',
            icon: 'fa fa-book',
            items: [
              {
                name: 'National Geographics',
                link: '#'
              },
              {
                name: 'Scientific American',
                link: '#'
              },
              {
                name: 'The Spectator',
                link: '#'
              },
              {
                name: 'Rambler',
                link: '#'
              },
              {
                name: 'Physics World',
                link: '#'
              },
              {
                name: 'The New Scientist',
                link: '#'
              }
            ]
          }
        ]
      },
      {
        name: 'Store',
        icon: 'fa fa-shopping-cart',
        link: '#',
        items: [
          {
            title: 'Store',
            icon: 'fa fa-shopping-cart',
            items: [
              {
                name: 'Clothes',
                icon: 'fa fa-tags',
                link: '#',
                items: [
                  {
                    title: 'Clothes',
                    icon: 'fa fa-tags',
                    items: [
                      {
                        name: 'Women\'s Clothing',
                        icon: 'fa fa-female',
                        link: '#',
                        items: [
                          {
                            title: 'Women\'s Clothing',
                            icon: 'fa fa-female',
                            items: [
                              {
                                name: 'Tops',
                                link: '#'
                              },
                              {
                                name: 'Dresses',
                                link: '#'
                              },
                              {
                                name: 'Trousers',
                                link: '#'
                              },
                              {
                                name: 'Shoes',
                                link: '#'
                              },
                              {
                                name: 'Sale',
                                link: '#'
                              }
                            ]
                          }
                        ]
                      },
                      {
                        name: 'Men\'s Clothing',
                        icon: 'fa fa-male',
                        link: '#',
                        items: [
                          {
                            title: 'Men\'s Clothing',
                            icon: 'fa fa-male',
                            items: [
                              {
                                name: 'Shirts',
                                link: '#'
                              },
                              {
                                name: 'Trousers',
                                link: '#'
                              },
                              {
                                name: 'Shoes',
                                link: '#'
                              },
                              {
                                name: 'Sale',
                                link: '#'
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  }
                ]
              },
              {
                name: 'Jewelry',
                link: '#'
              },
              {
                name: 'Music',
                link: '#'
              },
              {
                name: 'Grocery',
                link: '#'
              }
            ]
          }
        ]
      },
      {
        name: 'Collections',
        link: '#'
      },
      {
        name: 'Credits',
        link: '#'
      }
    ]
  }
];
</script>

初始化与HTML标记。

<script>
    $(document).ready(function(){
        $('#menu').multilevelpushmenu();
    });
</script>

用JS数组。

<script>
    $(document).ready(function(){
        $('#menu').multilevelpushmenu({
            menu: arrMenu
        });
    });
</script>


选项

下面提供的选项的完整列表。

container: $( '#menu' ),                                   // 容器。
containersToPush: [ $( '#content1' ), $( '#content2' ) ],  // Array of DOM elements to push/slide together with menu.
collapsed: false,                                          // Initialize menu in collapsed/expanded mode
menuID: "multilevelpushmenu",                              // ID of the <nav> element.
wrapperClass: 'multilevelpushmenu_wrapper',                // Wrapper CSS class.
menuInactiveClass: 'multilevelpushmenu_inactive',          // CSS class for inactive wrappers.
menu: arrMenu,                                             // JS array of menu items (if markup not provided).
menuWidth: 0,                                              // Wrapper width (integer, '%', 'px', 'em').
menuHeight: 0,                                             // Menu height (integer, '%', 'px', 'em').
backText: 'Back',                                          // Text for 'Back' menu item.
backItemClass: 'backItemClass',                 &nb                                      
                        
                    
相关插件-水平导航

二级菜单导航栏

简单的菜单栏
  水平导航
 61105  462

jQuery移动端左右滑动导航

jQuery手机触屏滑动导航,调整浏览器窗口大小查看效果
  水平导航
 79820  494

简易使用的导航栏

可用网站作为导航栏
  水平导航
 37996  424

水平导航条

可以上下切换的水平导航条
  水平导航
 44938  427

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

    demon3434 0
    2017/7/25 7:33:59

    我用js实现,界面出来了,但是菜单中的超链接,点了没反应,json数据中的link属性,貌似不起作用(我的json数据,link不是#),不知如何修改

        大牙?0
        2021/4/24 23:01:41
        我也是遇到这个问题。希望有大神可以看到
        https://github.com/adgsm/multi-level-push-menu
        这是源
        大牙?0
        2021/4/24 23:14:11
        找到问题了。。。默认情况下,项目点击是禁用的。。。。
    回复
    LS.getName 0
    2017/5/4 11:14:59

    支持动态加载吗?

    回复
    LS.getName 0
    2017/4/8 19:51:48
    用对象的方法好像加载不了 回复
    汉斯 0
    2016/3/7 14:03:10
    demo跟演示不一样,而且还加载一堆外站源。。。。卡的要死了! 回复
    灬沉默是金 0
    2015/12/22 15:12:19
    用js尝试,完全没效果啊 回复
    笔墨伺候-HXH 0
    2014/11/7 4:03:11
    @漫步云端 我们这能正常演示,估计是你浏览器问题
        汉斯0
        2016/3/7 14:03:59
        你下载的DEMO跟演示一样?你用的什么浏览器?我几个浏览器都试过了!都是不一样
    回复
    漫步云端 0
    2014/11/7 3:00:02
    DEMO中的例子不能实现演示的效果,不知道是不是我的浏览器的原因 回复
    时光小屋 0
    2014/3/25 20:52:00

    IE加载很慢,不过是我浏览器的原因很小,所以,优化下吧

    回复
    JQ剑圣 0
    2014/1/23 14:43:00

    此插件文章中以说明要ie8以上浏览器。这里在文章里加强下兼容注视!

    回复
    hacker 0
    2014/1/23 10:19:00

    IE兼容的很烂。。。

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复