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

吞吞吐吐的發表於2017-10-12

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

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

1. The Menu menu

The Menu menu

 這是一個非常不錯的CSS選單,相當的獨特,每個圖示都有滑鼠感應,然後出現子選單。如果你想知道怎麼做的,你可以簡單的看一下這個網頁的原始碼。

 

2. Pure CSS hover menu

Pure CSS hover menu

檢視演示

一個縱向顯示的滑鼠感應的選單和其子選單。

3. Matte CSS Menu

Matte CSS

檢視演示

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

4. CSS Blur Menu

CSS Blur Menu

檢視演示

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

5. CSS Navigation with Glowing Icons

CSS Navigation with Glowing Icons

檢視演示

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

6. CSS Sliding Door using only 1 image

CSS Sliding Door using only 1 image

檢視演示

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

7. Navigation Matrix Reloaded

Navigation Matrix Reloaded

檢視演示

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

 

8. CSS Horizontal Menu

CSS Horizontal Menu

檢視演示

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

9. Woody CSS Menu

Woody CSS Menu.

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

10. Advanced CSS Menu

Advanced CSS Menu

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

11. Simple Yellow Tabbed

Simple Yellow Tabbed

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

12. Vimeo-Like Top Navigation

Vimeo-Like Top Navigation

檢視演示

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

13. Apple Like Colorful CSS Menu

Apple Like Colorful CSS Menu

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

14. CSS Hoverbox

CSS Hoverbox

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

15. Big CSS Box

Big CSS Box

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

16. Simple CSS-based drop-down menu

Simple CSS-based drop-down menu

檢視演示

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

17. Two Level Horizontal Navigation in CSS

Two Level Horizontal Navigation in CSS

檢視演示

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

18. Uberlink CSS List Menus

Uberlink CSS List Menus

檢視演示

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

19. CSS-Only Accordion Effect

CSS-Only Accordion Effect

檢視演示

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

20. Tabbed Navigation Using CSS

Tabbed Navigation Using CSS

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

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

CSS Mini Tabs (the UN-tab, tab)

檢視演示

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

22. Drop-Down Menus, Horizontal Style

Drop-Down Menus, Horizontal Style

檢視演示

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

23. List Into a Navigation Bar

List Into a Navigation Bar

檢視演示

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

24. CSS Tabs with Submenus

CSS Tabs with Submenus

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

25. CSS Block Navigation Menu

CSS Block Navigation Menu

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

26. XHTML & CSS Sprite Navigation

XHTML & CSS Sprite Navigation

檢視演示

這個時尚的CSS精靈導航條有三個狀態:空閒,滑鼠感應,和滑鼠點選。

27. XHTML CSS Tabbed Menu

XHTML CSS Tabbed Menu

檢視演示

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

28. Cool, Simple, Horizontal CSS Menu

XHTML & CSS Sprite Navigation

檢視演示

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

29. CSS Menu with Descriptions

CSS Menu with Descriptions

檢視演示

一個會擴充套件的導航條。

30. CSS Hover Button

CSS Hover Button

檢視演示

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

本文轉自Justin部落格園部落格,原文連結:http://www.cnblogs.com/justinw/archive/2009/12/19/1627698.html,如需轉載請自行聯絡原作者


相關文章