閑話網(wǎng)站左側(cè)導(dǎo)航的實(shí)現(xiàn)

1、閑話網(wǎng)站左側(cè)導(dǎo)航的實(shí)現(xiàn)好久沒(méi)玩CSS布局了，對(duì)于大多數(shù)在已有Webg架上開(kāi)發(fā)項(xiàng)目的童鞋，極少情況會(huì)用到Webg架+ExtJs 庫(kù)，對(duì) CSScss來(lái)布局和美化頁(yè)面。比如我現(xiàn)用所在項(xiàng)目用的是公司的一個(gè)現(xiàn)有僅僅是一些像給某個(gè)元素?fù)Q背景圖之類的簡(jiǎn)單的應(yīng)用。今天在博客園閑逛，無(wú)聊看了一下博客 園首頁(yè)左側(cè)的網(wǎng)站導(dǎo)航的代碼，然后我覺(jué)得應(yīng)該有更好的實(shí)現(xiàn)方式(至少我認(rèn)為)。博客園之 所以現(xiàn)在的方式實(shí)現(xiàn)左側(cè)導(dǎo)航，估計(jì)是為了更好的與后臺(tái)業(yè)務(wù)結(jié)合吧。當(dāng)我們要實(shí)現(xiàn)一個(gè)功能時(shí)，往往有很多解決方式，有些好的方式也往往很難分出絕對(duì)的優(yōu) 劣。對(duì)于一個(gè)功能的實(shí)現(xiàn)，如果你試圖去尋找一種最優(yōu)的解決方案，那可能是一種無(wú)窮無(wú)盡的 工作

2、，而現(xiàn)實(shí)工作中我們也不可能花太多的時(shí)間去尋找更多更佳的解決方案。這種“程序員精 神”的“尋找”工作只能作為我們平時(shí)閑的無(wú)聊時(shí)的一種消遣。如果此時(shí)你正好也很閑，不訪 和我一起探討探討網(wǎng)站左側(cè)導(dǎo)航的實(shí)現(xiàn)。雖然實(shí)現(xiàn)起來(lái)很簡(jiǎn)單，但你的方式是不是一定是最佳 的呢？廢話不多說(shuō)，讓我們先來(lái)看看博客園的實(shí)現(xiàn)吧。為了把重點(diǎn)放在 css上，我對(duì)博客園的代碼進(jìn)行了一些改變，但大體邏輯是一樣的(感興趣的話可以查看博客園的前臺(tái)代碼)。HTML部分(后臺(tái)生成)：d=cate_wrap網(wǎng)站分類.NET技術(shù)(9) 編程語(yǔ)言(7) 軟件設(shè)計(jì)(0).NET新手區(qū)(0)ASP.NET(2)C#(4)WinForm(1)Silver

3、light(0)WCF(0)CLR(0)WPF(6)Java(3)C+(2)PHP(2)Delphi(0)li架構(gòu)設(shè)計(jì)(0)li面向?qū)ο?3)li設(shè)計(jì)模式(0)CSS部分：全局設(shè)置*/body,div, ul, li margin:。； padding:0; st-style:none; lor:#666; text-decoration:none; 左邊導(dǎo)航*/rap position: absolute; left: 10px; top: 50px; width: 160px; padding-top: 0px; rap a text-decoration:none;itle_wrap h

4、eight:20px;padding-left:8px;background-color:#009900;color:#FCFCFC;cursor:detem border:1px solid #ababab; background-color:#FFF; tem li cursorpointer; height: 30px; line-height: 30px; border-bottom: 1px solid #abab-left: 8px;background: url(arrow.png); tem li.over color:#FFF;background-color: #FF932

5、0;ub_wrap cursor:pointer; position: absolute; left: 148px; display: none; width: 150px; bor ababab;border-bottom:2px solid #ff8500; line-height: 2em; background-color:#FFF; ub_wrap li padding-left: 10px; height: 28px;border-bottom:1px solid #ababab; ub_wrap li.over color:#FFF;background-color: #FF93

