極酷的三層分離的標(biāo)準滑動門導(dǎo)航菜單
互聯(lián)網(wǎng) 發(fā)布時間：2009-04-02 19:34:43 作者：佚名 
我要評論
我要評論網(wǎng)頁制作Webjx文章簡介：本文一步一步手把手教你打造一個極酷的三層分離的標(biāo)準滑動門導(dǎo)航菜單，從思路、原理、步驟，手段可謂“無所不用其極”，即便你是菜鳥，相信你看了本文后，也能打造出屬于自己的超級漂亮的標(biāo)準導(dǎo)航菜單。
本文一步一步手把手教你打造一個極酷的三層分離的標(biāo)準滑動門導(dǎo)航菜單，從思路、原理、步驟，手段可謂“無所不用其極”，即便你是菜鳥，相信你看了本文后，也能打造出屬于自己的超級漂亮的標(biāo)準導(dǎo)航菜單。
導(dǎo)言：本文一步一步手把手教你打造一個極酷的三層分離的標(biāo)準滑動門導(dǎo)航菜單，從思路、原理、步驟，手段可謂“無所不用其極”，即便你是菜鳥，相信你看了本文后，也能打造出屬于自己的超級漂亮的標(biāo)準導(dǎo)航菜單。本菜單無冗余結(jié)構(gòu)，利于數(shù)據(jù)動態(tài)輸出，非常適合于用在平常的項目中去。本教程中講到了基本的滑動門原理，相信對那些還在這條路上摸索的朋友會有一些幫助！當(dāng)然如果有什么錯誤和問題，也歡迎大家提出來探討。
本導(dǎo)航菜單想達到的理想目標(biāo)是：
-
漂亮，有個性。
結(jié)構(gòu)清晰，語義明確，無冗余標(biāo)簽。
表現(xiàn)、結(jié)構(gòu)、行為三層分離，無侵入式。
有利于后臺程序的數(shù)據(jù)輸出。
菜單有三態(tài)效果的變化。
能高亮記錄點擊后的菜單項。
自適應(yīng)文字的寬度。當(dāng)文字內(nèi)容長短變化時按鈕能適時變化。
兼容各大主流瀏覽器。
讓我們一步一步的實現(xiàn)這種理想的菜單吧！
在論壇中經(jīng)?？吹胶芏嗯笥言谥谱鞑藛危f實話，不是結(jié)構(gòu)冗余，就是有形無神，或有神無貌。而我們現(xiàn)在要打造的就是極品菜單。無論您是新手或老手，在這個教程中都應(yīng)該有所收獲。
一個理想的菜單其結(jié)構(gòu)應(yīng)該是干凈的、無冗余、分離的，然而因為種種的原因，會為它加上許多無意義的東西，到最后，會離“干凈”越來越遠。所以在做菜單前，有些原則是在整個制作過程一直要牢記的，不能以任何外力所阻擾。
結(jié)構(gòu)篇
在我的印象中，理想的標(biāo)準菜單應(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)簽都有各自的語義。我們在瀏覽器中看下，啊哦，確實很簡陋，就是原始的文字，像什么，嗯，就像我們在菜館里點菜用的菜單，可能比那個還簡單，并且每個菜單前面還有一個小圓點！哦，天啦，離我們的漂亮菜單還差好大一截呢！
相關(guān)文章
AudioContext 實現(xiàn)音頻可視化(web技術(shù)分享)
這篇文章主要分享的是web技術(shù)的 AudioContext 實現(xiàn)音頻可視化，要實現(xiàn)音頻可視化得先實現(xiàn)一些炫酷的效果需要借助 Web Audio API提供的一些方法 AudioContext，下面詳細內(nèi)容2022-02-23
這篇文章主要給大家介紹了web技術(shù)中的WebRTC記錄音視頻流，文章內(nèi)容圍繞主題展相關(guān)資料，需要的小伙伴可以參考一下，希望對你有所幫助2022-02-23- 這是我通過網(wǎng)上查閱資料總結(jié)的一些編碼規(guī)范，用于鞏固對html，css頁面重構(gòu)時的基礎(chǔ),需要的朋友可以參考下2020-12-19
前端編碼規(guī)范（4）—— CSS 和 Sass (SCSS) 開發(fā)規(guī)范
這篇文章主要介紹了前端編碼規(guī)范（4）—— CSS 和 Sass (SCSS) 開發(fā)規(guī)范,需要的朋友可以參考下2017-01-21Web前端開發(fā)規(guī)范2017(HTML/JavaScript/CSS)
這是一份旨在增強團隊的開發(fā)協(xié)作，提高代碼質(zhì)量和打造開發(fā)基石的編碼風(fēng)格規(guī)范，其中包含了 HTML, JavaScript 和 CSS/SCSS 這幾個部分。我們知道，當(dāng)一個團隊開始指定并實行2017-01-21- 這篇文章主要為大家介紹了前端開發(fā)團隊遵循和約定的代碼書寫規(guī)范，意在提高代碼的規(guī)范性和可維護性,需要的朋友可以參考下2017-01-21
響應(yīng)式Web之流式網(wǎng)格系統(tǒng)
這篇文章主要為大家詳細介紹了響應(yīng)式Web之流式網(wǎng)格系統(tǒng)的相關(guān)資料，感興趣的小伙伴們可以參考一下2016-07-04在網(wǎng)頁標(biāo)題欄上和收藏夾顯示網(wǎng)站logo的實現(xiàn)方法
下面小編就為大家分享一篇在網(wǎng)頁標(biāo)題欄上和收藏夾顯示網(wǎng)站logo的實現(xiàn)方法。希望對大家有所幫助。一起跟隨小編過來看看吧，祝大家游戲愉快哦2016-03-16Visual Foxpro 6.0 中文版安裝向?qū)?圖解)
基于很多用戶都在下載Visual Foxpro 6.0，但是有安裝vtp6.0經(jīng)驗的朋友確很少，在安裝過程中總會出現(xiàn)這樣那樣的問題，基于這些問題，下面小編抽個時間把Visual Foxpro 6.02015-09-09網(wǎng)站日志200 0 64狀態(tài)碼的分析(協(xié)議子狀態(tài))
網(wǎng)站日志200 0 64狀態(tài)碼的分析介紹2012-10-29
