主页 / 网络编程 /

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

网络编程 2021-07-04 21:03www.168986.cn编程入门
本文给大家分享一款简单但实用的多级垂直手风琴下拉菜单列表，完全使用css来制作多级手风琴菜单，通过该代码将不同的子菜单进行分组制作出多级菜单的效果，本文附效果演示和源码下载感兴趣的朋友一起学习吧

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

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

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

       

使用方法

HTML结构

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

<ul class="cd-aordion-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-aordion-menu -->

 CSS样式

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

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

.cd-aordion-menu input[type=checkbox] {
 / hide native checkbox /
 position: absolute;
 opacity: 0;
}
.cd-aordion-menu label, .cd-aordion-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-aordion-menu元素上添加.animate class类，它会使小箭头的方向在打开和关闭子菜单时产生动画效果。

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

上一篇：跟我学习javascript的prototype,getPrototypeOf和__proto__ 下一篇：JavaScript代码实现禁止右键、禁选择、禁粘贴、禁

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by