Saivan's Blog--=WEB标准的研究，开发=-

Navigation

Comment

Search

Other

为达到最佳的视觉及浏览效果，请您使用Firefox或Opera来浏览本站!

My DouBan

时尚CSS菜单,很酷

2005-9-26

时尚CSS菜单，很特别，不用图片，做出圆角效果，而且加上了滑动效果，要好好研究一下。

在线运行演示


<!DOCTYPE PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>时尚CSS菜单</title>
</head>
<style type="text/css">

#navigation {background:transparent; margin:0 auto; height:3em; overflow:hidden; background:#bbb;}

#navigation ul {margin:0; padding:0; list-style-type:none; background:transparent;}
#navigation li {display:block; float:left; margin:0 1px;}
.snazzy {background:transparent;}
.snazzy span {text-align:center; color:#fff; margin:0; font-weight:normal;}

.b1, .b2, .b3, .b4 {display:block; overflow:hidden; font-size:1px;}
.b1, .b2, .b3 {height:1px;}
.b2, .b3, .b4 {border-left:1px solid #fff; border-right:1px solid #fff;}
.b1 {margin:0 5px; background:#fff;}
.b2 {margin:0 3px; border-width:0 2px;}
.b3 {margin:0 2px;}
.b4 {height:2px; margin:0 1px;}
.boxcontent {display:block; border-left:1px solid #fff; border-right:1px solid #fff;}

a.menu, a.menu:visited {display:block; text-decoration:none; width:5.5em;}
a.menu:hover {background:transparent; cursor:pointer;}
a.menu:hover span {padding-top:10px;}

.red {background:#c00;}
.orange {background:#f90;}
.yellow {background:#b8b800;}
.green {background:#090;}
.blue {background:#00c;}
.indigo {background:#309;}
.violet {background:#c6c;}

</style>
<body>
<div id="navigation">

<ul>
<li>
<a class="menu" href="#"><b class="snazzy"><span class="boxcontent red">item #1</span>
<b class="b4 red"></b><b class="b3 red"></b><b class="b2 red"></b><b class="b1"></b></b></a>

</li>
<li>

<a class="menu" href="#"><b class="snazzy"><span class="boxcontent orange">item #2</span>

<b class="b4 orange"></b><b class="b3 orange"></b><b class="b2 orange"></b><b class="b1"></b></b></a>
</li>

<li>
<a class="menu" href="#"><b class="snazzy"><span class="boxcontent yellow">item #3</span>
<b class="b4 yellow"></b><b class="b3 yellow"></b><b class="b2 yellow"></b><b class="b1"></b></b></a>

</li>
<li>
<a class="menu" href="#"><b class="snazzy"><span class="boxcontent green">item #4</span>
<b class="b4 green"></b><b class="b3 green"></b><b class="b2 green"></b><b class="b1"></b></b></a>

</li>
<li>
<a class="menu" href="#"><b class="snazzy"><span class="boxcontent blue">item #5</span>
<b class="b4 blue"></b><b class="b3 blue"></b><b class="b2 blue"></b><b class="b1"></b></b></a>

</li>
<li>
<a class="menu" href="#"><b class="snazzy"><span class="boxcontent indigo">item #6</span>
<b class="b4 indigo"></b><b class="b3 indigo"></b><b class="b2 indigo"></b><b class="b1"></b></b></a>

</li>
<li>
<a class="menu" href="#"><b class="snazzy"><span class="boxcontent violet">item #7</span>
<b class="b4 violet"></b><b class="b3 violet"></b><b class="b2 violet"></b><b class="b1"></b></b></a>

</li>
</ul>

</div>
</body>
</html>

Post at: WEB Standard

全部共有[1]条日志，每页显示(1)篇日志

Comment View ({Count})

{CommentAuthor}	{CommentTime Format="yyyy-mm-dd"}
{CommentContent}
{CommentUrl}{CommentEmail}{CommentIp}

Saivan's Blog--=WEB标准的研究，开发=-

Navigation

Comment

Search

Links

Other

My DouBan

时尚CSS菜单,很酷

Comment View ({Count})

{CommentAuthor}