简洁实用jQuery cxMenu 手风琴导航

• 版本：
• jQuery v1.7+
• jQuery cxMenu v1.2
• 注意事项：
• 自动判断是否有子导航，有则显示并不触发链接，无则触发链接。

实例预览

使用方法

载入 JavaScript 文件

1. <script src="jquery.js"></script> 
2. <script src="jquery.cxmenu.js"></script> 

复制

CSS 样式结构

除必要属性设置外，其他样式均可自行设置。

1. /* 滑动导航 */ 
2. .menu{} 
3. .menu > li{} 
4. .menu > li.selected{} /* 一级导航选中时的样式 */ 
5.  
6. .menu ul{display:none;} /* 子导航隐藏 */ 
7. .menu ul > li{} 
8. .menu ul > li.selected{} /* 子级导航选中时的样式 */ 

复制

DOM 结构

1. <ul id="element_id"> 
2.   <li>一级标题 
3.     <ul> 
4.       <li>二级标题 
5.         <ul> 
6.           <li>... 
7.             <ul> 
8.               <li>N级标题</li>

复制

调用 cxMenu

1. $('#element_id').cxMenu();

复制

参数说明

名称 默认值 说明

events	'click'	触发按钮事件的方式
selectedClass	'selected'	展开时增加的 Class
speed	600	切换速度 (ms)
only	true	同时只展开一个导航

 

---

下载