6、20;JS部分(博客園是把 mouseover和mouseout的調(diào)用放在html中，這里我放在 JS中動(dòng)態(tài) 綁定，區(qū)別不大)：tion () /給第一級(jí)分類添加mouseover、mouseout效果$(#cate_item li).mouseover(function () /通過(guò)截取id數(shù)字部分動(dòng)態(tài)控曲子分類的wrap塊顯示位置var top =).addClass(over).attr(id).substr($(this).attr(id).lastIndexOf(_)+1$(#cate_sub_ + top).show().css(top, top + px);).mouseout(

7、function () var top = $(this).removeClass(over).attr(id).substr($(this).attr(id).lastIndexOf(_) + 1);$(#cate_sub_ + top).hide(););/這里還需要給子分類的wrap塊添加mouseover、mouseout事件，控制當(dāng)前的第一分類的顯示效果$(.cate_sub_wrap).mouseover(function () var top = $(this).attr(id).substr($(this).attr(id).lastIndexOf(_) + 1);$(#cat

8、e_item_ + top).addClass(over);$(this).show().css(top, top + px);).mouseout(function () var top = $(this).attr(id).substr($(this).attr(id).lastIndexOf(_) + 1);$(#cate_item_ + top).removeClass(over);$(this).hide().css(top, top + px););/給第二級(jí)分類添加mouseover、mouseout效果$(.cate_sub_wrap li).mouseover(functio

9、n () $(this).addClass(over);).mouseout(function () $(this).removeClass(over);););效果圖:代碼很簡(jiǎn)單，不需要作解釋。主要是讓大家了解一下這種思路。下面用另一種方式實(shí)現(xiàn), 這個(gè)過(guò)程我盡量講的詳細(xì)一點(diǎn)。步一步來(lái)，用 VS先創(chuàng)建一個(gè)html文件，在body元素中添加一個(gè) div層，如下:iv id=cate_nav_wrapdiv接下來(lái)用jQuery模擬后臺(tái)動(dòng)態(tài)創(chuàng)建網(wǎng)站分類html的ul和li元素，如下：tion () /動(dòng)態(tài)創(chuàng)建用于網(wǎng)站導(dǎo)航的ul、li元素var $ul = $(#cate_nav_wrap).appe

10、nd().children(ul);for (var i = 0; i 10; i+) var $sub_ul = $ul.append().children(li).eq(i).appenref=# 第一級(jí)分類+ i + ”).append().children( for (var j = 0; j 6; j+) $sub_ul.append().children(li).eq(j).append(分類+ i+j + ););上面的jQuery代碼會(huì)生成如下 html元素：第一級(jí)分類 0分類 01分類 04第二級(jí)分類 00第二級(jí)分類02第二級(jí)分類 03第二級(jí)分類05第一級(jí)分類 1第二級(jí)分類

11、10分類 11 第二級(jí)分類 12第二級(jí)分類 13第二級(jí)分類 14第二級(jí)分類 15第一級(jí)分類 2第二級(jí)分類 20第二級(jí)分類 21第二級(jí)分類 22第二級(jí)分類 23第二級(jí)分類 24第二級(jí)分類 25為了達(dá)到和博客園類似的導(dǎo)航效果，我們一般會(huì)這樣定義CSSiv, ul,a margin: 0px; padding: 0px;font-size:12px; a text-decoration: none;ul list-style: none; width:150px;background-color:#fff;border: 1px sol0; border-bottom: none;cate_nav_

12、wrap position: absolute; top: 100px; left: 10px; cate_nav li cursor:pointer; border-bottom: 1px solid #808080;g-left: 10px;height:30px;line-height:30px; #cate_nav li b margin-left:55px;/*箭頭樣式 */cate_nav li ul display: none; position:absolute; left:150px;cate_nav li.over background-color: #0094ff; co

13、lor: #fff; /*元素被 mou*/到這里，我們來(lái)看一下效果:這個(gè)時(shí)候鼠標(biāo)移上去當(dāng)然是沒(méi)有充第一覲分強(qiáng)第一 分類i第一條分密第一孤分率第一癌分類*第一飄分建第一皴分笊同娥分類T第T6域8第果的，因?yàn)槲覀冞€要加入卜由i這樣一段jQuery代碼：ousemove mouseout 顯示效果$(#cate_nav li).mousemove(function () /這里需要計(jì)算第二級(jí)分類ul塊的顯示位置$(this).addClass(over).children(ul).show().css(this).index() * 30 + $(this).index() + px);).mou

14、seout(function () $(this).removeClass(over).children(ul).hide();)；m,$好，我們?cè)賮?lái)看一下效果:第-頜分如第-初閡第二級(jí)分類卬第一級(jí)分類2第二級(jí)分類11第一分類3第二級(jí)分類1更第一級(jí)分類4第二毅分類。第TMf類W第二紙分類14第一級(jí)分類E第二級(jí)分類15第一級(jí)分類T第一分妙第一鍛分類q但是似乎有個(gè)問(wèn)題， 當(dāng)鼠標(biāo)移動(dòng)分類上的時(shí)候， 文字的顏色并沒(méi)有反色顯示 (顯示為白色 #fff ,這也是一種常見(jiàn)效果)，因?yàn)槲覀冊(cè)?CSS中已經(jīng)定義了這本一段樣式： #cate_nav li.over background-color: #0094f

15、f; color: #fff; 。明明定義了當(dāng) mouseover 的時(shí)候反色顯示，為什么沒(méi)效果呢？原因很簡(jiǎn)單，因?yàn)槲淖质前赼元素里的，系統(tǒng)給a元素的color屬性設(shè)置了 blue,他父級(jí)元素li的屬性優(yōu)先級(jí)要低于 a自身的屬性，所以li的color屬性對(duì)a是不起作用 的，而li元素下面還有一個(gè) b元素，它是沒(méi)自己的color屬性的，所以鼠標(biāo)移到分類上時(shí)有反色顯示。因此，我們自然就有了解決 a標(biāo)簽沒(méi)有反色顯示的辦法，自然會(huì)想到，當(dāng)moseover的時(shí)候再控制一下a的樣式不就行么。于是我們?nèi)サ?cate_nav li.over background-color: #0094ff; color

16、: #fff; 中的 color 屬性，加上這樣一句CSS代碼：nav li a.over color: #fff; js也要做相應(yīng)的變動(dòng)：mousemove mouseout 顯示效果$(#cate_nav li).mousemove(function () /這里需要計(jì)算第二級(jí)分類ul塊的顯示位置$(this).addClass(over).children(ul).show().css,$(this).index() * 30 + $(this).index() + px);$(this).children(a).addClass(over); /新增加部分).mouseout(func

17、tion () $(this).removeClass(over).children(ul).hide();$(this).children(a).removeClass(over);/新增加部分);看看是不是有了我們想要的效果:第一怨分類口第一級(jí)分類1第二級(jí)分類1 口言一級(jí)分類2第二紙分類11第一氧分類3第二鍛分類12第一級(jí)分槃4第二級(jí)分類13第一級(jí)分類E第二級(jí)分類相第一皴分奘6第二級(jí)分類15第一級(jí)分類7第一級(jí)分類目第一級(jí)分類9OK和我們想的一樣，效果出來(lái)了。我們總共加了三行代碼，CSS一行，JS兩行，另外去掉了一個(gè)color屬性。有沒(méi)有一行也不加或只加一兩句代碼也實(shí)現(xiàn)同樣的效果呢？答案是肯

