CSS制作仿image menu效果

日期：2008-12-31 分类：CSS

image meun 是一种很不错的效果，让菜单以图片的形式呈现，给网页增色不少。这种效果一般由 js 制作，今天我们用 CSS 来制作类似的效果，先看下效果图：

基本思路

其实很简单。把 img 标签放到 a 标签里面，给 a 标签设置一个较小的宽度，并且设置超过部分隐藏。当鼠标经过 a 标签时，把 a 标签的宽度改变为与图片大小相同。

代码实现

XHTML 代码：

<ul>
	<li><a href="#"><img src="images/sky.jpg" alt="" /></a></li>
	<li><a href="#"><img src="images/flow.jpg" alt="" /></a></li>
	<li><a href="#"><img src="images/tree.jpg" alt="" /></a></li>
	<li><a href="#"><img src="images/bord.jpg" alt="" /></a></li>
</ul>

CSS 代码：

* {
	margin:0;
	padding:0;
}
img {
	width:240px;
	height:300px;
	border:none;
	display:block;
}
ul {
	width:384px;
	margin:20px auto;
	list-style:none;
	background:#e6e6e6;
	border:7px solid #e6e6e6;
	overflow:hidden;
}
li {
	float:left;
}
a {
	position:relative;
	display:block;
	width:48px;
	text-decoration:none;
	color:#000;
	overflow:hidden;
	cursor: default;
}
a:hover {
	width:240px;
}
a:hover {
	background:no-repeat;
}

查看Demo

当然，和 js 制作的相比，还是差点，比如 js 制作的有动画缓冲效果，用户体验好些。

再看一个有提示的例子，查看Demo

查看：4,405 评论：7 标签：image menu