CSS實例:超酷的網(wǎng)站導(dǎo)航按鈕
互聯(lián)網(wǎng) 發(fā)布時間:2009-04-02 19:35:20 作者:佚名
我要評論

網(wǎng)頁制作Webjx文章簡介:本文一步一步手把手教你打造一個極酷的三層分離的標(biāo)準(zhǔn)滑動門導(dǎo)航菜單.
導(dǎo)言:本文一步一步手把手教你打造一個極酷的三層分離的標(biāo)準(zhǔn)滑動門導(dǎo)航菜單,從思路、原理、步驟,手段可謂“無所不用其極&r
本文一步一步手把手教你打造一個極酷的三層分離的標(biāo)準(zhǔn)滑動門導(dǎo)航菜單.
導(dǎo)言:本文一步一步手把手教你打造一個極酷的三層分離的標(biāo)準(zhǔn)滑動門導(dǎo)航菜單,從思路、原理、步驟,手段可謂“無所不用其極”,即便你是菜鳥,相信你看了本文后,也能打造出屬于自己的超級漂亮的標(biāo)準(zhǔn)導(dǎo)航菜單。本菜單無冗余結(jié)構(gòu),利于數(shù)據(jù)動態(tài)輸出,非常適合于用在平常的項目中去。本教程中講到了基本的滑動門原理,相信對那些還在這條路上摸索的朋友會有一些幫助!當(dāng)然如果有什么錯誤和問題,也歡迎大家提出來探討。
本導(dǎo)航菜單想達(dá)到的理想目標(biāo)是:
1.漂亮,有個性。
2.結(jié)構(gòu)清晰,語義明確,無冗余標(biāo)簽。
3.表現(xiàn)、結(jié)構(gòu)、行為三層分離,無侵入式。
4.有利于后臺程序的數(shù)據(jù)輸出。
5.菜單有三態(tài)效果的變化。
6.能高亮記錄點擊后的菜單項。
7.自適應(yīng)文字的寬度。當(dāng)文字內(nèi)容長短變化時按鈕能適時變化。
8.兼容各大主流瀏覽器。
讓我們一步一步的實現(xiàn)這種理想的菜單吧!
在論壇中經(jīng)??吹胶芏嗯笥言谥谱鞑藛危f實話,不是結(jié)構(gòu)冗余,就是有形無神,或有神無貌。而我們現(xiàn)在要打造的就是極品菜單。無論您是新手或老手,在這個教程中都應(yīng)該有所收獲。
一個理想的菜單其結(jié)構(gòu)應(yīng)該是干凈的、無冗余、分離的,然而因為種種的原因,會為它加上許多無意義的東西,到最后,會離“干凈”越來越遠(yuǎn)。所以在做菜單前,有些原則是在整個制作過程一直要牢記的,不能以任何外力所阻擾。
結(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)簽,每個標(biāo)簽都有各自的語義。我們在瀏覽器中看下,啊哦,確實很簡陋,就是原始的文字,像什么,嗯,就像我們在菜館里點菜用的菜單,可能比那個還簡單,并且每個菜單前面還有一個小圓點!哦,天啦,離我們的漂亮菜單還差好大一截呢!
樣式篇
好吧,它現(xiàn)在還只是一個骨架,我們稍微給它美化一下,加點簡單的樣式,至少應(yīng)該去掉小圓點吧,并且讓它水平排列吧!
好,加點樣式:
*{margin:0;padding:0;}/*將它統(tǒng)一成一個模樣吧,不然在各個瀏覽器下,會死得很難看*/
ul{list-style:none}/*去掉小圓點吧*/
li{float:left;margin-left:10px;}/*水平排列并來點間距吧,不要把我擠得太緊了。*/
嗯,現(xiàn)在看看,達(dá)到小目標(biāo)了。
骨架有了,接下來就是給每個菜單項穿上漂亮的衣裳。
要滿足第一項要求,首先要有一個漂亮的按鈕,自已畫一個,哦,我不是美術(shù)人員,難!不過,別恢心,網(wǎng)絡(luò)之大,無奇不有,說不定人家已經(jīng)有做好的,google一下,還真發(fā)現(xiàn)了一個,感謝啊!
有了設(shè)計好的按鈕源碼,省去設(shè)計的一環(huán),真好。但要做成三態(tài)按鈕,還需要我們改造一下這個按鈕??吹降谄邨l目標(biāo)了嗎,我們是要做自適應(yīng)的按鈕,所以要對這個按鈕做一些加工處理。
我們將這三個按鈕分別表現(xiàn)為鼠標(biāo)移開、點擊后、鼠標(biāo)移上時的三種狀態(tài),要做滑動門菜單,需要將一個按鈕從中間剖開,左邊圖處放在左側(cè),右邊圖片放在右側(cè)。要適應(yīng)文字加長的情況,還要將這個圖層寬度拉長一點,但這個圖片有很復(fù)雜的陰影特效,不能隨便拉伸,否則效果就不像了。我們就從中間給它剖開,將右邊圖片的左側(cè)向前平輔拉伸。如圖二所示

