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垂直手风琴下拉列表菜单

 猜你喜欢 更多»
 项目推荐 更多»
[开源]开源免费的多协议物联网智能网关系统，让物联网实施更简单  (2)
[开源]高性能、安全、功能强大的开源物联网调试和管理解决方案  (0)
[开源]一个开源的物联网基础开发平台，支持设备快速接入、高并发  (0)
[开源]含鸿蒙APP、微信小程序、云平台和后台的充电设备管理系统  (0)
[开源]一站式物联网开发基础平台，助企业快速实现精细化数据管理  (0)
[开源]一款号卡分销管理系统，物联网卡系统，SaaS云端智能架构  (0)
[开源]致力于物联网时代通用业务能力的后台管理系统，免费可商用  (0)
 PDF电子书 更多»
Java多线程编程核心技术  (2)
C Primer Plus(第五版)中文版.pdf  (2)
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)