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当一个变量为函数时 应该注意的一点细节小结
Dec 29 Javascript
javascript作用域问题实例分析
Jul 13 Javascript
浅析jQuery事件之on()方法绑定多个选择器,多个事件
Apr 27 Javascript
jquery实现左右无缝轮播图
Jul 31 Javascript
JavaScript事件用法浅析
Oct 31 Javascript
基于Vue2.X的路由和钩子函数详解
Feb 09 Javascript
jQuery实现图片简单轮播功能示例
Aug 13 jQuery
element-ui 上传图片后清空图片显示的实例
Sep 04 Javascript
vue.js自定义组件directives的实例代码
Nov 09 Javascript
Vue 权限控制的两种方法(路由验证)
Aug 16 Javascript
微信小程序上传图片并等比列压缩到指定大小的实例代码
Oct 24 Javascript
JS sort排序详细使用方法示例解析
Sep 27 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/10 PHP
浅析php中jsonp的跨域实例
2013/06/21 PHP
在WordPress中安装使用视频播放器插件Hana Flv Player
2016/01/04 PHP
页面版文本框智能提示JS代码
2009/11/20 Javascript
JS 加入收藏夹的代码(主流浏览器通用)
2013/05/13 Javascript
jquery异步跨域访问代码
2013/06/28 Javascript
js文件缓存之版本管理详解
2013/07/05 Javascript
jQuery制作可自定义大小的拼图游戏
2015/03/30 Javascript
javascript制作的简单注册模块表单验证
2015/04/13 Javascript
js使用cookie记录用户名的方法
2015/11/26 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
2016/12/09 Javascript
BootStrop前端框架入门教程详解
2016/12/25 Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
2017/01/12 Javascript
关于axios不能使用Vue.use()浅析
2018/01/12 Javascript
微信小程序 调用微信授权窗口相关问题解决
2019/07/25 Javascript
JS实现进度条动态加载特效
2020/03/25 Javascript
python实现socket端口重定向示例
2014/02/10 Python
python 获取页面表格数据存放到csv中的方法
2018/12/26 Python
numpy concatenate数组拼接方法示例介绍
2019/05/27 Python
Django对数据库进行添加与更新的例子
2019/07/12 Python
flask框架自定义url转换器操作详解
2020/01/25 Python
python实现人机猜拳小游戏
2020/02/03 Python
python如何求数组连续最大和的示例代码
2020/02/04 Python
python sorted函数原理解析及练习
2020/02/10 Python
python 检测nginx服务邮件报警的脚本
2020/12/31 Python
CSS3 二级导航菜单的制作的示例
2018/04/02 HTML / CSS
html5需遵循的6个设计原则
2016/04/27 HTML / CSS
售后服务科岗位职责范文
2013/11/13 职场文书
演讲稿怎么写才完美
2014/01/02 职场文书
小学生评语大全
2014/04/18 职场文书
上班迟到检讨书300字
2014/10/18 职场文书
奖学金申请个人主要事迹材料
2015/11/04 职场文书
数学复习课教学反思
2016/02/18 职场文书
2016年圣诞节义工活动总结
2016/04/01 职场文书
导游词之山东八仙过海景区
2019/11/11 职场文书
浅谈JS的原型和原型链
2021/06/04 Javascript