Jquery多级菜单插件Slimmenu使用说明
现在扁平化设计逐渐的成为了趋势，不管是pc web，还是移动互联网的应用开发，都在研究和设计Flat ui,
这里有一篇文章说明扁平化的设计的一些想法：[jquery mobile扁平化设计样式--Jquery mobile Flat UI介绍]
今天分享几个Jquery的扁平化插件。首先是Jquery 扁平化菜单：SlimMenu。
无图无真像。先上图。样式我做了部分修改。
SlimMenu支持的功能有：
轻量级，css+js（压缩后），10k左右。
支持响应式设计。自适应屏幕
3. 支持多级菜单
预计为将来的功能开发中，会更好的支持mobile版本。
测试通过的浏览器有：
IE 9+
Latest Chrome
Latest Firefox
Latest Safari
Latest Opera
Android 2.2+
Mobile Safari
Demo 萌点这里：jquery 扁平化多级菜单
使用说明：
引入样式：
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="slimmenu.css">
第二个是菜单使用的样式。第一个是附属的一些样式，比如小箭头等。最好引用。
这里需要说明一下：
在html增加多多种设备的支持：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
引用JS：
<script src="jquery.slimmenu.js"></script>
<script src="jquery.easing.min.js"></script>
<script>
$('ul.slimmenu').slimmenu(
{
resizeWidth: '800',
collapserTitle: 'Main Menu',
easingEffect:'easeInOutQuint',
animSpeed:'medium',
indentChildren: true,
childrenIndenter: '»'
});
|
1
|
easing是滑动效果的js组件，可以去掉。去掉没有圆滑的过渡效果。 |
Html或者用Ajax生成这样的数据：
<ul class="slimmenu">
<li>
<a href="#">Slim Menu 1</a>
<ul>
<li>
<a href="#">Slim Menu 1.1</a>
<ul>
<li><a href="#">Slim Menu 1.1.1</a></li>
<li>
<a href="#">Slim Menu 1.1.2</a>
<ul>
<li><a href="#">Slim Menu 1.1.2.1</a></li>
<li><a href="#">Slim Menu 1.1.2.2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Slim Menu 1.2</a></li>
</ul>
</li>
<li><a href="#">Slim Menu 2</a></li>
<li>
<a href="#">Slim Menu 3</a>
<ul>
<li>
<a href="#">Slim Menu 3.1</a>
<ul>
<li><a href="#">Slim Menu 3.1.1</a></li>
<li><a href="#">Slim Menu 3.1.2</a></li>
</ul>
</li>
<li><a href="#">Slim Menu 3.2</a></li>
</ul>
</li>
<li><a href="#">Slim Menu 4</a></li>
</ul>
最后，调用Slimmenu的函数即可：
<script>
$('ul.slimmenu').slimmenu(
{
resizeWidth: '800',
collapserTitle: 'Main Menu',
easingEffect:'easeInOutQuint',
animSpeed:'medium',
indentChildren: true,
childrenIndenter: '»'
});
</script>
还有一些插件会慢慢和大家分享。希望大家高抬贵手，支持一下~~