本文一步一步手把手教你打造一個(gè)極酷的三層分離的標(biāo)準(zhǔn)滑動(dòng)門導(dǎo)航菜單，從思路、原理、步驟，手段可謂“無(wú)所不用其極”，即便你是菜鳥，相信你看了本文后，也能打造出屬于自己的超級(jí)漂亮的標(biāo)準(zhǔn)導(dǎo)航菜單。
導(dǎo)言：本文一步一步手把手教你打造一個(gè)極酷的三層分離的標(biāo)準(zhǔn)滑動(dòng)門導(dǎo)航菜單，從思路、原理、步驟，手段可謂“無(wú)所不用其極”，即便你是菜鳥，相信你看了本文后，也能打造出屬于自己的超級(jí)漂亮的標(biāo)準(zhǔn)導(dǎo)航菜單。本菜單無(wú)冗余結(jié)構(gòu)，利于數(shù)據(jù)動(dòng)態(tài)輸出，非常適合于用在平常的項(xiàng)目中去。本教程中講到了基本的滑動(dòng)門原理，相信對(duì)那些還在這條路上摸索的朋友會(huì)有一些幫助！當(dāng)然如果有什么錯(cuò)誤和問(wèn)題，也歡迎大家提出來(lái)探討。
本導(dǎo)航菜單想達(dá)到的理想目標(biāo)是：

漂亮，有個(gè)性。 結(jié)構(gòu)清晰，語(yǔ)義明確，無(wú)冗余標(biāo)簽。 表現(xiàn)、結(jié)構(gòu)、行為三層分離，無(wú)侵入式。 有利于后臺(tái)程序的數(shù)據(jù)輸出。 菜單有三態(tài)效果的變化。 能高亮記錄點(diǎn)擊后的菜單項(xiàng)。 自適應(yīng)文字的寬度。當(dāng)文字內(nèi)容長(zhǎng)短變化時(shí)按鈕能適時(shí)變化。 兼容各大主流瀏覽器。

讓我們一步一步的實(shí)現(xiàn)這種理想的菜單吧！
在論壇中經(jīng)?？吹胶芏嗯笥言谥谱鞑藛?，但說(shuō)實(shí)話，不是結(jié)構(gòu)冗余，就是有形無(wú)神，或有神無(wú)貌。而我們現(xiàn)在要打造的就是極品菜單。無(wú)論您是新手或老手，在這個(gè)教程中都應(yīng)該有所收獲。
一個(gè)理想的菜單其結(jié)構(gòu)應(yīng)該是干凈的、無(wú)冗余、分離的，然而因?yàn)榉N種的原因，會(huì)為它加上許多無(wú)意義的東西，到最后，會(huì)離“干凈”越來(lái)越遠(yuǎn)。所以在做菜單前，有些原則是在整個(gè)制作過(guò)程一直要牢記的，不能以任何外力所阻擾。
結(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="首頁(yè)">首頁(yè)</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)有了，可以看到這里面是沒(méi)有任何無(wú)意義的標(biāo)簽，每個(gè)標(biāo)簽都有各自的語(yǔ)義。我們?cè)跒g覽器中看下，啊哦，確實(shí)很簡(jiǎn)陋，就是原始的文字，像什么，嗯，就像我們?cè)诓损^里點(diǎn)菜用的菜單，可能比那個(gè)還簡(jiǎn)單，并且每個(gè)菜單前面還有一個(gè)小圓點(diǎn)！哦，天啦，離我們的漂亮菜單還差好大一截呢！

最新評(píng)論