多级推菜单是跨浏览器兼容的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
我用js实现,界面出来了,但是菜单中的超链接,点了没反应,json数据中的link属性,貌似不起作用(我的json数据,link不是#),不知如何修改