最近一段時間一直比較忙,已經(jīng)有好幾個月沒有打理博客了�,F(xiàn)將一個最近在項目中制作的一個菜單實例整理出來,共享一下。
在后臺或OA系統(tǒng)中最常用到的布局往往是一個全屏布局,一般都是上中下三行兩列布局,頁頭、頁腳、左側(cè)菜單加一個右側(cè)ifame框架頁。所以那種帶折疊的二級菜單是會經(jīng)常使用到的,本例便是實現(xiàn)這樣一種比較通用的全兼容可高亮二級緩沖折疊菜單。
特點:
- 全兼容,瀏覽器測試:IE5.5、IE6、IE7、IE8、FF3.0、谷歌、Safari 4.0、Opera9.0。
- Html結(jié)構(gòu)優(yōu)雅簡潔,無多余標(biāo)簽,利于程序循環(huán)輸出。
- 樣式與結(jié)構(gòu)分離,你可以在樣式表中修改不同的風(fēng)格。
- 當(dāng)前選中項高亮狀態(tài),一級菜單和二級菜單都可以高亮顯示。
- 折疊層優(yōu)雅緩沖動畫。
- 最適用于后臺和一些OA系統(tǒng)界面。
缺點:
- 不支持防刷新,這個功能在后臺應(yīng)用系統(tǒng)中應(yīng)該用途不大,沒有加入這個功能。
- 在IE6中緩沖效果沒有出來,對于IE6,就弱化一下效果。
還是先看看效果截圖:
圖一
簡單說一下制作這樣的菜單的一些簡單的思路和會遇到的問題。
一般制作一個效果,我的制作流程一般是先畫出HTML結(jié)構(gòu)層內(nèi)容,再寫樣式,之后是搞一些錦上添花的效果,如JS特效等等。不知各位大牛們是怎樣一個流程模式。
結(jié)構(gòu)層:
結(jié)構(gòu)層的構(gòu)思一般是建立在一個感性認識上的,一般是有一個效果圖,根據(jù)這個效果圖構(gòu)建最簡潔的HTML結(jié)構(gòu)。如上圖所示,映入眼簾的第一印象,首先是想到用一個UL的無序列表,但是…這是一個二級嵌套的列表,這是我們首先需要考慮的問題。
因此結(jié)構(gòu)應(yīng)該是下面這樣子:
<li><a href="#none">一級菜單項</a> <ul> <li><a href="#none">二級菜單項</a></li> </ul> </li>
在有二級菜單時是一個嵌套的UL結(jié)構(gòu),無二級菜單時則是如下:
<ul class="menu"> <li><a href="#none">一級菜單項</a></li> </ul>
當(dāng)然,你也可以采用dl-dt-dd有序列表的方式來創(chuàng)建這種嵌套的結(jié)構(gòu),視你的實際情況而定。
有了最原始的結(jié)構(gòu)層,你就需要添加一些必要的鉤子,用于CSS和JS控制樣式和效果,我一直反對那種添加很多類名的寫法,這會增加頁面的體積,所以最精簡的作法是應(yīng)用一兩個必要的類名給父容器即可,然后在樣式表中用子(群)選擇符設(shè)置各種個性的設(shè)置。在上面的結(jié)構(gòu),你會想到用幾個類名來定義所有的樣式呢?
我的做法是只用三個類名即可以控制全部的樣式顯示了。一個是最頂級UL,定義為class=”menu”,一個是二級菜單的容器,也就是嵌套的UL定義一個class=”level2”,最后是一級菜單項li定義一個class=”level1”,有了這三個鉤子,你就可以操縱整個結(jié)構(gòu)的樣式了。
表現(xiàn)層:
樣式表的設(shè)置都很簡單,唯一要注意的是,為了便于JS控制二級菜單的顯隱和記錄當(dāng)前選中項的高亮狀態(tài),所以我不用hover偽類來實現(xiàn)鼠標(biāo)的滑入滑出效果,而采用JS來模擬它。用JS控制樣式的關(guān)鍵代碼如下:
一級菜單樣式
/*一級菜單三態(tài)樣式,供JS調(diào)用*/ .menu li.level1 a{display:block;line-height:31px;height:31px;padding-left:50px; font-size:12px;color:#fff;background:url(../images/menubg.gif) no-repeat left top;} .menu li.level1 a.hove{background-position:left -31px;} .menu li.level1 a.cur{background-position:left -62px;}
二級菜單樣式
/*二級菜單三態(tài)樣式,供JS調(diào)用*/ .menu li.level1 a{display:block;line-height:31px;height:31px;padding-left:50px; font-size:12px;color:#fff;background:url(../images/menubg.gif) no-repeat left top;} .menu li.level1 a.hove{background-position:left -31px;} .menu li.level1 a.cur{background-position:left -62px;}
行為層:
因為前面已經(jīng)提到,我們在樣式表并沒有定義菜單的三態(tài)效果,所以我們需要給每個菜單項綁定onmouseover、onmouseout和onclick事件模擬出這種效果來。在結(jié)構(gòu)層中我們并沒有定義這個總?cè)萜鞯腎D,而只定義了一個class類名,所以在JS添加了一個擴展的getElementsByClassName()方法(感謝好友司徒正美),根據(jù)類名來獲得這個對象。用循環(huán)閉包來綁定這三個事件。
詳細代碼就不一一解說了,Demo中注釋得非常清楚,請下載到本機瀏覽。
有什么問題請在本博客中跟貼討論,祝你用得開心!
最后附上全部源碼:demo下載
原文:http://www.cnblogs.com/binyong/archive/2010/05/28/1745918.html
本文鏈接:http://m.95time.cn/tech/web/2010/7641.asp
出處:藍色理想
責(zé)任編輯:bluehearts
◎進入論壇網(wǎng)頁制作、WEB標(biāo)準化版塊參加討論,我還想發(fā)表評論。
|