本文一步一步手把手教你打造一個(gè)極酷的三層分離的標(biāo)準(zhǔn)滑動(dòng)門導(dǎo)航菜單，從思路、原理、步驟，手段可謂“無所不用其極”，即便你是菜鳥，相信你看了本文后，也能打造出屬于自己的超級(jí)漂亮的標(biāo)準(zhǔn)導(dǎo)航菜單。
導(dǎo)言：本文一步一步手把手教你打造一個(gè)極酷的三層分離的標(biāo)準(zhǔn)滑動(dòng)門導(dǎo)航菜單，從思路、原理、步驟，手段可謂“無所不用其極”，即便你是菜鳥，相信你看了本文后，也能打造出屬于自己的超級(jí)漂亮的標(biāo)準(zhǔn)導(dǎo)航菜單。本菜單無冗余結(jié)構(gòu)，利于數(shù)據(jù)動(dòng)態(tài)輸出，非常適合于用在平常的項(xiàng)目中去。本教程中講到了基本的滑動(dòng)門原理，相信對(duì)那些還在這條路上摸索的朋友會(huì)有一些幫助！當(dāng)然如果有什么錯(cuò)誤和問題，也歡迎大家提出來探討。
本導(dǎo)航菜單想達(dá)到的理想目標(biāo)是：

漂亮，有個(gè)性。 結(jié)構(gòu)清晰，語義明確，無冗余標(biāo)簽。 表現(xiàn)、結(jié)構(gòu)、行為三層分離，無侵入式。 有利于后臺(tái)程序的數(shù)據(jù)輸出。 菜單有三態(tài)效果的變化。 能高亮記錄點(diǎn)擊后的菜單項(xiàng)。 自適應(yīng)文字的寬度。當(dāng)文字內(nèi)容長短變化時(shí)按鈕能適時(shí)變化。 兼容各大主流瀏覽器。

