Jquery垂直多级⼿风琴菜单附源码下载
⾸先给⼤家展⽰下效果图，喜欢的朋友继续往下看哦。
这是⼀款简单但实⽤的多级垂直⼿风琴下拉列表菜单。该多级⼿风琴菜单完全使⽤CSS来制作，它通过将不同的⼦菜单进⾏分组，制作出多级菜单的效果。
该多级⼿风琴菜单通过在checkbox元素上使⽤:checked伪元素来制作。如果需要⼀些好看的动画效果，可以实⽤插件中提供的main.js⽂件，它可以提供菜单打开和收缩时左侧⼩箭头的动画效果。
使⽤⽅法
HTML结构
该多级⼿风琴菜单的HTML结构⾮常简单：整个⼿风琴是⼀个⽆序列表。如果某个列表项中包含有⼦菜单，则添加⼀个input[type=checkbox]和⼀个label标签，同时为该列表项添加⼀个.has-children的class类。所有其它标准的列表项都包含在⼀个a标签中。
jquery下载文件插件
<ul class="cd-accordion-menu">
<li class="has-children">
<input type="checkbox" name ="group-1" id="group-1" checked>
c语言表白代码大全可复制
<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>
m语言
<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 {transition delay
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 垂直多级⼿风琴菜单附源码下载的全部叙述，希望⼤家喜欢。喜欢的朋友可以直接点击下载源码哦。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。