Css3垂直手风琴下拉列表菜单

这是一款简单但实用的多级垂直手风琴下拉列表菜单。该多级手风琴菜单完全使用CSS来制作，它通过将不同的子菜单进行分组，制作出多级菜单的效果。该多级手风琴菜单通过在checkbox元素上使用:checked伪元素来制作。如果需要一些好看的动画效果，可以实用插件中提供的main.js文件，它可以提供菜单打开和收缩时左侧小箭头的动画效果。该多级手风琴菜单的HTML结构非常简单：整个手风琴是一个无序列表。如果某个列表项中包含有子菜单，则添加一个input[type=checkbox]和一个label标签，同时为该列表项添加一个.has-children的class类。所有其它标准的列表项都包含在一个a标签中。

• Group 1
  • Sub Group 1
    • Image
    • Image
    • Image
  • Image
  • Image
• Image
• Image

元素的显示模式，从“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;} 通过HTML结构可以看出，checkbox元素和label元素以及子菜单无序列表是兄弟节点的关系。通过使用:checked伪类，我们可以做如下的设置：当checkbox被选中的时候（label被点击），可以获取它的兄弟节点
元素，并设置它的可见性，从“none”修改为“block”。.cd-accordion-menu ul { /* by default hide all sub menus */ display: none;} .cd-accordion-menu input[type=checkbox]:checked + label + ul,.cd-accordion-menu input[type=checkbox]:checked + label:nth-of-type(n) + ul { /* use label:nth-of-type(n) to fix a bug on safari (<= 8.0.8) with multiple adjacent-sibling selectors*/ /* show children when item is checked */ display: block;}如果你需要为这个手风琴菜单添加一些好看的动画效果，可以使用jQuery和插件中提供的main.js文件。同时需要在ul.cd-accordion-menu元素上添加.animate class类，它会使小箭头的方向在打开和关闭子菜单时产生动画效果。

在线演示        积分下载        6毛下载        砍两刀下载       

文件目录······
暂无数据

未经允许不得转载： ICode联盟 » 插件特效 » Css3垂直手风琴下拉列表菜单

 猜你喜欢 更多»
 项目推荐 更多»
[开源]基于 Vue、Datav、Echart 框架的数据大屏项目，可自由替换  (1)
[开源]一套企业级微服务框架、微服务能力开放平台，功能强大  (0)
[开源]免费开源的流程设计器，开箱即用，助力流程开发使用更简单  (0)
[开源]MIT开源协议，前后端分离、美观大方后台通配权限管理系统  (1)
[开源]一款终端仿真软件，支持多种后端协议，无依赖跨平台使用  (0)
[开源]轻便好用的 Kafka、Zookeeper 、Redis 可视化图形界面工具  (0)
[开源]企业级设计体系，基于Vue的桌面端基础组件库，提升效率  (0)
 PDF电子书 更多»
Java多线程编程核心技术  (2)
C Primer Plus(第五版)中文版.pdf  (1)
Linux命令详解词典.pdf  (5)
深入Python3中文版  (0)
百度SEO一本通.pdf  (0)
MyBatis从入门到精通.pdf  (4)
mysql必知必会.pdf  (2)
从Paxos到Zookeeper 分布式一致性原理与实践.pdf  (3)
Java Web整合开发王者归来 pdf电子书  (5)
SPRING 实战（第3版）pdf电子书  (3)
疯狂JAVA讲义 pdf电子书  (3)
Java开发实战经典(名师讲坛) pdf电子书  (1)
ASP.NET MVC4 Web编程 pdf电子书  (2)
ASP.NET MVC4框架揭秘 pdf电子书  (1)
深入理解C#（第2版）pdf电子书  (1)
C# 图解教程pdf电子书  (3)
锋利的jquery 第二版 pdf电子书  (4)
研磨设计模式 pdf电子书  (0)