首页 | 6093 | 1002 | 3356 | 添加收藏 上一个 下一个
多级菜单

多级推菜单是跨浏览器兼容的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                                     
                        <ul class="x-top" style="padding-left:0px">
                            <div class="fy f zhs"><span class="jg35">PREVIOUS:</span></div>
                            <div class="fy f txtRight zhs"><span class="jg352">NEXT:</span></div>
                            <div class="fy f"><a class="PREVIOUS" href="#"> nanoGALLERY图片预览插件 </a> </div>
                            <div class="fy f txtRight"><a class="NEXT" href="#"> 缩略图预览 </a> </div>
                            <div class="dr"></div>
                            <div class="df"></div>
                        </ul>