当前位置: 首页 > 编程笔记 >

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

辛才俊
2023-03-14
本文向大家介绍Jquery 垂直多级手风琴菜单附源码下载,包括了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 垂直多级手风琴菜单附源码下载的全部叙述,希望大家喜欢。喜欢的朋友可以直接点击下载源码哦。

 类似资料:
  • 本文向大家介绍jquery实现垂直手风琴导航栏,包括了jquery实现垂直手风琴导航栏的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了jquery实现垂直手风琴导航栏的具体代码,供大家参考,具体内容如下 做项目时第一次做垂直手风琴导航栏便记录下来 使用jQuery更简单 扩展浏览器支持本例采用jQuery1.12.4版 前端HTML: CSS样式: 引入jQuery: 以上就是本文的

  • 本文向大家介绍Bootstrap 手风琴菜单的实现代码,包括了Bootstrap 手风琴菜单的实现代码的使用技巧和注意事项,需要的朋友参考一下 好了,废话不多说了,直接给大家贴代码了,具体代码如下所示: 以上所述是小编给大家介绍的Bootstrap 手风琴菜单的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对呐喊教程网站的支持!

  • 我正在使用jQuery手风琴来隐藏一些数据。 accordion标题是一个带有一些标题的表格。有一个标题,我不希望你点击它,因为手风琴事件会触发。 所以 手风琴是可折叠的,如果您单击Test2(类nofunction),手风琴事件不应触发。但是如果您单击Test或其他表头,手风琴应该会触发事件。 我可以添加这个功能吗? 更新测试http://jsfiddle.net/e3Q8d/,包括jQuery

  • 我在stackoverflow的帮助下设法拼凑了以下jQuery: 上面的脚本为我在Wordpress中的每个父类别添加了各种属性(第一个li与te类'cat-在父类别中'),并将href的ID添加到子类别(嵌套的ul与类'孩子')。这是为了创建一个引导手风琴风格的导航下拉框。请参阅下面输出的html: 问题是当我在Wordpress中创建新的父菜单项时,我必须编辑我的jquery脚本来添加新的c

  • 本文向大家介绍原生JS实现垂直手风琴效果,包括了原生JS实现垂直手风琴效果的使用技巧和注意事项,需要的朋友参考一下 效果如下: 图 (1) 展开前 图 (2) 展开后 代码如下: 以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持呐喊教程!

  • 本文向大家介绍jQuery制作效果超棒的手风琴折叠菜单,包括了jQuery制作效果超棒的手风琴折叠菜单的使用技巧和注意事项,需要的朋友参考一下 拉风的jQuery制作的手风琴折叠菜单,效果非常不错!这里是之前版本的改进版,主要是jquery代码改进 演示图: main.js index.html style.css 以上所述就是本文给大家分享的全部内容了,希望能够对大家学习jQuery有所帮助。