18、定的。如果你對(duì)編寫(xiě)代碼有潔癖，那么你一定會(huì)為把“增加三行代碼”變成“增 加兩個(gè)屬性”而感到高興，接下來(lái)就讓你高興一把。讓我們回到分類文字沒(méi)有反色顯示的位置， 把剛剛增加的三行代碼去掉，還原剛剛?cè)サ舻腸olor屬性。先講一下思路：首先我們要解決的問(wèn)題是文字沒(méi)有反色顯示，也分析了問(wèn)題的原因。根據(jù)前面的分析，要做到盡可能少改動(dòng)代碼，甚至JS代碼一點(diǎn)也不用改，我們只能在CSS代碼上下功夫了。第一，要想辦法去掉系統(tǒng)給 a自帶的color屬性，手動(dòng)給a元素定義一次color屬性。第二，這個(gè) color屬性值不能和a是直屬關(guān)系，color的屬性值和a必須是一種間接關(guān)系。于是我們可以這樣做：把CSS弋碼的a

19、text-decoration:none;部分增加一個(gè) color屬性，變成 a text-decoration: none;color:inherit;,讓 a元素的 color 屬性繼承父級(jí)的color屬性。由于我們已經(jīng)對(duì) mouseover的元素li增加了樣式：.over background-color: #0094ff; color: #fff; , 這樣當(dāng)鼠標(biāo)移到分類條目上時(shí)，它的字體顏色應(yīng)該會(huì)顯示成 li定義的#*即白色)。我們來(lái)看一下是不是這樣，效果是：第一級(jí)分類口1常一級(jí)分類1第一級(jí)分類之第二焦分類111第一級(jí)分類3第一級(jí)分類4第一級(jí)分類5第一級(jí)分類E第一毀分類丁)第一級(jí)分類

