欢迎光临一流素材网,免积分免费素材下载!
AD
当前位置:首页 > JS代码 > 菜单导航

多层菜单

所属栏目:菜单导航更新时间:2016-06-28原作者:不详发布者:deepdfhy浏览:0
基本信息
  • 发布者:
  • 原作者:不详
  • 来源:不详
  • 版权声明

多层推菜单是跨浏览器兼容的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'>

包括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                     
                        <div class="row text-center">
                           <script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                            <!-- mxk -->
                            <ins class="adsbygoogle" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2935286260943234" data-ad-slot="1196706306" data-adsbygoogle-status="done"><ins id="aswift0_expand" style="display:inline-table;border:none;height:90px;margin:0;padding:0;position:relative;visibility:visible;width:728px;background-color:transparent"><ins id="aswift0_anchor" style="display:block;border:none;height:90px;margin:0;padding:0;position:relative;visibility:visible;width:728px;background-color:transparent"><iframe width="728" height="90" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&&s.handlers,h=H&&H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&&d&&(!d.body||!d.body.firstChild)){if(h.call){setTimeout(h,0)}else if(h.match){try{h=s.upd(h,i)}catch(e){}w.location.replace(h)}}" id="aswift0" name="aswift0" style="left:0;position:absolute;top:0;">ns>
                            <script>
                            (adsbygoogle = window.adsbygoogle || []).push({});                            </script>
                        </div>

                        <ul class="x-top" style="padding-left:0px">
                            <div class="fy f zhs"><span class="jg35">PREVIOUS:div>
                            <div class="fy f txtRight zhs"><span class="jg352">NEXT:div>
                            <div class="fy f"><a class="PREVIOUS" href="http://www.jq22.com/jquery-info207"> nanoGALLERY图片预览插件 </a> </div>
                            <div class="fy f txtRight"><a class="NEXT" href="http://www.jq22.com/jquery-info205"> 缩略图预览 </a> </div>
                            <div class="dr"></div>
                            <div class="df"></div>
                        </ul>


具体效果请看演示,一流资源网推荐下载。

标签:
代码下载
本站下载
收藏 0 有帮助 0 没帮助 0
请站长喝杯咖啡?

站长一直坚持白天工作、晚上熬夜更新素材,付出了巨大的精力和时间,其中的辛酸难以言述。

如果本站素材对你有用,不妨考虑请站长喝杯咖啡鼓励一下!

立即打赏 0
给个评价吧
最受欢迎的

1jQuery仿微信公众号底部导航菜单自定义菜单代码

2JSON无限折叠树形菜单特效代码

3原生js树形下拉菜单插件/可定义伸缩菜单列表/支持写入cookie

4仿京东手机版左右风格TAB滑动商品分类代码

5jQuery导航滚动到一定高底后吸顶,锚点定位自动跟随

6纯HTML5二级折叠菜单代码

7jQuery垂直多级下拉树形菜单代码

8纯CSS下拉菜单导航代码JQ升级版(兼容IE6)

9纯CSS分类菜单弹出式三级菜单代码

10jquery多级/无限级树形菜单代码

最新更新的

1jQuery仿手机微信公众号底部菜单代码

2Layui多级垂直导航菜单代码

3移动端侧栏侧滑菜单JS代码

4 js移动端右侧多级导航菜单代码

5JS移动端折叠展示式导航菜单代码

6Layui响应式导航菜单

7纯CSS下拉菜单导航代码JQ升级版(兼容IE6)

8jQuery垂直多级下拉树形菜单代码

9tab导航缓慢弹出下拉效果

10纯css3制作3D旋转导航