Jquery多级菜单插件Slimmenu使用说明

Jquery多级菜单插件Slimmenu使用说明

现在扁平化设计逐渐的成为了趋势，不管是pc web，还是移动互联网的应用开发，都在研究和设计Flat ui,

这里有一篇文章说明扁平化的设计的一些想法：[jquery mobile扁平化设计样式--Jquery mobile Flat UI介绍]

今天分享几个Jquery的扁平化插件。首先是Jquery 扁平化菜单：SlimMenu。

无图无真像。先上图。样式我做了部分修改。

View Code
<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>

还有一些插件会慢慢和大家分享。希望大家高抬贵手，支持一下~~