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
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!