Jquery 垂直多级手风琴菜单附源码下载


Posted in Javascript onNovember 17, 2015

首先给大家展示下效果图,喜欢的朋友继续往下看哦。

Jquery 垂直多级手风琴菜单附源码下载

这是一款简单但实用的多级垂直手风琴下拉列表菜单。该多级手风琴菜单完全使用CSS来制作,它通过将不同的子菜单进行分组,制作出多级菜单的效果。

该多级手风琴菜单通过在checkbox元素上使用:checked伪元素来制作。如果需要一些好看的动画效果,可以实用插件中提供的main.js文件,它可以提供菜单打开和收缩时左侧小箭头的动画效果。

 效果演示       源码下载

使用方法

HTML结构

该多级手风琴菜单的HTML结构非常简单:整个手风琴是一个无序列表。如果某个列表项中包含有子菜单,则添加一个input[type=checkbox]和一个label标签,同时为该列表项添加一个.has-children的class类。所有其它标准的列表项都包含在一个a标签中。

<ul class="cd-accordion-menu">
 <li class="has-children">
 <input type="checkbox" name ="group-1" id="group-1" checked>
 <label for="group-1">Group 1</label>
 <ul>
 <li class="has-children">
  <input type="checkbox" name ="sub-group-1" id="sub-group-1">
 <label for="sub-group-1">Sub Group 1</label>
 <ul>
  <li><a href="#0">Image</a></li>
  <li><a href="#0">Image</a></li>
  <li><a href="#0">Image</a></li>
 </ul>
 </li>
 <li><a href="#0">Image</a></li>
 <li><a href="#0">Image</a></li>
 </ul>
 </li>
 <li><a href="#0">Image</a></li>
 <li><a href="#0">Image</a></li>
</ul> <!-- cd-accordion-menu -->

 CSS样式

该多级手风琴菜单仅使用CSS来检测点击和展开子菜单。它使用的方法是通过checkbox元素,然后通过:checked伪类和相邻的兄弟选择器来改变<ul>元素的显示模式,从“none”改变为“block”。

首先需要确保所有有子菜单的列表项都带有checkbox元素。当你点击在一个label元素上的时候,实际是点击了相应的checkbox元素:这通过设置label元素的for属性来实现。接着就可以简单的隐藏checkbox元素,通过label元素来取代它。

.cd-accordion-menu input[type=checkbox] {
 /* hide native checkbox */
 position: absolute;
 opacity: 0;
}
.cd-accordion-menu label, .cd-accordion-menu a {
 position: relative;
 display: block;
 padding: 18px 18px 18px 64px;
 background: #4d5158;
 box-shadow: inset 0 -1px #555960;
 color: #ffffff;
 font-size: 1.6rem;
}

 JavaScript

如果你需要为这个手风琴菜单添加一些好看的动画效果,可以使用jQuery和插件中提供的main.js文件。同时需要在ul.cd-accordion-menu元素上添加.animate class类,它会使小箭头的方向在打开和关闭子菜单时产生动画效果。

以上内容就是本文给大家介绍的Jquery 垂直多级手风琴菜单附源码下载的全部叙述,希望大家喜欢。喜欢的朋友可以直接点击下载源码哦。

Javascript 相关文章推荐
javascript cookie操作类的实现代码小结附使用方法
Jun 02 Javascript
JS实现将人民币金额转换为大写的示例代码
Feb 13 Javascript
javascript 数组的定义和数组的长度
Jun 07 Javascript
jQuery解决$符号命名冲突
Jun 18 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
May 30 Javascript
js点击时关闭该范围下拉菜单之外的菜单方法
Jan 11 Javascript
AngularJS中ng-options实现下拉列表的数据绑定方法
Aug 13 Javascript
教你如何用Node实现API的转发(某音乐)
Sep 20 Javascript
WEEX环境搭建与入门详解
Oct 16 Javascript
vue页面切换项目实现转场动画的方法
Nov 12 Javascript
微信小程序多列表渲染数据开关互不影响的实现
Jun 05 Javascript
Antd下拉选择,自动匹配功能的实现
Oct 24 Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
Nov 17 #Javascript
跟我学习javascript的undefined与null
Nov 17 #Javascript
跟我学习javascript的arguments对象
Nov 16 #Javascript
JavaScript函数学习总结以及相关的编程习惯指南
Nov 16 #Javascript
js实现获取div坐标的方法
Nov 16 #Javascript
跟我学习javascript的闭包
Nov 16 #Javascript
jQuery链式操作实例分析
Nov 16 #Javascript
You might like
PHP中的CMS的涵义
2007/03/11 PHP
PHP中Date获取时间不正确怎么办
2008/06/05 PHP
PHP COOKIE设置为浏览器进程
2009/06/21 PHP
解析在zend Farmework下如何创立一个FORM表单
2013/06/28 PHP
php截取指定2个字符之间字符串的方法
2015/04/15 PHP
使用php完成常见的文件上传功能(推荐)
2017/01/13 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
Jquery 最近浏览过的商品的功能实现代码
2010/05/14 Javascript
js禁止页面使用右键(简单示例代码)
2013/11/13 Javascript
jQuery实现监控页面所有ajax请求的方法
2015/12/10 Javascript
浅析JavaScript声明变量
2015/12/21 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
2016/06/23 Javascript
浅谈JavaScript中变量和函数声明的提升
2016/08/09 Javascript
JS之相等操作符详解
2016/09/13 Javascript
vue input 输入校验字母数字组合且长度小于30的实现代码
2018/05/16 Javascript
从零开始搭建webpack+react开发环境的详细步骤
2018/05/18 Javascript
AngularJS实现与后台服务器进行交互的示例讲解
2018/08/13 Javascript
Vue2.0 实现页面缓存和不缓存的方式
2019/11/12 Javascript
element-ui中dialog弹窗关闭按钮失效的解决
2020/09/22 Javascript
[04:27]2014DOTA2国际邀请赛 NAVI战队官方纪录片
2014/07/21 DOTA
[01:32]dota2拉比克至宝(222)
2018/12/20 DOTA
pycharm 使用心得(八)如何调用另一文件中的函数
2014/06/06 Python
python实现html转ubb代码(html2ubb)
2014/07/03 Python
Python通过解析网页实现看报程序的方法
2014/08/04 Python
零基础写python爬虫之HTTP异常处理
2014/11/05 Python
从局部变量和全局变量开始全面解析Python中变量的作用域
2016/06/16 Python
Python解惑之整数比较详解
2017/04/24 Python
Python并发编程协程(Coroutine)之Gevent详解
2017/12/27 Python
Python enumerate索引迭代代码解析
2018/01/19 Python
解决Pycharm出现的部分快捷键无效问题
2018/10/22 Python
关于tf.nn.dynamic_rnn返回值详解
2020/01/20 Python
python matplotlib库的基本使用
2020/09/23 Python
htmlentities() 和 htmlspecialchars()有什么区别
2015/07/01 面试题
WebSphere面试题:在WebSphere里面如何部署一个应用
2015/08/02 面试题
信号量和自旋锁的区别?如何选择使用?
2015/09/08 面试题
2015个人年度工作总结范文
2015/05/28 职场文书