本文一步一步手把手教你打造一個極酷的三層分離的標(biāo)準(zhǔn)滑動門導(dǎo)航菜單，從思路、原理、步驟，手段可謂“無所不用其極”，即便你是菜鳥，相信你看了本文后，也能打造出屬于自己的超級漂亮的標(biāo)準(zhǔn)導(dǎo)航菜單。
導(dǎo)言：本文一步一步手把手教你打造一個極酷的三層分離的標(biāo)準(zhǔn)滑動門導(dǎo)航菜單，從思路、原理、步驟，手段可謂“無所不用其極”，即便你是菜鳥，相信你看了本文后，也能打造出屬于自己的超級漂亮的標(biāo)準(zhǔn)導(dǎo)航菜單。本菜單無冗余結(jié)構(gòu)，利于數(shù)據(jù)動態(tài)輸出，非常適合于用在平常的項目中去。本教程中講到了基本的滑動門原理，相信對那些還在這條路上摸索的朋友會有一些幫助！當(dāng)然如果有什么錯誤和問題，也歡迎大家提出來探討。
本導(dǎo)航菜單想達(dá)到的理想目標(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)?？吹胶芏嗯笥言谥谱鞑藛?，但說實話，不是結(jié)構(gòu)冗余，就是有形無神，或有神無貌。而我們現(xiàn)在要打造的就是極品菜單。無論您是新手或老手，在這個教程中都應(yīng)該有所收獲。
一個理想的菜單其結(jié)構(gòu)應(yīng)該是干凈的、無冗余、分離的，然而因為種種的原因，會為它加上許多無意義的東西，到最后，會離“干凈”越來越遠(yuǎn)。所以在做菜單前，有些原則是在整個制作過程一直要牢記的，不能以任何外力所阻擾。
結(jié)構(gòu)篇
在我的印象中，理想的標(biāo)準(zhǔn)菜單應(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)簽都有各自的語義。我們在瀏覽器中看下，啊哦，確實很簡陋，就是原始的文字，像什么，嗯，就像我們在菜館里點菜用的菜單，可能比那個還簡單，并且每個菜單前面還有一個小圓點！哦，天啦，離我們的漂亮菜單還差好大一截呢！

最新評論