關于使用響應式設計來創建一個手機導航欄，之前我曾經寫過一個教程。現在我發現了一種新的方式，可以不使用JavaScript來實現響應式菜單。它完全使用整潔和語義化的HTML5標記，而且菜單可以居左、居中和居右對齊。不像前面一個教程中需要點擊來展開，這個菜單可以在hover時展開，對用戶更為友好。它也包含一個指示器來顯示當前激活的菜單項。這種方式可以工作于所有的移動和桌面瀏覽器中，甚至包括IE。

演示

目標

　　這個教程的目標是向你展示如何把一個傳統的列表菜單在更小的屏幕上轉換為可伸展的菜單。

這種方式對于下圖這種有很多鏈接的導航來說非常有用。你可以把所有的按鈕轉換為一個優雅的伸展條。

HTML代碼

下面是導航的HTML代碼。<nav>標簽用于創建伸展條，包含絕對定位的css屬性。我會在稍后解釋這一點，current類表示當前激活的菜單鏈接。

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表