可将无序列表转换为github样式垂直多级导航菜单

可将无序列表转换为github样式垂直多级导航菜单

lazeemenu是一款可以将任何嵌套的无序列表转换为垂直多级列表菜单的jQuery插件。该垂直菜单采用github的手风琴菜单样式,它的展开节点支持普通文本和超链接两种模式。

HTML结构
可以使用任何标准的无序列表结构来生成垂直列表菜单。但是该垂直列表菜单只支持一级菜单:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<ul id="menu-1">
    <li>
<h3>Tennis</h3>
<ul>
    <li><a href="#">Serves</a></li>
    <li class="active"><a href="#">Player results</a></li>
    <li><a href="#">Leagues</a></li>
    <li><a href="#">Tournaments</a></li>
</ul>
</li>
    <li>
<h3>Ballet</h3>
<ul>
    <li><a href="#">Dancers</a></li>
    <li><a href="#">Famous acts</a></li>
</ul>
</li>
</ul>

初始化插件
在页面DOM元素加载完毕之后,可以通过lazeemenu()方法来初始化该插件。

1
2
3
$(document).ready(function() {
$('#menu-1').lazeemenu();
});

配置参数
该垂直列表菜单插件有2个配置参数:

1
2
3
4
5
6
$(document).ready(function() {
$('.menu-1').lazeemenu({
activeClass: 'active',
initialState: 'default'
});
});

activeClass:类型:string,默认值:active。标识当前激活的li元素的class名称。
initialState:类型:string,默认值:default。如果你希望初始化时整个菜单都是展开的,设置该参数为expanded,设置为collapsed所有菜单都是折叠的。default表示只有当前激活的菜单是展开的,其它的全部折叠。

公共方法
展开所有菜单项的方法:

1
$(selector).lazeemenu('expandAll');

折叠所有菜单项的方法:

1
$(selector).lazeemenu('collapseAll');

文件信息:

    1

    发表评论