行為篇
上面的效果似乎離我的理想狀態(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中顯然是不行的。H缓笪覀冇胏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ā)表評論。
|