纯CSS3实现手风琴风格菜单



今天分享一个如何使用纯CSS3创建手风琴风格菜单教程，菜单主要通过使用:target伪类来实现。

css3-accordion-main

查看演示   下载源码

:target使用介绍

CSS3 target伪类是众多实用的CSS3特性中的一个。它用来匹配文档(页面)的URI中某个标志符的目标元素。具体来说，URI中的标志符通常会包含一个”#”字符，然后后面带有一个标志符名称，比如#respond，target就是用来匹配ID为respond的元素的。
现在在页面中，点击一个ID链接后，页面只会跳转到相应的位置，但是并不会有比较明显的UI标识，使用:target伪类可以像:hover等伪类一样对目标元素定义样式。

第一步：HTML标签结构

一个简单的无序列表，每个li中包含一个超链接和span，同时为每一个li添加一个不同的id和一个连接到这个id的超链接。为了添加样式和展开菜单项下面的内容，需要使用:target伪类。

  1. <ul class="accordion">
  2.  
  3.     <li id="one" class="files"><a href="#one">我的文件<span>495</span></a></li>
  4.  
  5.     <li id="two" class="mail"><a href="#two">邮件<span>26</span></a></li>
  6.  
  7.     <li id="three" class="cloud"><a href="#three">网盘<span>58</span></a></li>
  8.  
  9.     <li id="four" class="sign"><a href="#four">退出登录</a></li>
  10.  
  11. </ul>

第二步：菜单布局基本样式

