|
行為篇
上面的效果似乎離我的理想狀態(tài)的菜單又更進了一步。不過也有暇癡。
- 如我點擊一個菜單后其焦點虛線框讓人感到非常討厭。
- 還有點擊后不能高亮記錄當前選中項。
一步一步來解決吧！
為了除去此虛線框，我們可以在A標簽屬性中加入onfocus="this.blur();"這句代碼，這是非常立竿見影的方法。那么就需要在結構上添加一些內容，可能就會變成下面這種結構了：
<li><a href="#none" title="冰極峰" onfocus="this.blur();"><span>冰極峰博客</span></a></li>
可是，我們別忘了，要盡量避免“行為”給“結構”造成干擾，這是我們在開始就提出的要求。因此，這種方法基本上可以否決了。
另外我們想記錄當前選中項菜單，這種制作方法有很多種，純CSS的做法可能會為每一個菜單項創(chuàng)建一個ID，然后用樣式表來設置不同頁面下調用高亮菜單的樣式。但這種方法又會對結構添加一些字符。
上面兩個解決方案都需要在結構中嵌入一些本來該用“動作”來表現的東西，這會造成結構冗余，可讀性較差，并且給人感覺頁面很亂。
我想該是JS粉墨登場的時候了...
我想在頁面一載入時就遍歷UL下的所有A標簽，自動給它加上一個樣式，這個樣式就是li a的樣式，我們可以將它改成一個class類，我們取名為normal吧，方便JS動態(tài)調用，并將li a:hover也換成一個class類，取名為over，作為JS動態(tài)調用鼠標移上時的效果，而li a:active就是當前選中狀態(tài)了,取名為cur，將它們三個都在樣式表中作出修改。
在頁面載入后，用for循環(huán)給每個菜單A標簽注入onclick，onmouseover，onmouseout事件，我們就可以摒棄用a:link，a:hover，a:active來摸擬三態(tài)效果了，因為這樣更便于控制當前選中菜單的高亮效果。順便在這個循環(huán)中去掉討厭的虛線框（雖說在FF下只用一句樣式就可以搞定，但在IE中顯然是不行的�。Ｈ缓笪覀冇胏ookie來記錄選中的菜單項ID，并設置其為5分鐘后過期。這樣無論你如何惡意刷屏，高亮菜單還是能記住。（是否采用cookie方式來保持高亮，這可以根據不同的項目需求來定。這種方式也有不好的地方，有同好者可以交流一下！）
Js中創(chuà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";
}
}
//鼠標滑過效果
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后，我們控制了菜單的交互動作，并精簡了菜單的結構，三層分離得比較徹底。這樣結構未做作何過多的變動，就達到我們理想的狀態(tài)。這樣的結構在添加后臺代碼時，直接循環(huán)，只需要在菜單文字項的地方動態(tài)輸出數據就行了，干凈利落。
出處：藍色理想
責任編輯：bluehearts
上一頁 手工打造分離式滑動門導航菜單 [2] 下一頁 手工打造分離式滑動門導航菜單 [5]
◎進入論壇網頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 4 頁 手工打造分離式滑動門導航菜單 [4]
