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

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

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

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

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

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

SlimMenu支持的功能有：

1. 轻量级，css+js（压缩后），10k左右。

2. 支持响应式设计。自适应屏幕

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: '&raquo;'
});

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: '&raquo;'
});
</script>

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

 

 

 

标签: 扁平化样式, Jquery扁平化菜单, jquery flat ui menu