20、3第一級(jí)分類9這顯然不是我們想要的效果，當(dāng)鼠標(biāo)移到“第一級(jí)分類1”時(shí)，他的子分類的文字也全部變成白色了。這是因?yàn)橐驗(yàn)榈谝患?jí)分類li元素的后代不僅包含第一級(jí)分類的a標(biāo)簽，還包含第二級(jí)分類的a標(biāo)簽。剛剛我們已經(jīng)增加了a元素的color屬性，根據(jù)上面的思路，我們還需要定義一下比第一級(jí)分類li元素更高優(yōu)先級(jí)的color屬性，這樣第二級(jí)分類的文字顏色就不會(huì)承著第一級(jí)分類的文字顏色變化了。第一級(jí)分類li元素下面有ul元素和li元素,這里我們給第一級(jí)分類li元素下面有ul元素增加color屬性，即把 CSS代碼的#cate_navli ul display: none; position:absolute;

21、 left:150px;變成了 ：nav li ul display: none; position:absolute; left:150px;color:#000;再來(lái)看一下效果:OK沒(méi)問(wèn)題。這樣，我們只增加了CSS的兩個(gè)color屬性，JS代碼完全沒(méi)有動(dòng)，也達(dá)到了我們要的效果。其實(shí)我覺(jué)得上面代碼還可以繼續(xù)縮減，像我開(kāi)篇所說(shuō)，我對(duì)CSS也只是個(gè)了解的程度,時(shí)開(kāi)發(fā)極少用到 CSS更不用說(shuō)這方面的實(shí)際開(kāi)發(fā)經(jīng)驗(yàn)。相信在博客園有很多這方面的高手， 也有很多有這方面的經(jīng)驗(yàn)的人，希望這些們不吝賜教，全當(dāng)是把代碼娛樂(lè)消遣化，這樣才更能 激發(fā)我們對(duì)編程更深厚的興趣，不是嗎。YP ml為了讓大家方便 copy

22、整個(gè)代碼繼續(xù)研究，下面貼上整個(gè)html文件的代碼:E htmlxmlns= HYPERLINK /1999/xhtml /1999/xhtmlad t body, div, ul, a margin: 0px; padding: 0px; font-size: 12px; a text-decoration: none; color: inherit; ul list-style: none; width: 150px; background-color: #fff;px solid #808080; border-bottom: none; #cate_wrap position: abso

23、lute; top: 100px; left: 10px; #cate_nav li cursor: pointer; border-bottom: 1px solid #808080;g-left: 10px; height: 30px; line-height: 30px; #cate_nav li b margin-left: 55px; #cate_nav li ul display: none; position: absolute; left: 150px;#cate_nav li.over background-color: #0094ff; color: #fff; $(fun

24、ction () /動(dòng)態(tài)創(chuàng)建用于網(wǎng)站導(dǎo)航的ul、li元素var $ul = $(#cate_wrap).append().children(ul);for (var i = 0; i 10; i+) var $sub_ul =$ul.append().children(li).eq(i).append(第一級(jí)分類+ i + ).append().children(ul);for (var j = 0; j 6; j+) $sub_ul.append().children(li).eq(j).append(第二級(jí)分類+ i + j + );/ 添力口 mousemove mouseout 顯示效

25、果$(#cate_nav li).mousemove(function () $(this).addClass(over).children(ul).show().css(top, $(this).index() * 30 + $(this).index() + px);).mouseout(function () $(this).removeClass(over).children(ul).hide();););在Firefox 下，上面代碼被 HolyKnight 發(fā)現(xiàn)有bug，為了解決在Firefox 下的兼容性問(wèn)題，對(duì)JS進(jìn)行了修改，我暫時(shí)只能這樣改，不知道朋友們有沒(méi)有更優(yōu)的解決辦法，

26、下面是我 修改后的完整代碼：碼YPE htmlxmlns= HYPERLINK /1999/xhtml /1999/xhtmlmeta http-equiv=Content-Type content=text/html; charset=utf-8” /body, div, ul, a margin: 0px; padding: 0px; font-size: 12px; a text-decoration: none; color: inherit; ul list-style: none; width: 150px; background-color: #fff;border: 1px solid #808080; border-bottom: none; #cate_wrap position: absolute; top: 100px; left: 10px; #cate_nav li cursor: pointer; border-bottom: 1px solid #808080;padding-left: 10px; height: 30px; line-height: 30px; #cate_nav li b margin-left: 55px; #cate_