讓我們一步一步的實(shí)現(xiàn)這種理想的菜單吧！
在論壇中經(jīng)?？吹胶芏嗯笥言谥谱鞑藛?，但說實(shí)話，不是結(jié)構(gòu)冗余，就是有形無神，或有神無貌。而我們現(xiàn)在要打造的就是極品菜單。無論您是新手或老手，在這個(gè)教程中都應(yīng)該有所收獲。
一個(gè)理想的菜單其結(jié)構(gòu)應(yīng)該是干凈的、無冗余、分離的，然而因?yàn)榉N種的原因，會(huì)為它加上許多無意義的東西，到最后，會(huì)離“干凈”越來越遠(yuǎn)。所以在做菜單前，有些原則是在整個(gè)制作過程一直要牢記的，不能以任何外力所阻擾。
結(jié)構(gòu)篇
在我的印象中，理想的標(biāo)準(zhǔn)菜單應(yīng)該具有下面的結(jié)構(gòu)：
<div id="nav">
<ul id="menu">
<li><a href="#none" title="博客園">博客園</a></li>
<li><a href="#none" title="社區(qū)">社區(qū)</a></li>
<li><a href="#none" title="首頁">首頁</a></li>
<li><a href="#none" title="新隨筆">新隨筆</a></li>
<li><a href="#none" title="聯(lián)系">聯(lián)系</a></li>
<li><a href="#none" title="管理">管理</a></li>
<li><a href="#none" title="訂閱">訂閱</a></li>
<li><a href="#none" title="冰極峰">冰極峰</a></li>
</ul>
</div>
菜單的最原始的結(jié)構(gòu)有了，可以看到這里面是沒有任何無意義的標(biāo)簽，每個(gè)標(biāo)簽都有各自的語義。我們?cè)跒g覽器中看下，啊哦，確實(shí)很簡(jiǎn)陋，就是原始的文字，像什么，嗯，就像我們?cè)诓损^里點(diǎn)菜用的菜單，可能比那個(gè)還簡(jiǎn)單，并且每個(gè)菜單前面還有一個(gè)小圓點(diǎn)！哦，天啦，離我們的漂亮菜單還差好大一截呢！
#p#
本文一步一步手把手教你打造一個(gè)極酷的三層分離的標(biāo)準(zhǔn)滑動(dòng)門導(dǎo)航菜單，從思路、原理、步驟，手段可謂“無所不用其極”，即便你是菜鳥，相信你看了本文后，也能打造出屬于自己的超級(jí)漂亮的標(biāo)準(zhǔn)導(dǎo)航菜單。
樣式篇
好吧，它現(xiàn)在還只是一個(gè)骨架，我們稍微給它美化一下，加點(diǎn)簡(jiǎn)單的樣式，至少應(yīng)該去掉小圓點(diǎn)吧，并且讓它水平排列吧！
好，加點(diǎn)樣式吧！
*{margin:0;padding:0;}/*將它統(tǒng)一成一個(gè)模樣吧，不然在各個(gè)瀏覽器下，會(huì)死得很難看*/
ul{list-style:none}/*去掉小圓點(diǎn)吧*/
li{float:left;margin-left:10px;}/*水平排列并來點(diǎn)間距吧，不要把我擠得太緊了。*/
嗯，現(xiàn)在看看，達(dá)到小目標(biāo)了。
骨架有了，接下來就是給每個(gè)菜單項(xiàng)穿上漂亮的衣裳。
要滿足第一項(xiàng)要求，首先要有一個(gè)漂亮的按鈕，自已畫一個(gè)，哦，我不是美術(shù)人員，難！不過，別恢心，網(wǎng)絡(luò)之大，無奇不有，說不定人家已經(jīng)有做好的，google一下，還真發(fā)現(xiàn)了一個(gè)，感謝??！
有了設(shè)計(jì)好的按鈕源碼，省去設(shè)計(jì)的一環(huán)，真好。但要做成三態(tài)按鈕，還需要我們改造一下這個(gè)按鈕?？吹降谄邨l目標(biāo)了嗎，我們是要做自適應(yīng)的按鈕，所以要對(duì)這個(gè)按鈕做一些加工處理。
我們將這三個(gè)按鈕分別表現(xiàn)為鼠標(biāo)移開、點(diǎn)擊后、鼠標(biāo)移上時(shí)的三種狀態(tài)，要做滑動(dòng)門菜單，需要將一個(gè)按鈕從中間剖開，左邊圖處放在左側(cè)，右邊圖片放在右側(cè)。要適應(yīng)文字加長的情況，還要將這個(gè)圖層寬度拉長一點(diǎn)，但這個(gè)圖片有很復(fù)雜的陰影特效，不能隨便拉伸，否則效果就不像了。我們就從中間給它剖開，將右邊圖片的左側(cè)向前平輔拉伸。如圖二所示

圖一
所以我們先將它如圖哪樣切成六片，然后將這六張圖片合并在一起。為什么要這樣呢？看看css sprites原理吧！這里就不詳述了，可以看我另一篇文章《制作一幅撲克牌系列一---css sprites圖片背景優(yōu)化技術(shù)》

圖二
上圖中第一和第二個(gè)圖片組成普通菜單樣式（默認(rèn)樣式），第三、第四個(gè)圖片組成翻滾樣式，第五和第六個(gè)圖片組成點(diǎn)擊后的菜單項(xiàng)樣式。
我們將陰影圖片專門提取出來，作成一張很小的背景圖片。

