简洁实用jQuery cxMenu 手风琴导航

载入 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();