閑話網站左側導航的實現(xiàn)

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

2、，而現(xiàn)實工作中我們也不可能花太多的時間去尋找更多更佳的解決方案。這種“程序員精 神”的“尋找”工作只能作為我們平時閑的無聊時的一種消遣。如果此時你正好也很閑，不訪 和我一起探討探討網站左側導航的實現(xiàn)。雖然實現(xiàn)起來很簡單，但你的方式是不是一定是最佳 的呢？廢話不多說，讓我們先來看看博客園的實現(xiàn)吧。為了把重點放在 css上，我對博客園的代碼進行了一些改變，但大體邏輯是一樣的(感興趣的話可以查看博客園的前臺代碼)。HTML部分(后臺生成)：d=cate_wrap網站分類.NET技術(9) 編程語言(7) 軟件設計(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架構設計(0)li面向對象(3)li設計模式(0)CSS部分：全局設置*/body,div, ul, li margin:。； padding:0; st-style:none; lor:#666; text-decoration:none; 左邊導航*/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的調用放在html中，這里我放在 JS中動態(tài) 綁定，區(qū)別不大)：tion () /給第一級分類添加mouseover、mouseout效果$(#cate_item li).mouseover(function () /通過截取id數字部分動態(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事件，控制當前的第一分類的顯示效果$(.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););/給第二級分類添加mouseover、mouseout效果$(.cate_sub_wrap li).mouseover(functio

9、n () $(this).addClass(over);).mouseout(function () $(this).removeClass(over);););效果圖:代碼很簡單，不需要作解釋。主要是讓大家了解一下這種思路。下面用另一種方式實現(xiàn), 這個過程我盡量講的詳細一點。步一步來，用 VS先創(chuàng)建一個html文件，在body元素中添加一個 div層，如下:iv id=cate_nav_wrapdiv接下來用jQuery模擬后臺動態(tài)創(chuàng)建網站分類html的ul和li元素，如下：tion () /動態(tài)創(chuàng)建用于網站導航的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=# 第一級分類+ i + ”).append().children( for (var j = 0; j 6; j+) $sub_ul.append().children(li).eq(j).append(分類+ i+j + ););上面的jQuery代碼會生成如下 html元素：第一級分類 0分類 01分類 04第二級分類 00第二級分類02第二級分類 03第二級分類05第一級分類 1第二級分類

11、10分類 11 第二級分類 12第二級分類 13第二級分類 14第二級分類 15第一級分類 2第二級分類 20第二級分類 21第二級分類 22第二級分類 23第二級分類 24第二級分類 25為了達到和博客園類似的導航效果，我們一般會這樣定義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*/到這里，我們來看一下效果:這個時候鼠標移上去當然是沒有充第一覲分強第一 分類i第一條分密第一孤分率第一癌分類*第一飄分建第一皴分笊同娥分類T第T6域8第果的，因為我們還要加入卜由i這樣一段jQuery代碼：ousemove mouseout 顯示效果$(#cate_nav li).mousemove(function () /這里需要計算第二級分類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,$好，我們再來看一下效果:第-頜分如第-初閡第二級分類卬第一級分類2第二級分類11第一分類3第二級分類1更第一級分類4第二毅分類。第TMf類W第二紙分類14第一級分類E第二級分類15第一級分類T第一分妙第一鍛分類q但是似乎有個問題， 當鼠標移動分類上的時候， 文字的顏色并沒有反色顯示 (顯示為白色 #fff ,這也是一種常見效果)，因為我們在 CSS中已經定義了這本一段樣式： #cate_nav li.over background-color: #0094f

15、f; color: #fff; 。明明定義了當 mouseover 的時候反色顯示，為什么沒效果呢？原因很簡單，因為文字是包裹在a元素里的，系統(tǒng)給a元素的color屬性設置了 blue,他父級元素li的屬性優(yōu)先級要低于 a自身的屬性，所以li的color屬性對a是不起作用 的，而li元素下面還有一個 b元素，它是沒自己的color屬性的，所以鼠標移到分類上時有反色顯示。因此，我們自然就有了解決 a標簽沒有反色顯示的辦法，自然會想到，當moseover的時候再控制一下a的樣式不就行么。于是我們去掉#cate_nav li.over background-color: #0094ff; color

16、: #fff; 中的 color 屬性，加上這樣一句CSS代碼：nav li a.over color: #fff; js也要做相應的變動：mousemove mouseout 顯示效果$(#cate_nav li).mousemove(function () /這里需要計算第二級分類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);/新增加部分);看看是不是有了我們想要的效果:第一怨分類口第一級分類1第二級分類1 口言一級分類2第二紙分類11第一氧分類3第二鍛分類12第一級分槃4第二級分類13第一級分類E第二級分類相第一皴分奘6第二級分類15第一級分類7第一級分類目第一級分類9OK和我們想的一樣，效果出來了。我們總共加了三行代碼，CSS一行，JS兩行，另外去掉了一個color屬性。有沒有一行也不加或只加一兩句代碼也實現(xiàn)同樣的效果呢？答案是肯

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

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

20、3第一級分類9這顯然不是我們想要的效果，當鼠標移到“第一級分類1”時，他的子分類的文字也全部變成白色了。這是因為因為第一級分類li元素的后代不僅包含第一級分類的a標簽，還包含第二級分類的a標簽。剛剛我們已經增加了a元素的color屬性，根據上面的思路，我們還需要定義一下比第一級分類li元素更高優(yōu)先級的color屬性，這樣第二級分類的文字顏色就不會承著第一級分類的文字顏色變化了。第一級分類li元素下面有ul元素和li元素,這里我們給第一級分類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;再來看一下效果:OK沒問題。這樣，我們只增加了CSS的兩個color屬性，JS代碼完全沒有動，也達到了我們要的效果。其實我覺得上面代碼還可以繼續(xù)縮減，像我開篇所說，我對CSS也只是個了解的程度,時開發(fā)極少用到 CSS更不用說這方面的實際開發(fā)經驗。相信在博客園有很多這方面的高手， 也有很多有這方面的經驗的人，希望這些們不吝賜教，全當是把代碼娛樂消遣化，這樣才更能 激發(fā)我們對編程更深厚的興趣，不是嗎。YP ml為了讓大家方便 copy

22、整個代碼繼續(xù)研究，下面貼上整個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 () /動態(tài)創(chuàng)建用于網站導航的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(第一級分類+ i + ).append().children(ul);for (var j = 0; j 6; j+) $sub_ul.append().children(li).eq(j).append(第二級分類+ 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 下的兼容性問題，對JS進行了修改，我暫時只能這樣改，不知道朋友們有沒有更優(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_