圖三
該要的圖形都準(zhǔn)備好了，接下來，我們將這個(gè)圖片加在菜單項(xiàng)上吧。一個(gè)按鈕要用到兩張圖片才能表現(xiàn)出來。地球人都知道，一個(gè)html標(biāo)簽只能裝一張圖片（如果你發(fā)現(xiàn)一個(gè)標(biāo)簽?zāi)苎b上兩張圖片，請(qǐng)及時(shí)告訴我，我請(qǐng)你吃飯?。?。哦！我的菜單結(jié)構(gòu)中每一項(xiàng)剛好有兩個(gè)標(biāo)簽，一個(gè)是li，它里面有一個(gè)A標(biāo)簽，剛好可以用來裝左右兩張圖片。Li用來裝左側(cè)的圖片，A用來裝右側(cè)的圖片。我真佩服我自己，這么好的點(diǎn)子都能想得出來，正在沾沾自喜的自我陶醉中…
別忙，哦，天啦，如果這樣來裝圖片，我的三種鼠標(biāo)翻滾狀態(tài)如何實(shí)現(xiàn)？我們都應(yīng)該知道，目前除了該死的IE6，其它的瀏覽器都支持li:hover偽類。然而要兼容各主流瀏覽器（這是我們的第8項(xiàng)目標(biāo)喲，別忘了！），這種方法是行不通的。IE6只能在A標(biāo)簽上應(yīng)用hover偽類，其它的標(biāo)簽它可是一概不理！
既然IE6只能在A標(biāo)簽上應(yīng)用hover偽類，那么我們要制作自適應(yīng)的滑動(dòng)門菜單，就需要在結(jié)構(gòu)上動(dòng)手腳了，看來只能在A標(biāo)簽中再加入一個(gè)標(biāo)簽，那么菜單的結(jié)構(gòu)就會(huì)變成下面這個(gè)樣子了。（注意：這兒就開始改變結(jié)構(gòu)了，雖然我一直想極力避免這種情況的發(fā)生，但好像要達(dá)到要求，這個(gè)標(biāo)簽是非加不可了。）
<li><a href="#none" title="冰極峰"><span>冰極峰</span></a></li>
我們?cè)贏標(biāo)簽中加入了一個(gè)span容器，它將文字內(nèi)容包括起來了。現(xiàn)在有兩個(gè)標(biāo)簽，可以裝兩張圖片了。我們將右側(cè)圖片放在A標(biāo)簽的背景中并向右靠齊，將左側(cè)圖片放在SPAN標(biāo)簽中并向左靠齊。這樣就能表現(xiàn)出一個(gè)完整的按鈕形狀。
還好，雖說多加了一個(gè)標(biāo)簽，但它還不是完全無語義。
好了，我們的準(zhǔn)備工作都差不多了，該給菜單穿上新衣服了。
#p#
本文一步一步手把手教你打造一個(gè)極酷的三層分離的標(biāo)準(zhǔn)滑動(dòng)門導(dǎo)航菜單，從思路、原理、步驟，手段可謂“無所不用其極”，即便你是菜鳥，相信你看了本文后，也能打造出屬于自己的超級(jí)漂亮的標(biāo)準(zhǔn)導(dǎo)航菜單。

