你的位置:首页 > Java教程

[Java教程]简洁的jQuery cxMenu 手风琴导航


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

实例预览

使用方法

载入 JavaScript 文件

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

  

CSS 样式结构

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

/* 滑动导航 */ .menu{} .menu > li{} .menu > li.selected{} /* 一级导航选中时的样式 */  .menu ul{display:none;} /* 子导航隐藏 */ .menu ul > li{} .menu ul > li.selected{} /* 子级导航选中时的样式 */ 

  

DOM 结构

<ul id="element_id">   <li>一级标题     <ul>       <li>二级标题         <ul>           <li>...             <ul>               <li>N级标题</li> 

  

调用 cxMenu

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

  


参数说明

名称默认值说明
events'click'触发按钮事件的方式
selectedClass'selected'展开时增加的 Class
speed600切换速度 (ms)
onlytrue同时只展开一个导航

 


下载