几个超酷CSS导航菜单

无艺

下面是导航菜单demo：

Demo:

 

这里我能上传图片了，原本是可以实时演示的，但是我不知道怎么弄。

下面的是用到的图片，分别对应着上面菜单的颜色：

 red:       ;

blue:     ;

green:     ;

orange:  

purple：     。

终于传完了。接着分别是CSS和html代码：

 

css：

<style type="text/css"> 

.glossymenu{
 position: relative;
 padding: 0 0 0 34px;
 margin: 0 auto 0 auto;
 background: url(media/menur_bg.gif) repeat-x; /*tab background image path*/
 height: 46px;
 list-style: none;
}

.glossymenu li{
 float:left;
}

.glossymenu li a{
 float: left;
 display: block;
 color:#000;
 text-decoration: none;
 font-family: sans-serif;
 font-size: 13px;
 font-weight: bold;
 padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/
 height: 46px;
 line-height: 46px;
 text-align: center;
 cursor: pointer; 
}

.glossymenu li a b{
 float: left;
 display: block;
 padding: 0 24px 0 8px; /*Padding of menu items*/
}

.glossymenu li.current a, .glossymenu li a:hover{
 color: #fff;
 background: url(media/menur_hover_left.gif) no-repeat; /*left tab image path*/
 background-position: left;
}

.glossymenu li.current a b, .glossymenu li a:hover b{
 color: #fff;
 background: url(media/menur_hover_right.gif) no-repeat right top; /*right tab image path*/
}

</style>

 

html代码:（用url代替#，而粗体部分是菜单内容）

<ul class="glossymenu">
 <li class="current"><a href="#/"><b>Home</b></a></li>
 <li><a href="#/"><b>CSS</b></a></li>
 <li><a href="#/"><b>Forums</b></a></li> 
 <li><a href="#"><b>Webmaster Tools</b></a></li> 
 <li><a href="#/"><b>JavaScript</b></a></li> 
 <li><a href="#"><b>Gallery</b></a></li> 
</ul>

。

最后是图片打包，点击下载： css菜单图片.rar (15.72 KB, 下载次数: 564)

2007-12-28 22:35 上传

点击文件名下载附件

[ 本帖最后由 无艺 于 2007-12-28 23:44 编辑 ]

无艺

http://www.dynamicdrive.com/styl ... sy_horizontal_menu/ 大家可以上去看看的。还有挺多好东西的。