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

首页 > 网络编程 > JavaScript > javascript类库 > jquery 更新日期: 2016-01-25
本文给大家分享一款简单但实用的多级垂直手风琴下拉菜单列表,完全使用css来制作多级手风琴菜单,通过该代码将不同的子菜单进行分组制作出多级菜单的效果,本文附效果演示和源码下载感兴趣的朋友一起学习吧

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

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"  checked>
 <label for="group-1">Group 1</label>
 <ul>
 <li class="has-children">
  <input type="checkbox" name ="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 垂直多级手风琴菜单附源码下载的全部叙述,希望大家喜欢。喜欢的朋友可以直接点击下载源码哦。


> 本站内容系网友提交或本网编辑转载,其目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请及时与本网联系,我们将在第一时间删除内容!

相关文章
  • jquery+css实现绚丽的横向二级下拉菜单-附源码下载
    jquery+css实现绚丽的横向二级下拉菜单-附源码下载
    这篇文章主要介绍了jquery+css实现绚丽的横向二级下拉菜单-附源码下载,需要的朋友可以参考下首先给大家展示下效果图: 查看效果 源码下载 html代码部分: 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
  • 基于jQuery实现的扇形定时器附源码下载
    基于jQuery实现的扇形定时器附源码下载
    这篇文章给大家介绍基于jquery实现的扇形定时器,涉及到pietimer知识点的学习,对jquery定时器感兴趣的朋友一起了解了解吧效果图如下所示: 效果演示  源码下载 Pietimer是一个可以在页面上生成一个扇形变化的定时器,它基于jQuery,可以自定义定时时间秒数,自定义扇形的颜色.宽度和高度等,并且支持定时结束时回调函数,可以控制开始和暂停,适 ...
  • jQuery垂直多级导航菜单代码分享
    jQuery垂直多级导航菜单代码分享
    这篇文章介绍了基于jQuery实现的一个简单大方的垂直导航菜单,过度平滑,需要的朋友可以参考下这是一款基于jquery实现的垂直导航菜单特效代码,总共有三级,实现效果简单大方,最后一级还可以进行图片展示说明,是一款非常实用的导航菜单特效源码. 效果演示 源码下载 为大家分享的jQuery垂直多级导航菜单代码如下 <head> <title& ...
  • jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
    jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
    使用jquery拖拽排序插件制作拖拽排序效果是一款非常实用的鼠标拖拽布局插件,在网站上有时也会用的到,今天小编给大家分享jQuery拖拽排序插件制作拖拽排序效果,需要的朋友参考下吧使用jquery拖拽排序插件制作拖拽排序效果是一款非常实用的鼠标拖拽布局插件.效果图如下: 效果演示         源码下载 html代码: <h1>水平拖拽< ...
  • jQuery+Ajax+PHP实现喜欢评级功能附源码下载
    jQuery+Ajax+PHP实现喜欢评级功能附源码下载
    有同学问我如何实现一个像美丽说那样的"我喜欢"评级功能,当用户看到自己喜欢的图片或文章时,点击"红心"按钮,系统会自动记录用户的点击,并将总数加1.这样再结合不同的系统,可以将此功能应用到投票或收藏商品中去如淘宝的收藏商品.本文章来给大家介绍一个jQuery+Ajax+PHP实现"喜欢"评级功能代码 ...
猜你喜欢