我們要做成自適應(yīng)寬度的菜單，那么，我們就不能設(shè)置菜單的寬度值，所以我們不能像平時(shí)制作一個(gè)水平的有固定寬度的菜單的做法那樣，設(shè)置寬度，然后向左浮動(dòng)。如果這樣的話，每個(gè)菜單項(xiàng)的寬度不同時(shí)，要分別定義每一項(xiàng)的寬度，那就必須給每個(gè)菜單項(xiàng)定義一個(gè)ID或CLASS,并且這種方式也不利后臺(tái)程序的動(dòng)態(tài)循環(huán)輸出。
我們需要的是像內(nèi)聯(lián)元素一樣從左到右自動(dòng)在一行內(nèi)排列每個(gè)菜單項(xiàng)，那么我們就需要菜單以內(nèi)聯(lián)的方式表現(xiàn)出來，OK,我們就用display:inline吧，這是一個(gè)非常有用的屬性：它解析后的排列方式能達(dá)到我們的基本要求：在一行內(nèi)從左到右自動(dòng)排列標(biāo)簽元素，每一項(xiàng)寬度可以不同。
如果用上面這種屬性真的能滿足我們需要了，就沒有下面這一段文字內(nèi)容。
雖說這個(gè)屬性能滿足我們項(xiàng)目基本需要，可是它有一個(gè)非常致命的弱點(diǎn)：它不能設(shè)置寬度和高度值，不信你可以試試。它只表現(xiàn)為文字的默認(rèn)高度和寬度，超出這個(gè)寬高值后就自動(dòng)隱藏了。這樣一來，我在這里面是有背景圖片的，要表現(xiàn)出這個(gè)圖片效果，我們需要給定一個(gè)寬度和高度。這就不能做出我們的效果了，郁悶！還好，還有一個(gè)屬性：display:inline-block;它的表現(xiàn)就是我們需要的。
但是…這個(gè)屬性也有致命弱點(diǎn)，它只能被FF3等高級(jí)瀏覽器識(shí)別。其它的瀏覽器只能繞道而行了。啊哦！所以，統(tǒng)一瀏覽器標(biāo)準(zhǔn)是多么的重要??！看來，HACK也是我們逼不得已的一種解脫方式了。
還好，有高手早就找到了解決之道了。請(qǐng)大家先看看這兩篇文章。
相關(guān)教程：
《display:inline-block的應(yīng)用兩例》（秦歌）
《模擬兼容性的 inline-block 屬性》（懌飛）
原理我們都了解了，我們可以根據(jù)上面兩篇文章提供的技巧來做一個(gè)自適應(yīng)的菜單了。
我們先寫右側(cè)圖片的樣式，它是應(yīng)用在li元素的子節(jié)點(diǎn)A標(biāo)簽中的。
li a{display:inline-block; padding-right:30px; padding-top:10px; *padding-top:0; padding-bottom:13px; *padding-bottom:0; height:36px; background:url(images/button.gif) no-repeat right -36px; text-decoration:none; font-size:12px; color:#fff;}
我們先設(shè)置display:inline-block,然后我們?cè)儆胮adding來撐開它的邊距，讓它有一定的空間來裝填圖片。注意，這里的圖片路徑換成你自己的路徑。然后設(shè)置其它的樣式，如去掉下劃線，字體顏色，字體大小等等。設(shè)置圖片靠右對(duì)齊。
li a span{display:inline-block; padding-left:30px; padding-top:10px; *padding-top:0; padding-bottom:13px; padding-bottom:0; height:36px; line-height:36px; background:url(images/button.gif) no-repeat left top; font-weight:bold;}
按鈕左側(cè)的圖片是放在SPAN元素中的，將它的圖片向左對(duì)齊，也設(shè)置padding來撐開它的寬度和高度。
li a,li a span{display:inline;cursorointer;}
然后將它們的又設(shè)置回inline內(nèi)聯(lián)模式，觸發(fā)IE的haslayout特性。
在上面的代碼，我們還看到有一個(gè)HACK的應(yīng)用，*padding-bottom：0;和*padding-top：0;這用來解決IE與FF等瀏覽器不同效果的。不信你刪除后看看會(huì)有什么效果，在IE下高度伸展有問題。
好了下面該寫鼠標(biāo)移上時(shí)的效果了。
li a:hover{padding-right:30px;background:url(images/button.gif) no-repeat right -108px;}
li a:hover span{padding-left:30px;background:url(images/button.gif) no-repeat left -72px;font-weight:bold;}
再接下來是鼠標(biāo)點(diǎn)擊后的效果。
li a:active{padding-right:30px;background:url(images/button.gif) no-repeat right -180px;}
li a:active span{padding-left:30px;background:url(images/button.gif) no-repeat left -144px;font-weight:bold;}
ok,似乎大功告成，在不同瀏覽器下看看，似乎都能達(dá)到滿意的效果。下面是截圖：

圖四
現(xiàn)在純CSS版的滑動(dòng)門菜單基本上就做好了。
#p#
本文一步一步手把手教你打造一個(gè)極酷的三層分離的標(biāo)準(zhǔn)滑動(dòng)門導(dǎo)航菜單，從思路、原理、步驟，手段可謂“無所不用其極”，即便你是菜鳥，相信你看了本文后，也能打造出屬于自己的超級(jí)漂亮的標(biāo)準(zhǔn)導(dǎo)航菜單。

行為篇
上面的效果似乎離我的理想狀態(tài)的菜單又更進(jìn)了一步。不過也有暇癡。

如我點(diǎn)擊一個(gè)菜單后其焦點(diǎn)虛線框讓人感到非常討厭。 還有點(diǎn)擊后不能高亮記錄當(dāng)前選中項(xiàng)。