首先修改一些浏览器默认样式，清除margin padding等等。

  1. .accordion,
  2. .accordion ul,
  3. .accordion li,
  4. .accordion a,
  5. .accordion span {
  6.     margin: 0;
  7.     padding: 0;
  8.     border: none;
  9.     outline: none;
  10.     text-align:left;
  11. }
  12.  
  13. .accordion li {
  14.     list-style: none;
  15. }

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

  1. .accordion li > a {
  2.     display: block;
  3.     position: relative;
  4.     min-width: 110px;
  5.     padding: 0 10px 0 40px;
  6.  
  7.     color: #fdfdfd;
  8.     font: bold 14px/32px 黑体,宋体;
  9.     text-decoration: none;
  10.     text-shadow: 0px 1px 0px rgba(0,0,0, .35);
  11.  
  12.     background: #6c6e74;
  13.     background: -moz-linear-gradient(top,  #6c6e74 0%, #4b4d51 100%);
  14.     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6c6e74), color-stop(100%,#4b4d51));
  15.     background: -webkit-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
  16.     background: -o-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
  17.     background: -ms-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
  18.     background: linear-gradient(top,  #6c6e74 0%,#4b4d51 100%);
  19.  
  20.     -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
  21.     -moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
  22.     box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
  23. }

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

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

第三步：添加图标样式

我们使用:before为菜单插入图标，图标的宽高都是24px，用下面的样式使其正确的显示。我创建了一个sprite，包含了四个图标的正常和hover时候的不同样式。

  1. .accordion > li > a:before {
  2.     position: absolute;
  3.     top: 0;
  4.     left: 0;
  5.     content: '';
  6.     width: 24px;
  7.     height: 24px;
  8.     margin: 4px 8px;
  9.  
  10.     background-repeat: no-repeat;
  11.     background-image: url(../images/icons.png);
  12.     background-position: 0px 0px;
  13. }
  14.  
  15. .accordion li.files > a:before { background-position: 0px 0px; }
  16. .accordion li.files:hover > a:before,
  17. .accordion li.files:target > a:before { background-position: 0px -24px; }
  18.  
  19. .accordion li.mail > a:before { background-position: -24px 0px; }
  20. .accordion li.mail:hover > a:before,
  21. .accordion li.mail:target > a:before { background-position: -24px -24px; }
  22.  
  23. .accordion li.cloud > a:before { background-position: -48px 0px; }
  24. .accordion li.cloud:hover > a:before,
  25. .accordion li.cloud:target > a:before { background-position: -48px -24px; }
  26.  
  27. .accordion li.sign > a:before { background-position: -72px 0px; }
  28. .accordion li.sign:hover > a:before,
  29. .accordion li.sign:target > a:before { background-position: -72px -24px; }

第四步：子菜单HTML和样式

HTML：

同样也使用ul作为子菜单，放到父菜单的li里面，如下代码：

  1. <li id="one"><a href="#one">我的文件<span>495</span></a>
  2.     <ul>
  3.  
  4.         <li><a href="javascript:void(0);"><em>01</em>音乐<span>42</span></a></li>
  5.  
  6.         <li><a href="javascript:void(0);"><em>02</em>视频<span>87</span></a></li>
  7.  
  8.         <li><a href="javascript:void(0);"><em>03</em>图片<span>366</span></a></li>
  9.     </ul>
  10.  
  11. </li>

CSS：

  1. .sub-menu li a {
  2.     font: bold 12px/32px 黑体,宋体;
  3.     color: #797979;
  4.     text-shadow: 1px 1px 0px rgba(255,255,255, .2);
  5.  
  6.     background: #e5e5e5;
  7.     border-bottom: 1px solid #c9c9c9;
  8.  
  9.     -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
  10.     -moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
  11.     box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
  12. }
  13.  
  14. .sub-menu li:last-child a { border: none; }
  15.  
  16. .sub-menu li > a span {
  17.     color: #797979;
  18.     text-shadow: 1px 1px 0px rgba(255,255,255, .2);
  19.     background: transparent;
  20.     border: 1px solid #c9c9c9;
  21.  
  22.     -webkit-box-shadow: none;
  23.     -moz-box-shadow: none;
  24.     box-shadow: none;
  25. }
  26.  
  27. .sub-menu em {
  28.     position: absolute;
  29.     top: 0;
  30.     left: 0;
  31.     margin-left: 14px;
  32.     color: #a6a6a6;
  33.     font: normal 10px/32px Arial, sans-serif;
  34. }

第五步：定义鼠标悬浮和菜单激活时状态样式

当鼠标悬浮和菜单激活时改变背景为绿色。

  1. .accordion > li:hover > a,
  2. .accordion > li:target > a {
  3.     color: #3e5706;
  4.     text-shadow: 1px 1px 1px rgba(255,255,255, .2);
  5.     background: #a5cd4e;
  6.     background: -moz-linear-gradient(top,  #a5cd4e 0%, #6b8f1a 100%);
  7.     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a));
  8.     background: -webkit-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
  9.     background: -o-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
  10.     background: -ms-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
  11.     background: linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
  12. }
  13.  
  14. .accordion > li:hover > a span,
  15. .accordion > li:target > a span {
  16.     color: #fdfdfd;
  17.     text-shadow: 0px 1px 0px rgba(0,0,0, .35);
  18.     background: #3e5706;
  19. }
  20.  
  21. .sub-menu li:hover a { background: #efefef; }

第六步：控制子菜单的显示与隐藏

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

  1. .accordion li > .sub-menu {
  2.     height: 0;
  3.     overflow: hidden;
  4.  
  5.     -webkit-transition: all .2s ease-in-out;
  6.     -moz-transition: all .2s ease-in-out;
  7.     -o-transition: all .2s ease-in-out;
  8.     -ms-transition: all .2s ease-in-out;
  9.     transition: all .2s ease-in-out;
  10. }
  11.  
  12. .accordion li:target > .sub-menu {
  13.     height: 98px;
  14. }

总结：

到此纯CSS3实现的手风琴风格菜单就全部结束了。教程中我们主要通过使用伪类:before和:target来定义样式，使用:target来实现菜单点击展开子菜单事件。希望你能够喜欢这个教程。

 
 
使用CSS3 PIE让IE6-8正确的显示圆角
 
 
页面过度动画效果大集合


3 评论

  1. waybi   •  

    第六步怎样获取到子菜单高度和

    回复
    • 天屹   •     作者

      纯CSS是获取不到的，这个需要使用js， 为什么要获取高度和呢？

      回复
  2. waybi   •  

    怎样获取ul里li的高度总和 第六步

    回复

向天屹进行回复 取消回复

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性： <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>