css 有彈動效果的網(wǎng)頁導航

更新時間：2009年10月11日 19:04:56 作者：

發(fā)了個韓國網(wǎng)站（www.firstkids.co.kr）給我，讓我用CSS寫一個類似這個網(wǎng)站的導航欄效果。思路是：背景圖像定位！

<!DOCTYPE html 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>這是一個導航</title> <style type="text/css"> #nav{ list-style:none; margin:0; padding:5px 0 0 0; background:#F0F0F0; } #nav li{ float:left; display:inline; margin-right:2px; } #nav a{ float:left; width:81px; height:28px; text-align:center; background:url(<A href="http://www.dhdzp.com/upload/20091011190507833.gif">http://www.dhdzp.com/upload/20091011190507833.gif</A>) no-repeat 0 -4px #F3602A; font:12px/24px '宋體'; color:#FFF; text-decoration:none; } #nav a:hover{ line-height:28px; background-position:0; } </style> </head> <body> <ul id="nav"> <li><a href="http://www.dhdzp.com/web/">網(wǎng)頁制作</a></li> <li><a href="http://www.dhdzp.com/flash/">Flash教程</a></li> <li><a href="http://www.dhdzp.com/photoshop/">Photoshop教程</a></li> <li><a href="http://www.dhdzp.com/">腳本之家</a></li> </ul> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

幾個不錯的自動收縮菜單導航效果
幾個不錯的自動收縮菜單導航效果...
2007-10-10
javascript漸變顯示的雅虎中國選項卡效果代碼
javascript漸變顯示的雅虎中國選項卡效果代碼...
2007-10-10
css+js下拉菜單
js+css實現(xiàn)的簡單的下來菜單。兼容性好。
2009-05-05
javascript 靜態(tài)樹菜單實現(xiàn)代碼
coding這么多年，我居然不知道有"dl"這種html標記，慚愧啊，今天偶然發(fā)現(xiàn)，覺得好玩，如是我為它添加了折疊功能，變成了一顆靜態(tài)樹.
2010-12-12
超級susymenu實現(xiàn)top菜單
超級susymenu實現(xiàn)top菜單...
2007-09-09
可以媲美Flash的JS導航菜單
可以媲美Flash的JS導航菜單...
2007-03-03
超個性的導航效果
超個性的導航效果...
2007-11-11
通用的二級菜單代碼(css+javascript)
前幾天做網(wǎng)站使用到二級菜單，想也沒想就在網(wǎng)上當了幾個，不過大多都不太滿意，只有《CSS二級菜單》看上去似乎好一點，就使用了那個。
2009-07-07
CSS JavaScript 實現(xiàn)菜單功能改進版
通過一個HTML頁面簡單的實現(xiàn)了菜單功能。但是實際開發(fā)當中，如果菜單欄有很多項，頻繁的修改HTML，會很繁瑣，也容易出錯。
2008-12-12
鼠標經(jīng)過導航菜單時顏色改變效果
鼠標經(jīng)過導航菜單的時候，顏色改變，可自定義顏色。
2010-07-07