插件描述：多级推菜单是跨浏览器兼容的jQuery插件，允许导航元素无限的嵌套。 这个jQuery插件的灵感来自Codrops MultiLevelPushMenu但不像它没有的CSS 3D变换，因此在旧的浏览器（即IE 8）上可以正常使用.
多级推菜单是跨浏览器兼容的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”可以修改，以适应网站设计。
1 | <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.min.css"> |
字体我喜欢（使用任何其他你喜欢的）
1 | <link href='/+Sans+Condensed:300,300italic,700&subset=latin,cyrillic-ext,latin-ext,cyrillic' rel='stylesheet' type='text/css'> |
平推式菜单CSS
1 | <link rel="stylesheet" href="multilevelpushmenu.css" /> |
包括JS jQuery
1 | <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> |
Modernizr（需要IE8）
1 | <script src="//oss.maxcdn.com/libs/modernizr/2.6.2/modernizr.min.js"></script> |
推式菜单js
1 | <script src="jquery.multilevelpushmenu.min.js></script> |
HTML标记
复制下面的HTML标记来创建菜单，exacty相同的项目，如下所示。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 | <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>
|