一步一步來解決吧！
為了除去此虛線框，我們可以在A標(biāo)簽屬性中加入onfocus="this.blur();"這句代碼，這是非常立竿見影的方法。那么就需要在結(jié)構(gòu)上添加一些內(nèi)容，可能就會(huì)變成下面這種結(jié)構(gòu)了：
<li><a href="#none" title="冰極峰" onfocus="this.blur();"><span>冰極峰博客</span></a></li>
可是，我們別忘了，要盡量避免“行為”給“結(jié)構(gòu)”造成干擾，這是我們?cè)陂_始就提出的要求。因此，這種方法基本上可以否決了。
另外我們想記錄當(dāng)前選中項(xiàng)菜單，這種制作方法有很多種，純CSS的做法可能會(huì)為每一個(gè)菜單項(xiàng)創(chuàng)建一個(gè)ID，然后用樣式表來設(shè)置不同頁面下調(diào)用高亮菜單的樣式。但這種方法又會(huì)對(duì)結(jié)構(gòu)添加一些字符。
上面兩個(gè)解決方案都需要在結(jié)構(gòu)中嵌入一些本來該用“動(dòng)作”來表現(xiàn)的東西，這會(huì)造成結(jié)構(gòu)冗余，可讀性較差，并且給人感覺頁面很亂。
我想該是JS粉墨登場(chǎng)的時(shí)候了...
我想在頁面一載入時(shí)就遍歷UL下的所有A標(biāo)簽，自動(dòng)給它加上一個(gè)樣式，這個(gè)樣式就是li a的樣式，我們可以將它改成一個(gè)class類，我們?nèi)∶麨閚ormal吧，方便JS動(dòng)態(tài)調(diào)用，并將li a:hover也換成一個(gè)class類，取名為over，作為JS動(dòng)態(tài)調(diào)用鼠標(biāo)移上時(shí)的效果，而li a:active就是當(dāng)前選中狀態(tài)了,取名為cur，將它們?nèi)齻€(gè)都在樣式表中作出修改。
在頁面載入后，用for循環(huán)給每個(gè)菜單A標(biāo)簽注入onclick，onmouseover，onmouseout事件，我們就可以摒棄用a:link，a:hover，a:active來摸擬三態(tài)效果了，因?yàn)檫@樣更便于控制當(dāng)前選中菜單的高亮效果。順便在這個(gè)循環(huán)中去掉討厭的虛線框（雖說在FF下只用一句樣式就可以搞定，但在IE中顯然是不行的！）。然后我們用cookie來記錄選中的菜單項(xiàng)ID，并設(shè)置其為5分鐘后過期。這樣無論你如何惡意刷屏，高亮菜單還是能記住。（是否采用cookie方式來保持高亮，這可以根據(jù)不同的項(xiàng)目需求來定。這種方式也有不好的地方，有同好者可以交流一下?。?
Js中創(chuàng)建了幾個(gè)基本的函數(shù)，看起來就像下面這樣（詳細(xì)代碼請(qǐng)參看源碼）：
var temp;/*菜單ID*/
function getObj(objName){return(document.getElementById(objName));}
window.onload =function() {
var obj=getObj("menu");/*ul的id*/
var obj_a=obj.getElementsByTagName("a");
number=obj_a.length;
for (var i=0,j=obj_a.length;i<j;i ){
obj_a[i].index=i;
obj_a[i].className="normal";
obj_a[i].onclick=function(){click(this)};
obj_a[i].onmouseover=function(){overme(this)};
obj_a[i].onmouseout=function(){outme(this)};
obj_a[i].onfocus=function(){this.blur()};/*去掉IE下的虛線框，ff用樣式解決*/
}
if (getCookie("show_a") != null) {
obj_a[getCookie("show_a")].className="cur";
temp=getCookie("show_a")
}
else{
var obj=getObj("menu");
var obj_a=obj.getElementsByTagName("a");
obj_a[0].className="cur";
}
}
//鼠標(biāo)滑過效果
function overme(o){/*代碼略，請(qǐng)看DEMO*/}
//鼠標(biāo)移開后效果
function outme(o){/*代碼略，請(qǐng)看DEMO*/}
//鼠標(biāo)點(diǎn)擊后效果
function click(o){/*代碼略，請(qǐng)看DEMO*/}
//設(shè)置cookie
function setCookie(sName,sValue,expireMinute) {/*代碼略，請(qǐng)看DEMO*/}
//獲取cookie
function getCookie(sName) {/*代碼略，請(qǐng)看DEMO*/}
加上以上的js后，我們控制了菜單的交互動(dòng)作，并精簡(jiǎn)了菜單的結(jié)構(gòu)，三層分離得比較徹底。這樣結(jié)構(gòu)未做作何過多的變動(dòng)，就達(dá)到我們理想的狀態(tài)。這樣的結(jié)構(gòu)在添加后臺(tái)代碼時(shí)，直接循環(huán)，只需要在菜單文字項(xiàng)的地方動(dòng)態(tài)輸出數(shù)據(jù)就行了，干凈利落。
#p#
本文一步一步手把手教你打造一個(gè)極酷的三層分離的標(biāo)準(zhǔn)滑動(dòng)門導(dǎo)航菜單，從思路、原理、步驟，手段可謂“無所不用其極”，即便你是菜鳥，相信你看了本文后，也能打造出屬于自己的超級(jí)漂亮的標(biāo)準(zhǔn)導(dǎo)航菜單。
現(xiàn)在在各種主流瀏覽器中看看你的成果，是否顯示得完全一樣呢！

