码迷,mamicode.com
首页 > Web开发 > 详细

简洁的jQuery cxMenu 手风琴导航

时间:2016-09-09 10:05:53      阅读:191      评论:0      收藏:0      [点我收藏+]

标签:

  • 版本:
  • 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 同时只展开一个导航

 

 

简洁的jQuery cxMenu 手风琴导航

标签:

原文地址:http://www.cnblogs.com/niuboren/p/5855334.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!