一起CSS

当前位置:一起CSS > CSS > 文章正文

CSS制作仿image menu效果

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

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

image menu

基本思路

其实很简单。把 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

查看:1,564 评论:7 标签:

随机日志

共有 7 条评论

发表留言

请言之有物,无意义留言或只为留链接留言一律不予通过!

提示: 您可以使用一些简单的标签: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

分类

最新日志

最新评论

存档

链接

  • 亚当学院
  • CSS视频教程下载
  • 前沿视频教室
  • 前端爱好者
  • GoodText
  • Kily`s Blog
  • mymickey
  • 秦丰网站策划
  • 奥想创意
  • 我的职业生涯
  • 蜗爱CSS
  • 蜈蚣's Blog
  • web标准学习—小辉博客
  • 十字花匠

© Copyright 2010 一起CSS All Rights Reserved