圖一
所以我們先將它如圖哪樣切成六片,然后將這六張圖片合并在一起。為什么要這樣呢?看看css sprites原理吧!

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

圖三
該要的圖形都準(zhǔn)備好了,接下來,我們將這個圖片加在菜單項上吧。一個按鈕要用到兩張圖片才能表現(xiàn)出來。地球人都知道,一個標(biāo)簽只能裝一張圖片(如果你發(fā)現(xiàn)一個標(biāo)簽?zāi)苎b上兩張圖片,請及時告訴我,我請你吃飯?。E?!我的菜單結(jié)構(gòu)中每一項剛好有兩個標(biāo)簽,一個是li,它里面有一個A標(biāo)簽,剛好可以用來裝左右兩張圖片。Li用來裝左側(cè)的圖片,A用來裝右側(cè)的圖片。我真佩服我自己,這么好的點子都能想得出來,正在沾沾自喜的自我陶醉中…
別忙,哦,天啦,如果這樣來裝圖片,我的三種鼠標(biāo)翻滾狀態(tài)如何實現(xiàn)?我們都應(yīng)該知道,目前除了該死的IE6,其它的瀏覽器都支持li:hover偽類。然而要兼容各主流瀏覽器(這是我們的第8項目標(biāo)喲,別忘了?。@種方法是行不通的。IE6只能在A標(biāo)簽上應(yīng)用偽類,其它的標(biāo)簽它可是一概不理!
既然IE6只能在A標(biāo)簽上應(yīng)用hover偽類,那么我們要制作自適應(yīng)的滑動門菜單,就需要在結(jié)構(gòu)上動手腳了,看來只能在A標(biāo)簽中再加入一個標(biāo)簽,那么菜單的結(jié)構(gòu)就會變成下面這個樣子了。(注意:這兒就開始改變結(jié)構(gòu)了,雖然我一直想極力避免這種情況的發(fā)生,但好像要達(dá)到要求,這個標(biāo)簽是非加不可了。)
<li><a href="#none" title="冰極峰"><span>冰極峰</span></a></li>
我們在A標(biāo)簽中加入了一個span容器,它將文字內(nèi)容包括起來了?,F(xiàn)在有兩個標(biāo)簽,可以裝兩張圖片了。我們將右側(cè)圖片放在A標(biāo)簽的背景中并向右靠齊,將左側(cè)圖片放在SPAN標(biāo)簽中并向左靠齊。這樣就能表現(xiàn)出一個完整的按鈕形狀。
還好,雖說多加了一個標(biāo)簽,但它還不是完全無語義。
好了,我們的準(zhǔn)備工作都差不多了,該給菜單穿上新衣服了。
我們要做成自適應(yīng)寬度的菜單,那么,我們就不能設(shè)置菜單的寬度值,所以我們不能像平時制作一個水平的有固定寬度的菜單的做法那樣,設(shè)置寬度,然后向左浮動。如果這樣的話,每個菜單項的寬度不同時,要分別定義每一項的寬度,那就必須給每個菜單項定義一個ID或CLASS,并且這種方式也不利后臺程序的動態(tài)循環(huán)輸出。
我們需要的是像內(nèi)聯(lián)元素一樣從左到右自動在一行內(nèi)排列每個菜單項,那么我們就需要菜單以內(nèi)聯(lián)的方式表現(xiàn)出來,OK,我們就用display:inline吧,這是一個非常有用的屬性:它解析后的排列方式能達(dá)到我們的基本要求:在一行內(nèi)從左到右自動排列標(biāo)簽元素,每一項寬度可以不同。
如果用上面這種屬性真的能滿足我們需要了,就沒有下面這一段文字內(nèi)容。
雖說這個屬性能滿足我們項目基本需要,可是它有一個非常致命的弱點:它不能設(shè)置寬度和高度值,不信你可以試試。它只表現(xiàn)為文字的默認(rèn)高度和寬度,超出這個寬高值后就自動隱藏了。這樣一來,我在這里面是有背景圖片的,要表現(xiàn)出這個圖片效果,我們需要給定一個寬度和高度。這就不能做出我們的效果了,郁悶!還好,還有一個屬性:display:inline-block;它的表現(xiàn)就是我們需要的。
但是…這個屬性也有致命弱點,它只能被FF3等高級瀏覽器識別。其它的瀏覽器只能繞道而行了。啊哦!所以,統(tǒng)一瀏覽器是多么的重要啊!看來,HACK也是我們逼不得已的一種解脫方式了。
原理我們都了解了,我們可以根據(jù)上面兩篇文章提供的技巧來做一個自適應(yīng)的菜單了。
我們先寫右側(cè)圖片的樣式,它是應(yīng)用在li元素的子節(jié)點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,然后我們再用padding來撐開它的邊距,讓它有一定的空間來裝填圖片。注意,這里的圖片路徑換成你自己的路徑。然后設(shè)置其它的樣式,如去掉下劃線,字體顏色,字體大小等等。設(shè)置圖片靠右對齊。
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元素中的,將它的圖片向左對齊,也設(shè)置padding來撐開它的寬度和高度。
li a,li a span{display:inline;cursor:pointer;}
然后將它們的又設(shè)置回inline內(nèi)聯(lián)模式,觸發(fā)IE的haslayout特性。
在上面的代碼,我們還看到有一個HACK的應(yīng)用,*padding-bottom:0;和*padding-top:0;這用來解決IE與FF等瀏覽器不同效果的。不信你刪除后看看會有什么效果,在IE下高度伸展有問題。
好了下面該寫鼠標(biāo)移上時的效果了。
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)點擊后的效果。
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版的滑動門菜單基本上就做好了。
行為篇
上面的效果似乎離我的理想狀態(tài)的菜單又更進(jìn)了一步。不過也有暇癡。
1.如我點擊一個菜單后其焦點虛線框讓人感到非常討厭。
2.還有點擊后不能高亮記錄當(dāng)前選中項。
一步一步來解決吧!
為了除去此虛線框,我們可以在A標(biāo)簽屬性中加入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)”造成干擾,這是我們在開始就提出的要求。因此,這種方法基本上可以否決了。
另外我們想記錄當(dāng)前選中項菜單,這種制作方法有很多種,純CSS的做法可能會為每一個菜單項創(chuàng)建一個ID,然后用樣式表來設(shè)置不同頁面下調(diào)用高亮菜單的樣式。但這種方法又會對結(jié)構(gòu)添加一些字符。
上面兩個解決方案都需要在結(jié)構(gòu)中嵌入一些本來該用“動作”來表現(xiàn)的東西,這會造成結(jié)構(gòu)冗余,可讀性較差,并且給人感覺頁面很亂。
我想該是JS粉墨登場的時候了...
我想在頁面一載入時就遍歷UL下的所有A標(biāo)簽,自動給它加上一個樣式,這個樣式就是li a的樣式,我們可以將它改成一個class類,我們?nèi)∶麨閚ormal吧,方便JS動態(tài)調(diào)用,并將li a:hover也換成一個class類,取名為over,作為JS動態(tài)調(diào)用鼠標(biāo)移上時的效果,而li a:active就是當(dāng)前選中狀態(tài)了,取名為cur,將它們?nèi)齻€都在樣式表中作出修改。
在頁面載入后,用for循環(huán)給每個菜單A標(biāo)簽注入onclick,onmouseover,onmouseout事件,我們就可以摒棄用a:link,a:hover,a:active來摸擬三態(tài)效果了,因為這樣更便于控制當(dāng)前選中菜單的高亮效果。順便在這個循環(huán)中去掉討厭的虛線框(雖說在FF下只用一句樣式就可以搞定,但在IE中顯然是不行的?。H缓笪覀冇胏ookie來記錄選中的菜單項ID,并設(shè)置其為5分鐘后過期。這樣無論你如何惡意刷屏,高亮菜單還是能記住。(是否采用cookie方式來保持高亮,這可以根據(jù)不同的項目需求來定。這種方式也有不好的地方,有同好者可以交流一下?。?
Js中創(chuàng)建了幾個基本的函數(shù),看起來就像下面這樣(詳細(xì)代碼請參看源碼):
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){/*代碼略,請看DEMO*/}
//鼠標(biāo)移開后效果
function outme(o){/*代碼略,請看DEMO*/}
//鼠標(biāo)點擊后效果
function click(o){/*代碼略,請看DEMO*/}
//設(shè)置cookie
function setCookie(sName,sValue,expireMinute) {/*代碼略,請看DEMO*/}
//獲取cookie
function getCookie(sName) {/*代碼略,請看DEMO*/}
加上以上的js后,我們控制了菜單的交互動作,并精簡了菜單的結(jié)構(gòu),三層分離得比較徹底。這樣結(jié)構(gòu)未做作何過多的變動,就達(dá)到我們理想的狀態(tài)。這樣的結(jié)構(gòu)在添加后臺代碼時,直接循環(huán),只需要在菜單文字項的地方動態(tài)輸出數(shù)據(jù)就行了,干凈利落。
現(xiàn)在在各種主流瀏覽器中看看你的成果,是否顯示得完全一樣呢!

圖五
至此,一個極酷的標(biāo)準(zhǔn)的滑動門導(dǎo)航菜單就在你手中誕生了!
總結(jié):我們在制作這些案例時,要隨時留意自己的結(jié)構(gòu),讓它能保持良好的前后伸展性。盡量杜決冗余的無語義的標(biāo)簽,這在一個流水線似的工作環(huán)境中尤其顯得重要。給后端程序帶來巨大的方便的同時,也使自己的代碼看來比較舒服!
本實例測試的兼容性環(huán)境是:
IE6/IE7/FF3/TT/OPERA9.63/谷歌瀏覽器測試通過,其它的瀏覽器請朋友幫忙測試一下。
下載demo
相關(guān)文章
- 這篇文章主要為大家介紹了CSS實現(xiàn)有立體感的橫向按鈕式菜單效果代碼,可實現(xiàn)鼠標(biāo)滑過呈現(xiàn)按鈕按下的效果,具有極強的3D立體效果,涉及css基于hover屬性的border邊框設(shè)置技巧,2015-09-15
CSS實現(xiàn)自適應(yīng)寬度的菜單按鈕效果代碼
這篇文章主要為大家介紹了CSS實現(xiàn)自適應(yīng)寬度的菜單按鈕效果代碼,實例分析了css針對頁面自適應(yīng)寬度的相關(guān)設(shè)置技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-11HTML5+CSS3實現(xiàn)的鼠標(biāo)懸停動畫菜單按鈕特效源碼
今天要給給位分享一款基于CSS3的鼠標(biāo)懸停動畫菜單按鈕,這款菜單是由一個個小按鈕組成,當(dāng)我們將鼠標(biāo)滑過菜單項時,按鈕上的圖標(biāo)將出現(xiàn)懸浮的動畫特效2015-02-02- 這款菜單源碼功能非常的強大,在下拉菜單中不僅擁有背景色漸變的菜單項,而且還帶有分享按鈕的菜單項,為了讓菜單更加美觀,每一個菜單項都帶有非常漂亮的小圖標(biāo),而且在下2014-08-05
純CSS3實現(xiàn)的顏色漸變的一級橫向?qū)Ш桨粹o菜單效果
無需任何JS代碼即可實現(xiàn)顏色漸變的按鈕式菜單,菜單為一級橫向?qū)Ш?/div> 2013-07-01無需任何js代碼,既可以實現(xiàn)按鈕的色彩漸變,伴隨鼠標(biāo)的離開菜單的顏色會慢慢變化2013-06-03網(wǎng)頁制作Webjx文章簡介:在當(dāng)今標(biāo)準(zhǔn)的Web設(shè)計中,CSS是最重要的組成部分。為了讓大家更好的理解如何通過CSS來設(shè)計,Webjx為大家收集了30個基于CSS的導(dǎo)航菜單和按鈕的CSS設(shè)2009-04-02這篇文章主要介紹了CSS實現(xiàn)菜單按鈕動畫,本文通過實例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2019-04-12最新評論