中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

您的位置: 首頁 > 技術(shù)文檔 > 網(wǎng)頁制作 > 全兼容可高亮二級緩沖折疊菜單
啟用Mod Rewrite和.htaccess 回到列表 如何使CSS渲染更高效
 全兼容可高亮二級緩沖折疊菜單

作者:by0001 時間: 2010-06-01 文檔類型:原創(chuàng) 來自:藍色理想

最近一段時間一直比較忙,已經(jīng)有好幾個月沒有打理博客了�,F(xiàn)將一個最近在項目中制作的一個菜單實例整理出來,共享一下。

在后臺或OA系統(tǒng)中最常用到的布局往往是一個全屏布局,一般都是上中下三行兩列布局,頁頭、頁腳、左側(cè)菜單加一個右側(cè)ifame框架頁。所以那種帶折疊的二級菜單是會經(jīng)常使用到的,本例便是實現(xiàn)這樣一種比較通用的全兼容可高亮二級緩沖折疊菜單。

特點

  1. 全兼容,瀏覽器測試:IE5.5、IE6、IE7、IE8、FF3.0、谷歌、Safari 4.0、Opera9.0。
  2. Html結(jié)構(gòu)優(yōu)雅簡潔,無多余標(biāo)簽,利于程序循環(huán)輸出。
  3. 樣式與結(jié)構(gòu)分離,你可以在樣式表中修改不同的風(fēng)格。
  4. 當(dāng)前選中項高亮狀態(tài),一級菜單和二級菜單都可以高亮顯示。
  5. 折疊層優(yōu)雅緩沖動畫。
  6. 最適用于后臺和一些OA系統(tǒng)界面。

缺點

  1. 不支持防刷新,這個功能在后臺應(yīng)用系統(tǒng)中應(yīng)該用途不大,沒有加入這個功能。
  2. 在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ā)表評論。

作者文章 更多作者文章
CSS圓角——圓角化圖片
CSS圓角——透明圓角化背景圖片
CSS圓角——基本的圓角框
CSS圓角框組件 V1.0
不用Cookie的仿刷新二級高亮菜單
關(guān)鍵字搜索 常規(guī)搜索 推薦文檔
熱門搜索:CSS Fireworks 設(shè)計比賽 網(wǎng)頁制作 web標(biāo)準 用戶體驗 UE photoshop Dreamweaver Studio8 Flash 手繪 CG
站點最新 站點最新列表
周大�!熬�•自然”設(shè)計大賽開啟
國際體驗設(shè)計大會7月將在京舉行
中國國防科技信息中心標(biāo)志征集
云計算如何讓安全問題可控
云計算是多數(shù)企業(yè)唯一擁抱互聯(lián)網(wǎng)的機會
阿里行云
云手機年終巨獻,送禮標(biāo)配299起
阿里巴巴CTO王堅的"云和互聯(lián)網(wǎng)觀"
1499元買真八核 云OS雙蛋大促
首屆COCO桌面手機主題設(shè)計大賽
欄目最新 欄目最新列表
淺談JavaScript編程語言的編碼規(guī)范
如何在illustrator中繪制臺歷
Ps簡單繪制一個可愛的鉛筆圖標(biāo)
數(shù)據(jù)同步算法研究
用ps作簡單的作品展示頁面
CSS定位機制之一:普通流
25個最佳最閃亮的Eclipse開發(fā)項目
Illustrator中制作針線縫制文字效果
Photoshop制作印刷凹凸字體
VS2010中創(chuàng)建自定義SQL Rule

藍色理想版權(quán)申明:除部分特別聲明不要轉(zhuǎn)載,或者授權(quán)我站獨家播發(fā)的文章外,大家可以自由轉(zhuǎn)載我站點的原創(chuàng)文章,但原作者和來自我站的鏈接必須保留(非我站原創(chuàng)的,按照原來自一節(jié),自行鏈接)。文章版權(quán)歸我站和作者共有。

轉(zhuǎn)載要求:轉(zhuǎn)載之圖片、文件,鏈接請不要盜鏈到本站,且不準打上各自站點的水印,亦不能抹去我站點水印。

特別注意:本站所提供的攝影照片,插畫,設(shè)計作品,如需使用,請與原作者聯(lián)系,版權(quán)歸原作者所有,文章若有侵犯作者版權(quán),請與我們聯(lián)系,我們將立即刪除修改。

您的評論
用戶名:  口令:
說明:輸入正確的用戶名和密碼才能參與評論。如果您不是本站會員,你可以注冊 為本站會員。
注意:文章中的鏈接、內(nèi)容等需要修改的錯誤,請用報告錯誤,以利文檔及時修改。
不評分 1 2 3 4 5
注意:請不要在評論中含與內(nèi)容無關(guān)的廣告鏈接,違者封ID
請您注意:
·不良評論請用報告管理員,以利管理員及時刪除。
·尊重網(wǎng)上道德,遵守中華人民共和國的各項有關(guān)法律法規(guī)
·承擔(dān)一切因您的行為而直接或間接導(dǎo)致的民事或刑事法律責(zé)任
·本站評論管理人員有權(quán)保留或刪除其管轄評論中的任意內(nèi)容
·您在本站發(fā)表的作品,本站有權(quán)在網(wǎng)站內(nèi)轉(zhuǎn)載或引用
·參與本評論即表明您已經(jīng)閱讀并接受上述條款
推薦文檔 | 打印文檔 | 評論文檔 | 報告錯誤  
專業(yè)書推薦 更多內(nèi)容
網(wǎng)站可用性測試及優(yōu)化指南
《寫給大家看的色彩書1》
《跟我去香港》
眾妙之門—網(wǎng)站UI 設(shè)計之道
《Flex 4.0 RIA開發(fā)寶典》
《贏在設(shè)計》
犀利開發(fā)—jQuery內(nèi)核詳解與實踐
作品集 更多內(nèi)容

雜⑦雜⑧ Gold NORMANA V2