纯CSS3实现手风琴风格菜单具体步骤


Posted in HTML / CSS onMay 06, 2013

今天分享一个如何使用纯CSS3创建手风琴风格菜单教程,菜单主要通过使用:target伪类来实现。
:target使用介绍
CSS3 target伪类是众多实用的CSS3特性中的一个。它用来匹配文档(页面)的URI中某个标志符的目标元素。具体来说,URI中的标志符通常会包含一 个”#”字符,然后后面带有一个标志符名称,比如#respond,target就是用来匹配ID为respond的元素的。
现在在页面中,点击一个ID链接后,页面只会跳转到相应的位置,但是并不会有比较明显的UI标识,使用:target伪类可以像:hover等伪类一样对目标元素定义样式。
第一步:HTML标签结构
一 个简单的无序列表,每个li中包含一个超链接和span,同时为每一个li添加一个不同的id和一个连接到这个id的超链接。为了添加样式和展开菜单项下 面的内容,需要使用:target伪类。

复制代码
代码如下:

<ul class="accordion">
<li id="one" class="files"><a href="#one">我的文件<span>495</span></a></li>
<li id="two" class="mail"><a href="#two">邮件<span>26</span></a></li>
<li id="three" class="cloud"><a href="#three">网盘<span>58</span></a></li>
<li id="four" class="sign"><a href="#four">退出登录</a></li>
</ul>

第二步:菜单布局基本样式
首先修改一些浏览器默认 样式,清除margin padding等等。
复制代码
代码如下:

.accordion,
.accordion ul,
.accordion li,
.accordion a,
.accordion span {
margin: 0;
padding: 0;
border: none;
outline: none;
text-align:left;
}
.accordion li {
list-style: none;
}

定义菜单项链接样式,添加渐变,阴影的效果,定义字体等。这里没有指定固定的宽度,菜单的 宽度100%填充它的父元素,如果你想把菜单设置成300px,你可以给它添加一个父div,指定宽度为300px就可以了。虽然没有指定宽度,但是定义 了最小宽度,保证菜单布局能够正确的显示。
复制代码
代码如下:

.accordion li > a {
display: block;
position: relative;
min-width: 110px;
padding: 0 10px 0 40px;
color: #fdfdfd;
font: bold 14px/32px 黑体,宋体;
text-decoration: none;
text-shadow: 0px 1px 0px rgba(0,0,0, .35);
background: #6c6e74;
background: -moz-linear-gradient(top, #6c6e74 0%, #4b4d51 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6c6e74), color-stop(100%,#4b4d51));
background: -webkit-linear-gradient(top, #6c6e74 0%,#4b4d51 100%);
background: -o-linear-gradient(top, #6c6e74 0%,#4b4d51 100%);
background: -ms-linear-gradient(top, #6c6e74 0%,#4b4d51 100%);
background: linear-gradient(top, #6c6e74 0%,#4b4d51 100%);
-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
-moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
}

定义数字指示器样式,当然如果你的菜单不需要数字指示器,你打可以删掉这个html结构中 span元素。
复制代码
代码如下:

.accordion li > a span {
display: block;
position: absolute;
top: 7px;
right: 0;
padding: 0 10px;
margin-right: 10px;
font: normal bold 12px/18px Arial, sans-serif;
background: #404247;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
-moz-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
}

第三步:添加图标样式
我们使用:before为菜单插入图标,图标的宽 高都是24px,用下面的样式使其正确的显示。我创建了一个sprite,包含了四个图标的正常和hover时候的不同样式。
复制代码
代码如下:

.accordion > li > a:before {
position: absolute;
top: 0;
left: 0;
content: '';
width: 24px;
height: 24px;
margin: 4px 8px;
background-repeat: no-repeat;
background-image: url(../images/icons.png);
background-position: 0px 0px;
}
.accordion li.files > a:before { background-position: 0px 0px; }
.accordion li.files:hover > a:before,
.accordion li.files:target > a:before { background-position: 0px -24px; }
.accordion li.mail > a:before { background-position: -24px 0px; }
.accordion li.mail:hover > a:before,
.accordion li.mail:target > a:before { background-position: -24px -24px; }
.accordion li.cloud > a:before { background-position: -48px 0px; }
.accordion li.cloud:hover > a:before,
.accordion li.cloud:target > a:before { background-position: -48px -24px; }
.accordion li.sign > a:before { background-position: -72px 0px; }
.accordion li.sign:hover > a:before,
.accordion li.sign:target > a:before { background-position: -72px -24px; }

第四步:子菜单HTML和样式
HTML:
同 样也使用ul作为子菜单,放到父菜单的li里面,如下代码:
复制代码
代码如下:

<li id="one"><a href="#one">我的文件<span>495</span></a>
<ul>
<li><a href="javascript:void(0);"><em>01</em>音乐<span>42</span></a></li>
<li><a href="javascript:void(0);"><em>02</em>视频<span>87</span></a></li>
<li><a href="javascript:void(0);"><em>03</em>图片<span>366</span></a></li>
</ul>
</li>

CSS:
复制代码
代码如下:

.sub-menu li a {
font: bold 12px/32px 黑体,宋体;
color: #797979;
text-shadow: 1px 1px 0px rgba(255,255,255, .2);
background: #e5e5e5;
border-bottom: 1px solid #c9c9c9;
-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
-moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
}
.sub-menu li:last-child a { border: none; }
.sub-menu li > a span {
color: #797979;
text-shadow: 1px 1px 0px rgba(255,255,255, .2);
background: transparent;
border: 1px solid #c9c9c9;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.sub-menu em {
position: absolute;
top: 0;
left: 0;
margin-left: 14px;
color: #a6a6a6;
font: normal 10px/32px Arial, sans-serif;
}

第五步:定义鼠标悬浮和菜单激活时状态样式
当鼠标悬浮和菜单激活时改变 背景为绿色。
复制代码
代码如下:

.accordion > li:hover > a,
.accordion > li:target > a {
color: #3e5706;
text-shadow: 1px 1px 1px rgba(255,255,255, .2);
background: #a5cd4e;
background: -moz-linear-gradient(top, #a5cd4e 0%, #6b8f1a 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a));
background: -webkit-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
background: -o-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
background: -ms-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
background: linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);
}
.accordion > li:hover > a span,
.accordion > li:target > a span {
color: #fdfdfd;
text-shadow: 0px 1px 0px rgba(0,0,0, .35);
background: #3e5706;
}
.sub-menu li:hover a { background: #efefef; }

第六步:控制子菜单的显示与隐藏
为 了隐藏子菜单,我们需要定义子菜单的高度为0px。当点击父菜单时,为子菜单添加下滑显示的动态效果。为了实现下滑的效果,需要指定子菜单固定的高度。因 为这个教程中子菜单有三个link,所以这里指定了98px。如果你想加更多的子菜单就需要修改height为所有子菜单的高度和,当然如果你想要让它自 动变化,可以给高度赋值100%,但是这样下滑的动画效果就没有了。
复制代码
代码如下:

.accordion li > .sub-menu {
height: 0;
overflow: hidden;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.accordion li:target > .sub-menu {
height: 98px;
}

总结
到此纯CSS3实现的手风琴风格菜单就全部结束了。教程中我们主要通过使用伪类:before和:target来定义样式,使用:target来实现菜单点击展开子菜单事件。希望你能够喜欢这个教程。
HTML / CSS 相关文章推荐
CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
Aug 18 HTML / CSS
CSS3 clip-path 用法介绍详解
Mar 01 HTML / CSS
你正在寻找的CSS3 动画技术
Jul 27 HTML / CSS
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
Jul 08 HTML / CSS
HTML5: Web 标准最巨大的飞跃
Oct 17 HTML / CSS
HTML5 语音搜索只需一句代码
Jan 03 HTML / CSS
Html5实现如何在两个div元素之间拖放图像
Mar 29 HTML / CSS
深入解析HTML5的IndexedDB索引数据库
Sep 14 HTML / CSS
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
Apr 26 HTML / CSS
canvas线条的属性详解
Mar 27 HTML / CSS
吃透移动端 1px的具体用法
Dec 16 HTML / CSS
详解CSS伪元素的妙用单标签之美
May 25 HTML / CSS
CSS3——齿轮转动关键代码
May 02 #HTML / CSS
如何利用CSS3制作3D效果文字具体实现样式
May 02 #HTML / CSS
使用JS+CSS3技术:让你的名字动起来
Apr 27 #HTML / CSS
CSS3 绘制BMW logo实的现代码
Apr 25 #HTML / CSS
纯HTML+CSS3制作导航菜单(附源码)
Apr 24 #HTML / CSS
Css3+Js制作漂亮时钟(附源码)
Apr 24 #HTML / CSS
CSS3盒子模型详解
Apr 24 #HTML / CSS
You might like
php设置页面超时时间解决方法
2015/09/22 PHP
php-msf源码详解
2017/12/25 PHP
php框架CodeIgniter主从数据库配置方法分析
2018/05/25 PHP
PHP两个n位的二进制整数相加问题的解决
2018/08/26 PHP
php微信公众号开发之答题连闯三关
2018/10/20 PHP
解决Laravel blade模板转义html标签的问题
2019/09/03 PHP
jQuery 对Select的操作备忘记录
2011/07/04 Javascript
另一个javascript小测验(代码集合)
2011/07/27 Javascript
使用ajaxfileupload.js实现ajax上传文件php版
2014/06/26 Javascript
jquery实现右键菜单插件
2015/03/29 Javascript
JQuery入门基础小实例(1)
2015/09/17 Javascript
jQuery学习心得总结(必看篇)
2016/06/10 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
2016/12/01 Javascript
react中的ajax封装实例详解
2017/10/17 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
2018/12/24 Javascript
SublimeText 2编译python出错的解决方法(The system cannot find the file specified)
2013/11/27 Python
python pandas 对series和dataframe的重置索引reindex方法
2018/06/07 Python
Python利用lxml模块爬取豆瓣读书排行榜的方法与分析
2019/04/15 Python
Python 异常的捕获、异常的传递与主动抛出异常操作示例
2019/09/23 Python
Python检查图片是否损坏及图片类型是否正确过程详解
2019/09/30 Python
python中的线程threading.Thread()使用详解
2019/12/17 Python
浅谈keras中loss与val_loss的关系
2020/06/22 Python
Python函数__new__及__init__作用及区别解析
2020/08/31 Python
详解canvas在圆弧周围绘制文本的两种写法
2018/05/22 HTML / CSS
HTML5 声明兼容IE的写法
2011/05/16 HTML / CSS
新加坡航空官方网站:Singapore Airlines
2016/10/13 全球购物
英国马莎百货印度官网:Marks & Spencer印度
2020/10/08 全球购物
C/C++程序员常见面试题二
2015/11/19 面试题
通息工程毕业生自荐信
2013/10/16 职场文书
学校领导班子群众路线整改措施
2014/09/16 职场文书
党员检讨书
2014/10/13 职场文书
小学班主任工作总结2015
2015/04/07 职场文书
2015年大学生村官工作总结
2015/04/21 职场文书
英语专业毕业论文答辩开场白
2015/05/27 职场文书
安全生产标语口号
2015/12/26 职场文书
Python pyecharts绘制条形图详解
2022/04/02 Python