简洁的jQuery cxMenu 手风琴导航

Posted 2020-08-08

• 版本：
• 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
speed	600	切换速度 (ms)
only	true	同时只展开一个导航

 

---

下载