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

相关信息

作者网站:
http://ciaoca.com
相关文档:
中文文档
授权协议:
MIT