jQuery cxMenu 手风琴导航

• 一级标题
  • 二级标题
    • 三级标题
      • ...
        • N级标题
• HTML 教程
  • HTML 基础教程
    • HTML 教程
    • HTML 简介
    • HTML 入门
    • HTML 标签
    • HTML 元素
    • HTML 属性
  • HTML 高级教程
    • HTML 布局
    • HTML 框架
    • HTML 字体
  • 实例/测验
    • HTML 实例
    • HTML 测验
  • 参考手册
    • HTML 标签列表
    • HTML 属性
    • HTML 事件
• CSS 教程
  • CSS 基础
  • CSS 样式
  • CSS 框模型
  • CSS 定位
  • CSS 选择器
  • CSS 高级
  • CSS 实例
  • 参考手册
  • CSS 测验
• JavaScript 教程
  • JavaScript 基础
  • JavaScript 对象
  • JavaScript 高级
  • 实例/测验
  • JS 参考手册

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