本文一步一步手把手教你打造一個(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ù)就行了，干凈利落。