如何用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/

版权所有：https://diao.it
特别声明：除特别标注，本站文章均为原创，遵循CC BY-NC 3.0，转载请注明出处