本文一步一步手把手教你打造一個極酷的三層分離的標準滑動門導航菜單，從思路、原理、步驟，手段可謂“無所不用其極”，即便你是菜鳥，相信你看了本文后，也能打造出屬于自己的超級漂亮的標準導航菜單。

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

如我點擊一個菜單后其焦點虛線框讓人感到非常討厭。 還有點擊后不能高亮記錄當前選中項。

一步一步來解決吧！
為了除去此虛線框，我們可以在A標簽屬性中加入onfocus="this.blur();"這句代碼，這是非常立竿見影的方法。那么就需要在結(jié)構(gòu)上添加一些內(nèi)容，可能就會變成下面這種結(jié)構(gòu)了：
<li><a href="#none" title="冰極峰" onfocus="this.blur();"><span>冰極峰博客</span></a></li>
可是，我們別忘了，要盡量避免“行為”給“結(jié)構(gòu)”造成干擾，這是我們在開始就提出的要求。因此，這種方法基本上可以否決了。
另外我們想記錄當前選中項菜單，這種制作方法有很多種，純CSS的做法可能會為每一個菜單項創(chuàng)建一個ID，然后用樣式表來設置不同頁面下調(diào)用高亮菜單的樣式。但這種方法又會對結(jié)構(gòu)添加一些字符。
上面兩個解決方案都需要在結(jié)構(gòu)中嵌入一些本來該用“動作”來表現(xiàn)的東西，這會造成結(jié)構(gòu)冗余，可讀性較差，并且給人感覺頁面很亂。
我想該是JS粉墨登場的時候了...
我想在頁面一載入時就遍歷UL下的所有A標簽，自動給它加上一個樣式，這個樣式就是li a的樣式，我們可以將它改成一個class類，我們?nèi)∶麨閚ormal吧，方便JS動態(tài)調(diào)用，并將li a:hover也換成一個class類，取名為over，作為JS動態(tài)調(diào)用鼠標移上時的效果，而li a:active就是當前選中狀態(tài)了,取名為cur，將它們?nèi)齻€都在樣式表中作出修改。
在頁面載入后，用for循環(huán)給每個菜單A標簽注入onclick，onmouseover，onmouseout事件，我們就可以摒棄用a:link，a:hover，a:active來摸擬三態(tài)效果了，因為這樣更便于控制當前選中菜單的高亮效果。順便在這個循環(huán)中去掉討厭的虛線框（雖說在FF下只用一句樣式就可以搞定，但在IE中顯然是不行的！）。然后我們用cookie來記錄選中的菜單項ID，并設置其為5分鐘后過期。這樣無論你如何惡意刷屏，高亮菜單還是能記住。（是否采用cookie方式來保持高亮，這可以根據(jù)不同的項目需求來定。這種方式也有不好的地方，有同好者可以交流一下?。?
Js中創(chuàng)建了幾個基本的函數(shù)，看起來就像下面這樣（詳細代碼請參看源碼）：
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";
}
}
//鼠標滑過效果
function overme(o){/*代碼略，請看DEMO*/}
//鼠標移開后效果
function outme(o){/*代碼略，請看DEMO*/}
//鼠標點擊后效果
function click(o){/*代碼略，請看DEMO*/}
//設置cookie
function setCookie(sName,sValue,expireMinute) {/*代碼略，請看DEMO*/}
//獲取cookie
function getCookie(sName) {/*代碼略，請看DEMO*/}
加上以上的js后，我們控制了菜單的交互動作，并精簡了菜單的結(jié)構(gòu)，三層分離得比較徹底。這樣結(jié)構(gòu)未做作何過多的變動，就達到我們理想的狀態(tài)。這樣的結(jié)構(gòu)在添加后臺代碼時，直接循環(huán)，只需要在菜單文字項的地方動態(tài)輸出數(shù)據(jù)就行了，干凈利落。

最新評論