圖五
至此，一個(gè)極酷的標(biāo)準(zhǔn)的滑動(dòng)門導(dǎo)航菜單就在你手中誕生了！
總結(jié)：我們?cè)谥谱鬟@些案例時(shí)，要隨時(shí)留意自己的結(jié)構(gòu)，讓它能保持良好的前后伸展性。盡量杜決冗余的無語義的標(biāo)簽，這在一個(gè)流水線似的工作環(huán)境中尤其顯得重要。給后端程序帶來巨大的方便的同時(shí)，也使自己的代碼看來比較舒服！
至此，一個(gè)極酷的標(biāo)準(zhǔn)的滑動(dòng)門導(dǎo)航菜單就在你手中誕生了！
總結(jié)：我們?cè)谥谱鬟@些案例時(shí)，要隨時(shí)留意自己的結(jié)構(gòu)，讓它能保持良好的前后伸展性。盡量杜決冗余的無語義的標(biāo)簽，這在一個(gè)流水線似的工作環(huán)境中尤其顯得重要。給后端程序帶來巨大的方便的同時(shí)，也使自己的代碼看來比較舒服！
本實(shí)例測(cè)試的兼容性環(huán)境是：
IE6/IE7/FF3/TT/OPERA9.63/谷歌瀏覽器測(cè)試通過，其它的瀏覽器請(qǐng)朋友幫忙測(cè)試一下。
運(yùn)行代碼框
<!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=utf-8" /> <title>冰極峰作品：手工打造極酷的分離式滑動(dòng)門導(dǎo)航菜單</title> <style type="text/css"> /*—————————————————————————————————————————— 作者：冰極峰 blog地址:http://www.cnblogs.com/binyong/ 時(shí)間：2009-3-15 ——————————————————————————————————————————*/ *{margin:0;padding:0;}/*將它統(tǒng)一成一個(gè)模樣吧，不然在各個(gè)瀏覽器下，你會(huì)死得很難看*/ body{background:#999;} a{outline:none;} #wrapper{margin:100px auto 20px;text-align:center;width:640px;} ul{list-style:none;}/*去掉小圓點(diǎn)吧*/ li{float:left;height:53px;background:url(/articleimg/2009/03/6511/bg.gif) repeat-x left bottom;overflow:hidden;}/*水平排列并來點(diǎn)間距吧，不要把我擠得太緊了。*/ .normal,.over,.cur{display:inline-block;padding-right:30px;padding-top:10px;*padding-top:0;padding-bottom:13px;*padding-bottom:0;height:36px;background:url(/articleimg/2009/03/6511/button.gif) no-repeat right -36px; text-decoration:none;font-size:12px;color:#fff;} .normal span,.over span,.cur span{display:inline-block;padding-left:30px;padding-top:10px;*padding-top:0;padding-bottom:13px;*padding-bottom:0;height:36px;line-height:36px;background:url(/articleimg/2009/03/6511/button.gif) no-repeat left top;font-weight:bold;} .normal,.normal span,.over,.over span,.cur,.cur span{display:inline;cursor:pointer;} .over{background:url(/articleimg/2009/03/6511/button.gif) no-repeat right -108px;} .over span{background:url(/articleimg/2009/03/6511/button.gif) no-repeat left -72px;} .cur{background:url(/articleimg/2009/03/6511/button.gif) no-repeat right -180px;} .cur span{background:url(/articleimg/2009/03/6511/button.gif) no-repeat left -144px;} .blog{clear:both;margin:0px auto;text-align:center;width:640px;color:#fff;} </style> </head> <body> <div id="wrapper"> <div id="nav"> <ul id="menu"> <li><a href="#none" title="首頁" ><span>首　頁</span></a></li> <li><a href="#none" title="新隨筆"><span>新隨筆</span></a></li> <li><a href="#none" title="聯(lián)系"><span>聯(lián)　系</span></a></li> <li><a href="#none" title="管理"><span>管　理</span></a></li> <li><a href="#none" title="訂閱"><span>訂　閱</span></a></li> <li><a href="#none" title="冰極峰"><span>冰極峰博客</span></a></li> </ul> </div> </div> <div class="blog">歡迎光臨我的博客:<a href="http://www.cnblogs.com/binyong/" target="_blank">http://www.cnblogs.com/binyong/</a></div> </body> </html> <script type="text/javascript"> /*三態(tài)高亮菜單*/ // 作者:冰極峰 // 時(shí)間:2009-3-15 // 作用:此腳本用于設(shè)置三態(tài)導(dǎo)航菜單的高亮顯示. function getObj(objName){return(document.getElementById(objName));} //全局變量,菜單數(shù)量和當(dāng)前選中菜單的序號(hào) var temp;/*菜單ID*/ window.onload =function() { var obj=getObj("menu");/*ul的id*/ var obj_a=obj.getElementsByTagName("a"); number=obj_a.length; for (var i=0,j=obj_a.length;i<j;i ){ obj_a[i].index=i; obj_a[i].className="normal"; obj_a[i].onclick=function(){click(this)}; obj_a[i].onmouseover=function(){overme(this)}; obj_a[i].onmouseout=function(){outme(this)}; obj_a[i].onfocus=function(){this.blur()};/*去掉IE下的虛線框*/ } if (getCookie("show_a") != null) { obj_a[getCookie("show_a")].className="cur"; temp=getCookie("show_a") } else{ var obj=getObj("menu"); var obj_a=obj.getElementsByTagName("a"); obj_a[0].className="cur"; } } //鼠標(biāo)滑過效果 function overme(o){ if (temp!=o.index) o.className="over";/*翻滾色樣式*/ } //鼠標(biāo)移開后效果 function outme(o){ if (temp!=o.index) o.className="normal";/*翻滾色樣式*/ } //鼠標(biāo)點(diǎn)擊效果 function click(o){ var obj=getObj("menu"); var obj_a=obj.getElementsByTagName("a"); for (var i=0,j=obj_a.length;i<j;i ){ obj_a[i].className="normal"; } o.className="cur"; o.blur(); setCookie("show_a",o.index,1);/*設(shè)置1分鐘后失效*/ temp=o.index } // --- 設(shè)置cookie function setCookie(sName,sValue,expireMinute) { var cookieString = sName "=" escape(sValue); if (expireMinute>0) {//設(shè)置過期時(shí)間 var date = new Date(); //date.setTime(date.getTime expireHours * 3600 * 1000);//時(shí)間單位=毫秒,以小時(shí)為參數(shù) date.setTime(date.getTime expireMinute * 60 * 1000);//時(shí)間單位=毫秒,以分鐘為參數(shù) cookieString = cookieString "; expire=" date.toGMTString(); } document.cookie = cookieString;//寫cookie } //--- 獲取cookie function getCookie(sName) { var aCookie = document.cookie.split("; "); for (var j=0; j < aCookie.length; j ){ var aCrumb = aCookie[j].split("="); if (escape(sName) == aCrumb[0]) return unescape(aCrumb[1]); } return null; } </script>
[Ctrl A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
如果看不到效果，請(qǐng)下載下面的壓縮包：menu.rar