jQuery cxMenu 手风琴导航

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