css菜单下拉菜单_如何使用CSS3为菜单增添趣味-CSDN博客

css菜单下拉菜单

In this new category called “Tips and Tricks” we will introduce some quick and interesting methods around web development and web design. In today’s tip we’ll show you how to spice up your menu by adding a neat hover effect to it. The idea is to slide an image out to the right when hovering over a menu item.

在这个称为“技巧和窍门”的新类别中，我们将介绍一些围绕Web开发和Web设计的快速而有趣的方法。在今天的技巧中，我们将向您展示如何通过在菜单上添加简洁的悬停效果来为菜单增添趣味。将鼠标悬停在菜单项上时，可以将图像向右滑动。

Each menu item (which is a unordered list item in this case) will have an anchor containing two spans and an image:

每个菜单项(在这种情况下为无序列表项)将具有一个包含两个跨度和一个图像的锚点：


<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>

We’ll give .mh-menu li a display block and rgba(255,255,255, 0.8) as background color. When we hover over a list item, we’ll color the background into rgba(225,239,240, 0.4) which is a light blue:

我们将给.mh-menu li一个显示块，并将rgba(255,255,255，0.8)作为背景色。当我们将鼠标悬停在一个列表项上时，我们会将背景颜色涂成浅蓝色的rgba(225,239,240，0.4)：


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

The second span will also change its color on hover, but we want to change each item into a different color. So, we’ll add a color transition and get each different element with the nth-child selector:

第二个跨度也会在悬停时更改其颜色，但是我们想将每个项目更改为不同的颜色。因此，我们将添加颜色过渡并使用nth-child选择器获取每个不同的元素：


.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;
}

The image will slide to the right side, so initially, it will have a left of 0px. We’ll also add a transition for its opacity; it will animate from 0 (initial value) to 1:

图片会滑动到右侧，因此最初的左侧为0px。我们还将为其不透明度添加一个过渡。它将从0(初始值)到1进行动画处理：


.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;
}

And voilà, there we have our nice slide out effect! Make sure, that the z-index of the anchor is set to something higher than the image so that it slides under the anchor and not on top of it.

瞧，我们有很好的滑出效果！确保将锚点的z索引设置为高于图像的高度，以使其在锚点下方而不是顶部滑动。

Alternatively, we can make the background color of the anchor become opaque on hover, i.e. completely white (demo 2), or color each child differently (demo 3).

或者，我们可以使锚点的背景颜色在悬停时变得不透明，即完全变成白色(演示2 )，或者为每个孩子着色不同(演示3 )。

The illustrations in the demo are by Bartosz Kosowski (CC BY-NC 3.0).

该演示中的插图由Bartosz Kosowski ( CC BY-NC 3.0 )提供。