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 相关文章推荐
[转]JS宝典学习笔记
Feb 07 Javascript
动态创建的表格单元格中的事件实现代码
Dec 30 Javascript
Raphael一个用于在网页中绘制矢量图形的Javascript库
Jan 08 Javascript
js对文章内容进行分页示例代码
Mar 05 Javascript
JS获得图片alt信息的方法
Apr 01 Javascript
AngularJS  $modal弹出框实例代码
Aug 24 Javascript
js仿拉勾网首页穿墙广告效果
Mar 08 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
Jan 09 Javascript
Babel 入门教程学习笔记
Jun 13 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
Sep 20 Javascript
微信小程序获取公众号文章列表及显示文章的示例代码
Mar 10 Javascript
Axios取消重复请求的方法实例详解
Jun 15 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中配置IIS7实现基本身份验证的方法
2015/09/24 PHP
php while循环控制的简单实例
2016/05/30 PHP
同一个表单 根据要求递交到不同页面的实现方法小结
2009/08/05 Javascript
jQuery读取和设定KindEditor值的方法
2013/11/22 Javascript
JavaScript中的函数重载深入理解
2014/08/04 Javascript
jQuery+css实现百度百科的页面导航效果
2014/12/16 Javascript
js的flv视频播放器插件使用方法
2015/06/23 Javascript
js实现精确到秒的日期选择器完整实例
2016/04/30 Javascript
如何用input标签和jquery实现多图片的上传和回显功能
2018/05/16 jQuery
使用vue-infinite-scroll实现无限滚动效果
2018/06/22 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
2018/07/12 Javascript
浅谈JavaScript面向对象--继承
2019/03/20 Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
2019/09/06 Javascript
关于Vue中axios的封装实例详解
2019/10/20 Javascript
js实现鼠标拖拽div左右滑动
2020/01/15 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
2020/12/07 Javascript
python批量提交沙箱问题实例
2014/10/08 Python
Django查找网站项目根目录和对正则表达式的支持
2015/07/15 Python
Python使用sorted排序的方法小结
2017/07/28 Python
Python登录并获取CSDN博客所有文章列表代码实例
2017/12/28 Python
python for循环输入一个矩阵的实例
2018/11/14 Python
解决Python下imread,imwrite不支持中文的问题
2018/12/05 Python
python+openCV调用摄像头拍摄和处理图片的实现
2019/08/06 Python
将自己的数据集制作成TFRecord格式教程
2020/02/17 Python
Django DRF APIView源码运行流程详解
2020/08/17 Python
分享一枚pycharm激活码适用所有pycharm版本我的pycharm2020.2.3激活成功
2020/11/20 Python
CSS3中的元素过渡属性transition示例详解
2016/11/30 HTML / CSS
css3遮罩层镂空效果的多种实现方法
2020/05/11 HTML / CSS
机械工程学院大学生求职信
2014/05/25 职场文书
八一建军节演讲稿
2014/09/10 职场文书
机关干部四风问题自查报告及整改措施
2014/10/26 职场文书
教师法制教育培训学习心得体会
2016/01/14 职场文书
教你解决往mysql数据库中存入汉字报错的方法
2021/05/06 MySQL
详解Java分布式事务的 6 种解决方案
2021/06/26 Java/Android
阿里云ECS云服务器快照的概念以及如何使用
2022/04/21 Servers
Python 读取千万级数据自动写入 MySQL 数据库
2022/06/28 Python