如何用CSS3美化菜单

快速提示：为每个菜单项添加图像，并在鼠标悬停时滑出。

查看DEMO    下载源码

在这个叫做“提示与技巧”的分类中，我们会介绍一些关于Web开发和Web设计的简短有趣的方法。在今天的小提示中，我们会展示如何为菜单添加一个优美的悬停效果。主要的想法就是当鼠标悬停在菜单项时右侧滑出一个图片。

每个菜单项（在本例中是一个无序列表项）会包含一个含有两个 span 的锚点和一个图像：

1 2 3 4 5 6 7 8 9 10

<ul class= "mh-menu" >      <li>          <a href= "#" >              <span>Art Director</span>              <span>Henry James</span>          </a>          <img src= "images/1.jpg" alt= "image01" />      </li>      <!-- ... --> </ul>

我们会把 .mh-menu li a 设置成 display:block 并将背景设置为 rgba(255,255,255, 0.8) ，当鼠标悬停到列表项时，我们再把背景色设置成浅蓝色 rgba(225,239,240, 0.4)：

1 2 3

.mh-menu li:hover a{      background: rgba(225,239,240, 0.4); }

第二个 span 在鼠标悬停时也会改变背景色，但我们希望不同的列表项能够显示不同的颜色，因此我们首先添加一个颜色渐变，然后使用 nth-child 选择器获取元素（有用的:nth-child秘方  ——译者注。）：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

.mh-menu li a span:nth-child(2){      /*...*/      transition: color 0.2s linear; } .mh-menu li:nth-child(1):hover span:nth-child(2){      color: #ae3637; } .mh-menu li:nth-child(2):hover span:nth-child(2){      color: #c3d243; } .mh-menu li:nth-child(3):hover span:nth-child(2){      color: #d38439; } .mh-menu li:nth-child(4):hover span:nth-child(2){      color: #8e7463; }

由于图像要滑到右侧，因此，首先它的 left 值必须是 0px，同时我们也为它的透明度添加一个渐变，它会从初始值 0 渐变到 1 ：

1 2 3 4 5 6 7 8 9 10 11 12

.mh-menu li img{      position: absolute;      z-index: 1;      left: 0px;      top: 0px;      opacity: 0;      transition: left 0.4s ease- in -out, opacity 0.6s ease- in -out; } .mh-menu li:hover img{      left: 300px;      opacity: 1; }

瞧，这样我们就有了一个很棒的滑出的效果了！

注意要确保锚点的 z-index 值比图像高一点儿，这样图像才会在锚点的下方滑出而不是在它的上面。

另外，我们还可以使背景色在悬浮的时候不透明，例如完全是白色（demo 2），或者为每个子元素设置不同的颜色（demo 3）。

本文中的演示由  Bartosz Kosowski  (CC BY-NC 3.0) 提供。

查看DEMO    下载源码

原文地址：http://tympanus.net/codrops/2012/01/22/how-to-spice-up-your-menu-with-css3/

版权所有：Hi,laser! @44ux.com 《如何用CSS3美化菜单》
本文链接：http://44ux.com/index.php/2012/01/how-to-spice-up-your-menu-with-css3/
特别声明：除特别标注，本站文章均为原创，遵循CC BY-NC 3.0，转载请注明出处

转载于:https://www.cnblogs.com/jiguang/archive/2012/02/05/2339293.html