極酷的三層分離的標準滑動門導航菜單

2024-07-11 08:44:05

字體：大中小

來源：轉載

供稿：網友

本文一步一步手把手教你打造一個極酷的三層分離的標準滑動門導航菜單，從思路、原理、步驟，手段可謂“無所不用其極”，即便你是菜鳥，相信你看了本文后，也能打造出屬于自己的超級漂亮的標準導航菜單。
導言：本文一步一步手把手教你打造一個極酷的三層分離的標準滑動門導航菜單，從思路、原理、步驟，手段可謂“無所不用其極”，即便你是菜鳥，相信你看了本文后，也能打造出屬于自己的超級漂亮的標準導航菜單。本菜單無冗余結構，利于數據動態輸出，非常適合于用在平常的項目中去。本教程中講到了基本的滑動門原理，相信對那些還在這條路上摸索的朋友會有一些幫助！當然如果有什么錯誤和問題，也歡迎大家提出來探討。
本導航菜單想達到的理想目標是：

漂亮，有個性。結構清晰，語義明確，無冗余標簽。表現、結構、行為三層分離，無侵入式。有利于后臺程序的數據輸出。菜單有三態效果的變化。能高亮記錄點擊后的菜單項。自適應文字的寬度。當文字內容長短變化時按鈕能適時變化。兼容各大主流瀏覽器。
讓我們一步一步的實現這種理想的菜單吧！
在論壇中經常看到很多朋友在制作菜單，但說實話，不是結構冗余，就是有形無神，或有神無貌。而我們現在要打造的就是極品菜單。無論您是新手或老手，在這個教程中都應該有所收獲。
一個理想的菜單其結構應該是干凈的、無冗余、分離的，然而因為種種的原因，會為它加上許多無意義的東西，到最后，會離“干凈”越來越遠。所以在做菜單前，有些原則是在整個制作過程一直要牢記的，不能以任何外力所阻擾。
結構篇
在我的印象中，理想的標準菜單應該具有下面的結構：
<div id="nav">
<ul id="menu">
<li><a href="#none" title="博客園">博客園</a></li>
<li><a href="#none" title="社區">社區</a></li>
<li><a href="#none" title="首頁">首頁</a></li>
<li><a href="#none" title="新隨筆">新隨筆</a></li>
<li><a href="#none" title="聯系">聯系</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>
菜單的最原始的結構有了，可以看到這里面是沒有任何無意義的標簽，每個標簽都有各自的語義。我們在瀏覽器中看下，啊哦，確實很簡陋，就是原始的文字，像什么，嗯，就像我們在菜館里點菜用的菜單，可能比那個還簡單，并且每個菜單前面還有一個小圓點！哦，天啦，離我們的漂亮菜單還差好大一截呢！

上一篇：將CSS按照層疊式結構化重新組織與構建

下一篇：CSS標示導航條當前所在頻道