CSS3实现可关闭的下拉手风琴菜单效果


Posted in HTML / CSS onAugust 31, 2015

本文实例讲述了CSS3实现可关闭的下拉手风琴菜单效果。分享给大家供大家参考。具体如下:

CSS3菜单实例,运用纯CSS3技术实现一款下拉手风琴菜单功能,其实不能说是关闭,应该来说是折叠或收缩了,点击菜单面板右上角的小三角,本级菜单的子菜单项就会折叠收起来,貌似关闭了一样,这种菜单也叫手风琴菜单,有很多这样的菜单是使用jQuery插件来实现的,本款只使用了CSS3技术,还是比较有参考价值的。

运行效果截图如下:

CSS3实现可关闭的下拉手风琴菜单效果

在线演示地址如下:

具体代码如下:

复制代码
代码如下:
<!DOCTYPE HTML>
<html lang=zh-cn>
<head>
<meta charset=utf-8>
<title>css3可关闭的菜单导航</title>
<style>
*{margin:0px;padding:0px;}
body{background:#b1b1b1;margin:0px;padding:0px;font-size:14px;color:#000;}
ul.menu,
ul.menu ul {padding:0;margin:0;list-style:none;position:relative;width:200px;background:#ddd;font-family:arial, sans-serif;}
ul.menu {z-index:100;padding:10px;border-radius:10px 10px 0 0;margin:0 auto;}
ul.menu ul {z-index:50;border-radius:0 0 10px 10px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
ul.menu li {line-height:30px;position:relative;text-indent:10px;}
ul.menu > li {margin-top:2px;font-size:12px;}
ul.menu > li a {font:normal 12px/30px arial, sans-serif;color:#fff;text-decoration:none;}
ul.menu label.open {display:block;background:#c00 url("images/d-arrow.gif") no-repeat 170px 12px;line-height:30px;position:relative;z-index:100;font:normal 12px/30px arial, sans-serif;color:#fff;border-radius:10px 10px 0 0;}
ul.menu label.open b {color:#ff0;}
ul.menu span {display:block;background:#c00;line-height:30px;position:relative;z-index:100;border-radius:10px 10px 0 0;}
ul.menu label img {position:absolute;left:0;top:0;width:100%;height:30px;}
ul.menu ul li {margin-top:-30px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
ul.menu ul li a {display:block;font:normal 11px/30px arial, sans-serif;color:#000;background:#ccc;}
ul.menu ul li a:hover {background:#ddd;}
ul.menu input {position:absolute;left:-9999px;}
ul.menu li input:checked + label {background:#069;}
ul.menu li input:checked ~ ul {background:#ccc;padding-bottom:10px;}
ul.menu li input:checked ~ ul li {margin-top:0;}
ul.menu label.close {display:block;width:200px;height:30px;background:transparent url("images/u-arrow.gif") no-repeat 170px 12px;line-height:30px;position:relative;left:0;z-index:90;margin-top:-30px}
ul.menu input.tabs:checked ~ label.close {display:block;z-index:200;}
ul.menu input.close:checked + label.close {display:none;}
ul.menu input.close:checked ~ ul {background:#ddd;padding-bottom:0;}
ul.menu input.close:checked ~ ul li {margin-top:-30px;}
</style>
</head>
<body>
<ul class="menu">
<li><a href="#"><span>首页</span></a></li>
<li>
<input type="radio" name="tab1" id="tab1a" class="tabs">
<label for="tab1a" class="open" accesskey="2">
<img src="images/trans.gif" alt="">买东西 [2] <b>[3]</b>
</label>
<input type="radio" name="tab1" id="tab1ac" class="tabs close">
<label for="tab1ac" class="close" accesskey="3">
<img src="images/trans.gif" alt="">
</label>
<ul>
<li><a href="#">出售廉价</a></li>
<li><a href="#">互联网商品</a></li>
<li><a href="#">世界产品</a></li>
<li><a href="#">环卫商品</a></li>
<li><a href="#">文件和衣服</a></li>
</ul>
</li>
<li><input type="radio" name="tab1" id="tab1b" class="tabs" checked="checked"><label for="tab1b" class="open" accesskey="4"><img src="images/trans.gif" alt="">服务器 [4] <b>[5]</b></label>
<input type="radio" name="tab1" id="tab1bc" class="tabs close"><label for="tab1bc" class="close" accesskey="5"><img src="images/trans.gif" alt=""></label>
<ul>
<li><a href="#">印刷产品</a></li>
<li><a href="#">相片修改</a></li>
<li><a href="#">hdsjdhjs</a></li>
</ul>
</li>
<li><input type="radio" name="tab1" id="tab1c" class="tabs"><label for="tab1c" class="open" accesskey="6"><img src="images/trans.gif" alt="">联系我们 [6] <b>[6]</b></label>
<input type="radio" name="tab1" id="tab1cc" class="tabs close"><label for="tab1cc" class="close" accesskey="7"><img src="images/trans.gif" alt=""></label>
<ul>
<li><a href="#">支持我们</a></li>
<li><a href="#">出售的上篇</a></li>
<li><a href="#">买的产品</a></li>
<li><a href="#">相 片</a></li>
<li><a href="#">卡片</a></li>
</ul>
</li>
<li><input type="radio" name="tab1" id="tab1d" class="tabs"><label for="tab1d" class="open" accesskey="8"><img src="images/trans.gif" alt="">商品地址 [8] <b>[3]</b></label>
<input type="radio" name="tab1" id="tab1dc" class="tabs close"><label for="tab1dc" class="close" accesskey="9"><img src="images/trans.gif" alt=""></label>
<ul>
<li><a href="#">南半球亚马逊</a></li>
<li><a href="#">北半球亚马逊</a></li>
<li><a href="#">中间三不管</a></li>
</ul>
</li>
<li><input type="radio" name="tab1" id="tab1e" class="tabs"><label for="tab1e" class="open" accesskey="F"><img src="images/trans.gif" alt="">联系我们 [F] <b>[G]</b></label>
<input type="radio" name="tab1" id="tab1ec" class="tabs close"><label for="tab1ec" class="close" accesskey="G"><img src="images/trans.gif" alt=""></label>
<ul>
<li><a href="#">邮箱地址</a></li>
<li><a href="#">电 话</a></li>
<li><a href="#">固定电话</a></li>
<li><a href="#">家庭地址</a></li>
</ul>
</li>
<li><a href="#"><span>超超超</span></a></li>
</ul>
</body>
</html>

希望本文所述对大家的css3网页设计有所帮助。

HTML / CSS 相关文章推荐
使用 css3 transform 属性来变换背景图的方法
May 07 HTML / CSS
用CSS3写的模仿iPhone中的返回按钮
Apr 04 HTML / CSS
CSS3常用的几种颜色渐变模式总结
Nov 18 HTML / CSS
css3遮罩层镂空效果的多种实现方法
May 11 HTML / CSS
详解HTML5中的标签
Jun 19 HTML / CSS
HTML5 Canvas绘制文本及图片的基础教程
Mar 14 HTML / CSS
HTML5是否真的可以取代Flash
Feb 10 HTML / CSS
HTML5实现WebSocket协议原理浅析
Jul 07 HTML / CSS
HTML5利用约束验证API来检查表单的输入数据的代码实例
Dec 20 HTML / CSS
html5组织内容_动力节点Java学院整理
Jul 10 HTML / CSS
微信小程序“圣诞帽”的实现思路详解
Dec 28 HTML / CSS
深入理解HTML5定时器requestAnimationFrame的使用
Dec 12 HTML / CSS
CSS3区域模块region相关编写示例
Aug 28 #HTML / CSS
使用CSS3来实现滚动视差效果的教程
Aug 24 #HTML / CSS
CSS3中的opacity属性使用教程
Aug 19 #HTML / CSS
实例讲解CSS3中的border-radius属性
Aug 18 #HTML / CSS
详解CSS3中使用gradient实现渐变效果的方法
Aug 18 #HTML / CSS
全方位了解CSS3的Regions扩展
Aug 07 #HTML / CSS
CSS3中Animation属性的使用详解
Aug 06 #HTML / CSS
You might like
Php做的端口嗅探器--可以指定网站和端口
2006/10/09 PHP
几个php应用技巧
2008/03/27 PHP
浅谈PHP的反射机制
2016/12/15 PHP
php libevent 功能与使用方法详解
2020/03/04 PHP
javascript入门·图片对象(无刷新变换图片)\滚动图像
2007/10/01 Javascript
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
2009/11/14 Javascript
javascript或asp实现的判断身份证号码是否正确两种验证方法
2009/11/26 Javascript
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
2011/11/14 Javascript
如何让页面在打开时自动刷新一次让图片全部显示
2012/12/17 Javascript
JS网页播放声音实现代码兼容各种浏览器
2013/09/22 Javascript
禁止IE用右键的JS代码
2013/12/30 Javascript
NodeJS制作爬虫全过程(续)
2014/12/22 NodeJs
jquery解析json格式数据的方法(对象、字符串)
2015/11/24 Javascript
jQuery添加和删除指定标签的方法
2015/12/16 Javascript
适用于javascript开发者的Processing.js入门教程
2016/02/24 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
2016/05/12 Javascript
轻松掌握JavaScript中的Math object数学对象
2016/05/26 Javascript
Vue.js学习示例分享
2017/02/05 Javascript
Ionic + Angular.js实现图片轮播的方法示例
2017/05/21 Javascript
微信小程序实现的绘制table表格功能示例
2019/04/26 Javascript
JavaScript实现矩形块大小任意缩放
2020/08/25 Javascript
Python 数据结构之堆栈实例代码
2017/01/22 Python
Python中正则表达式详解
2017/05/17 Python
python获取文件真实链接的方法,针对于302返回码
2018/05/14 Python
使用Python微信库itchat获得好友和群组已撤回的消息
2018/06/24 Python
解决python中os.listdir()函数读取文件夹下文件的乱序和排序问题
2018/10/17 Python
对numpy中向量式三目运算符详解
2018/10/31 Python
Python hashlib模块实例使用详解
2019/12/24 Python
彪马加拿大官网:PUMA加拿大
2018/10/04 全球购物
怎样写留学自荐信
2013/11/11 职场文书
考试保密承诺书
2014/08/30 职场文书
县委务虚会发言材料
2014/10/20 职场文书
求职简历自我评价怎么写
2015/03/10 职场文书
旗帜观后感
2015/06/08 职场文书
Java图书管理系统,课程设计必用(源码+文档)
2021/06/30 Java/Android
基于Python实现对比Exce的工具
2022/04/07 Python