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 Date对象使用总结
May 14 Javascript
javascript引用类型之时间Date和数组Array
Aug 27 Javascript
一篇文章掌握RequireJS常用知识
Jan 26 Javascript
jQuery内容过滤选择器用法示例
Sep 09 Javascript
js html css实现复选框全选与反选
Oct 09 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
Dec 08 Javascript
Vue.js系列之vue-router(上)(3)
Jan 03 Javascript
jQuery表单设置值的方法
Jun 30 jQuery
vue watch自动检测数据变化实时渲染的方法
Jan 16 Javascript
小程序实现多选框功能
Oct 30 Javascript
使用koa2创建web项目的方法步骤
Mar 12 Javascript
JavaScript原型式继承实现方法
Nov 06 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转换文件夹下所有文件编码的实现代码
2013/06/06 PHP
php数组中包含中文的排序方法
2014/06/03 PHP
Ubuntu中搭建Nginx、PHP环境最简单的方法
2015/03/05 PHP
分享10段PHP常用代码
2015/11/11 PHP
PHP自定义多进制的方法
2016/11/03 PHP
Yii框架实现的验证码、登录及退出功能示例
2017/05/20 PHP
深入研究PHP中的preg_replace和代码执行
2018/08/15 PHP
Laravel框架路由管理简单示例
2019/05/07 PHP
解决Laravel 不能创建 migration 的问题
2019/10/09 PHP
提高代码性能技巧谈—以创建千行表格为例
2006/07/01 Javascript
javascript removeChild 使用注意事项
2009/04/11 Javascript
一个关于jqGrid使用的小例子(行按钮)
2011/11/04 Javascript
JQuery实现倒计时按钮的实现代码
2012/03/23 Javascript
使用Fullpage插件快速开发整屏翻页的页面
2017/09/13 Javascript
React router动态加载组件之适配器模式的应用详解
2018/09/12 Javascript
快速了解Node中的Stream流是什么
2019/02/13 Javascript
JS实现简单tab选项卡切换
2019/10/25 Javascript
javascript设计模式 ? 策略模式原理与用法实例分析
2020/04/21 Javascript
vue下拉刷新组件的开发及slot的使用详解
2020/12/23 Vue.js
[05:13]2018DOTA2亚洲邀请赛主赛事第二日战况回顾 LGD、VG双雄携手晋级
2018/04/05 DOTA
跟老齐学Python之从格式化表达式到方法
2014/09/28 Python
python中的__slots__使用示例
2015/02/26 Python
详解Python的Django框架中manage命令的使用与扩展
2016/04/11 Python
利用python开发app实战的方法
2019/07/09 Python
使用HTML5捕捉音频与视频信息概述及实例
2018/08/22 HTML / CSS
科尔士百货公司官网:Kohl’s
2016/07/11 全球购物
介绍一下linux文件系统分配策略
2013/02/25 面试题
行政助理岗位职责
2013/11/10 职场文书
计算机软件个人的自荐信范文
2013/12/01 职场文书
全陪导游欢迎词
2014/01/17 职场文书
团代会主持词
2014/04/02 职场文书
统计员岗位职责
2015/02/11 职场文书
2016党性教育学习心得体会
2016/01/21 职场文书
2016春季运动会开幕词
2016/03/04 职场文书
Java用自带的Image IO给图片添加水印
2021/06/15 Java/Android
Python实现Excel文件的合并(以新冠疫情数据为例)
2022/03/20 Python