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

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

使用方法

要使用该插件需要在页面中引入lazeemenu.css文件和jquery以及lazeemenu-jquery.js文件。

<link rel="stylesheet" type="text/css" href="css/lazeemenu.css">           
<script type="text/javascript" src="src/jquery.min.js"></script>
<script type="text/javascript" src="src/lazeemenu-jquery.js"></script>       
                

HTML结构

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

<ul id="menu-1">
    <li>
        <h3><span>Tennis</span></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><span>Ballet</span></h3>
        <ul>
            <li><a href="#">Dancers</a></li>
            <li><a href="#">Famous acts</a></li>
        </ul>
    </li>
</ul>
                

初始化插件

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

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

配置参数

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

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

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

公共方法

展开所有菜单项的方法：

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

折叠所有菜单项的方法：

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

LazeeMenu多级垂直菜单插件的github地址为：https://github.com/lazee/lazeemenu