[CSS]30種時尚的CSS網站導航條

【原文地址】：http://coolshell.cn/?p=562

我想，大家在上網的時候一定見過很多很多種各式各樣的網站導航條的設計。這些導航條基本上來說都是用CSS來做的。這裡，我們將向你介紹幾種最不錯的用CSS設計的網站導航條。希望你會喜歡。

1. The Menu menu

 這是一個非常不錯的CSS菜單，相當的獨特，每個表徵圖都有滑鼠感應，然後出現子功能表。如果你想知道怎麼做的，你可以簡單的看一下這個網頁的源碼。

 

2. Pure CSS hover menu

查看示範

一個縱向顯示的滑鼠感應的菜單和其子功能表。

3. Matte CSS Menu

查看示範

Matte 是一個簡單的CSS 菜單，使用兩個圖片，可以有13種風格。這個CSS菜單由 David Appleyard 開發和維護，他開發了很多很多簡單而有強大的CSS菜單。

4. CSS Blur Menu

查看示範

一個模糊的導航條，只有當滑鼠經過的時候才會變得清楚。

5. CSS Navigation with Glowing Icons

查看示範

有一個非常不錯的簡單的教程會教你建立這個漂亮的CSS導航條。

6. CSS Sliding Door using only 1 image

查看示範

這是一個樸素的CSS導航條，其基於 Sliding Doors 技術，只需要一個圖片。

7. Navigation Matrix Reloaded

查看示範

又一個相當時髦的導航條。

 

8. CSS Horizontal Menu

查看示範

Ian Main 提供了一組很不錯的相當時髦的CSS導航條。

9. Woody CSS Menu

Woody 是一個跨瀏覽器的CSS導航條，其在IE6, IE 7, Firefox, Opera, Safari, Chrome上測試通過。

10. Advanced CSS Menu

Advanced CSS Menu 由Nick La 開發，其使用了一個相當獨特的方式。

11. Simple Yellow Tabbed

這個導航條由CSS Menu Generator 產生。這是一個品質很不錯的導航條。

12. Vimeo-Like Top Navigation

查看示範

這個基於CSS的導航條由 Vimeo 製作。

13. Apple Like Colorful CSS Menu

這是一個效仿 Apple的圖片滾動的CSS菜單，其有一個教程。

14. CSS Hoverbox

其靈感來源於 Hoverbox Image Gallery，由Nathan Smith開發，CSS Hoverbox 使用background-position CSS 屬性製作。網頁上有教程。

15. Big CSS Box

這隻不過是一個實驗性質的CSS 導航條，其允許你建立一個可以縮放的導航條，其可以自適應於瀏覽器的寬度。

16. Simple CSS-based drop-down menu

查看示範

這個下拉式菜單，雖然非常簡單，但是卻非常的優秀。

17. Two Level Horizontal Navigation in CSS

查看示範

Veerle Pieters 提供的這個CSS導航條教程，其主要使用了text-indent CSS 屬性。

18. Uberlink CSS List Menus

查看示範

這個CSS導航條看起來很像是一個圖片切換的樣子。

19. CSS-Only Accordion Effect

查看示範

這個CSS設計的很有想法，啥也不說了，上去看看就知道有多酷了。

20. Tabbed Navigation Using CSS

這是另一個很不錯的相法，讓你可以建立一個TAB頁，注意這是完全由純CSS寫成的。你可以通過點擊上面的連結查看如何製作這樣一個介面。

21. CSS Mini Tabs (the UN-tab, tab)

查看示範

這個CSS導航條是由一個比較流行的網頁設計中介 SimpleBits 完成，它展示了一個可以建立小TAB頁的方法。

22. Drop-Down Menus, Horizontal Style

查看示範

這個A List Apart CSS 菜單技術主要實現了一個縱向的二級菜單，其主要使用了 position: absolute CSS 屬性來決定了菜單的位置。

23. List Into a Navigation Bar

查看示範

Roger Johansson 的456 Berea Street 展示了一個簡單的理論——把一些帶有底線的列錶轉換成了一個導航條。這是一個非常好的給初學者的一個案例，可以通過它學習到如何通過CSS建立一個HTML結構的導航條。

24. CSS Tabs with Submenus

這個CSS導航條菜單允許你建立二級的TAB頁，相當不錯哦。

25. CSS Block Navigation Menu

這個CSS導航條，讓你可以建立一個帶有描述語的導航條。

26. XHTML & CSS Sprite Navigation

查看示範

這個時尚的CSS精靈導航條有三個狀態：空閑，滑鼠感應，和滑鼠點擊。

27. XHTML CSS Tabbed Menu

查看示範

你可以學習一個如果不用指令碼來建立TAB頁。

28. Cool, Simple, Horizontal CSS Menu

查看示範

教你如果建立一個簡單直接的CSS導航條。

29. CSS Menu with Descriptions

查看示範

一個會擴充的導航條。

30. CSS Hover Button

查看示範

一個相當不錯的教程教你如果制一個滑鼠感應式的按鈕。