简洁的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 | 同时只展开一个导航 |
简洁的jQuery cxMenu 手风琴导航的更多相关文章
- jquery多级手风琴插件–accordion.js
手风琴菜单一般用于下拉导航,由于外观非常简洁,使用起来跟手风琴一样可以拉伸和收缩而得名,项目中适当应用手风琴效果会给用户带来非常好的体验.本文借助jQuery插件轻松打造一个非常不错的手风琴效果的菜单 ...
- 我收集到的最好的jQuery和CSS3导航菜单
jQuery和CSS3导航菜单在网页设计和开发的重要组成部分之一.利用jQuery+CSS3实现可以做出拥有各种动画效果的漂亮菜单.在这里,我们收集了一些最好的jQuery+CSS3实现的导航菜单. ...
- jQuery之手风琴图片
<!DOCTYPE HTML> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- 20款jquery下拉导航菜单特效代码分享
20款jquery下拉导航菜单特效代码分享 jquery仿京东商城左侧分类导航下拉菜单代码 jQuery企业网站下拉导航菜单代码 jQuery css3黑色的多级导航菜单下拉列表代码 jquery响应 ...
- 简单jQuery 实现手风琴菜单
简单jQuery 实现手风琴菜单 css代码 如下: *{ margin: 0; padding: 0; } #accordion{ width: 500px; } #accordion>div ...
- 利用js和JQuery定义一个导航条菜单
利用js和JQuery定义一个导航条 效果: 一.html代码: <div class="Maintenance"> <div class="Title ...
- 基于jQuery垂直多级导航菜单代码
基于jQuery垂直多级导航菜单代码是一款黑色风格的jQuery竖直导航菜单特效下载.效果图如下: 在线预览 源码下载 实现的代码. html代码: <ul class="ce&q ...
- 基于jquery横向手风琴效果
基于jquery横向手风琴效果是一款基于jquery实现的左右滑动手风琴图片轮播切换特效.效果图如下: 在线预览 源码下载 效果图如下: <div class="flash&quo ...
- 一款基于jquery的手风琴显示详情
今天要各网友分享一款基于jquery的手风琴显示详情实例.当单击顶部箭头的时候,该项以手风琴的形式展示显示详情.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div al ...
随机推荐
- 一次SSIS Package的调试经历
SSIS Package的调试有时是一个非常艰难的过程,由于SSIS 编译器给出的错误信息,可能并不完善,需要程序员根据错误信息抽丝拨茧,寻找错误的根源,进而解决问题. 第一部分:SSIS提供的调试工 ...
- windows phone listbox的点击事件
前台 <ListBox x:Name="> <ListBox.ItemTemplate> <DataTemplate> <Grid Margin=& ...
- jQuery插件之ajaxFileUpload
原文:http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html ajaxFileUpload是一个异步上传文件的jQuery插件 ...
- JAVA实现Excel的读写--jxl
前段时间因为开发网站的需要,研究了一下java实现excel的读写,一般当我们做管理软件时,都需要打印报表,报表如何制作呢?相信一定难为过大家,本篇就为大家揭开它的神秘面纱,学习完半篇,你一定会对报表 ...
- C#薪水和前途
这1,2年有更新简历,一直在看市场行情,最近这么多年在聊C#的薪水,我也说说我看到的情况,只限上海: 仅供大家参考: 高端职位: 纯技术,不谈管理, 一般是架构师职位,偶尔可能需要带团队, 猎头有报了 ...
- nodejs图片转换字节保存
fs.readFile('上传图片路径', function(err, data) { if (err) { // 错误处理 return; } var base64str = new Buffer( ...
- Twitter Storm安装配置(Ubuntu系统)单机版
要使用storm首先要安装以下工具:JDK.Python.zookeeper.zeromq.jzmq.storm (注:各个模块都是独立的,如果安装失败或者卡顿可以单独百度某个模块的安装,都是可以的. ...
- 使用Ambari安装hadoop集群
最近需要做些spark的工作,所以弄了几台dell7500就这么准备开始搭建集群,之前用过几台更破的台式机搭建过一次,折腾了半个月之久,终于成功搭建,这次不想走老路,所以网上查了一下,发现一个神器AM ...
- Android悬浮窗口的实现
效果图:(悬浮框可拖动) 在项目开发中有一个需求:弹出悬浮窗后,响应悬浮窗的事件再弹出对话框,但是对话框怎么也不显示.也就是说在弹出悬浮框的同时,不能再弹出对话框,可能的原因: 1.悬浮框的焦点在最前 ...
- 使用php来访问操作sql server
使用php来访问操作sql server 在此分成三步走: 第一部:查看配置,下载文件 首先查看自己的php和sql server版本 Php文件输入echo PHP_VERSION 运行脚本就可以 ...