10. 導覽與標頭配置
|
325
不過,很多設計者質疑這種導覽的可用性,雖然它好像輕易地壓縮
導覽項目清單,但可能讓使用者感到有點迷惑,因為它使用了使用
者通常只會在表單中看到的表單元素。就我個人而言,我不建議這
種導覽方式,但許多網站都在使用這種導覽。
為了編程這種 select 選單瀏覽,你為網站的導覽選單建立兩組獨立
的 HTML — 建置下拉選單的
<select>
元素,以及針對較寬螢幕之
水平導覽的
<ul>
。網站利用媒體查詢,根據螢幕寬度隱藏其中一組
HTML。
這樣做的缺點是必須為導覽準備兩組獨立的 HTML,除了增加頁面
重量,這也表示,你總是得確認任何改變都必須被應用在這兩組程
式碼片段,不管使用者看見哪一種導覽,選單內容都必須是相同的。
在 select 選單與一般導覽之間作切換的另一種方式是利用
JavaScript。jQuery Responsive Menu Plugin(
https://github.com/
mattkersley/Responsive-Menu
)與 SelectNav.js(
http://lukaszfiszer.
github.io/selectnav.js/
)皆是利用 jQuery 將
<ul>
或
<ol>
改變成
<select>
的插件。
FLYOUT 導覽
Emeril's Restaurant 網站具有複雜的導覽,但是設計者處理得相當
不錯。
這個網站具有所謂的
yout
導覽
或
off-canvas
導覽
,如圖 10-34 所
示。當你點擊頂端的導覽圖示時,導覽從螢幕左邊突然跑出來(fly
out),並且把內容推向右邊。這種 flyout 導覽甚至包含子導覽項目,
你可以透過點擊箭頭而到達子導覽項目,子導覽項目將其他導覽項
目往下推 ...