相關CSS制作網站導航菜單的文章:XHTML+CSS制作的網站導航菜單。
導航結構在網站設計中是起到決定性作用的,導航菜單/欄常常通過顏色、排版、形狀和一些圖片來幫助網站創造更好的視覺和感受,它是網頁設計的關鍵元素。
雖然網站導航菜單的外觀是網頁設計中關系到整個設計成敗與否的關鍵,但視覺效果也不能影響到網站可用性。最理想的設計是網站的導航既能比其他網站的導航外觀更吸引人,又不會奪走網站內容的焦點。
不幸的是,目前還有很多網站在使用過時的導航菜單方式,這樣使網站可用性大打折扣。如果導航菜單過分的依賴圖片那會失去一定的用戶,比如那些網速慢或浏覽器設置關閉讀取網頁圖片功能。但是,並不意味著導航一定要樸素簡單才能提高訪問性及網站可用性。
現在破洛洛歸納一下CSS導航菜單的好處:
結合CSS和XHTML來制作導航菜單會比使用Javascript或圖片來實現同樣效果更加節省代碼(CSS可以結合一些圖片來制作導航而且代碼量很小,而完全使用圖片的導航代碼量也要多很多)。代碼量曉得網站會更有益於搜索引擎的索引排名,而且讀取速度會快很多。
基於CSS的導航菜單對用戶來說不但更有可用性,而且更有親和力。如果用戶關閉讀取圖片和(或)CSS的功能,網站仍然可以以簡潔的方式浏覽,內容結構及網站可用性不會受到影響。有極少數用戶使用的舊浏覽器雖然不支持CSS,但網站導航菜單卻仍然能夠訪問。
使用CSS來設計導航菜單並不會限制你的設計。事實上,CSS會提供更加靈活的導航設計方案,當用CSS來設置背景圖時也能實現各種視覺效果。
如果你不想自己從頭開始設計基於CSS的導航菜單,那麼有大量的免費腳本資源可以拿來使用。但暴風彬彬並不提倡使用這些腳本資源,因為這樣的話你會和其它成百上千的網站使用同樣的導航菜單。不過有一些菜單可以自定義樣式(顏色、字體、尺寸及背景圖)來符合你自己的網站風格。