Flash Sale! Save on unlimited courses & creative assets downloads! Flash Sale! Save 40%
Advertisement
  1. Web Design
  2. Responsive Web Design
Webdesign

一個簡單,響應式,流動式導覽

by
Length:LongLanguages:

Chinese (Traditional) (中文(繁體)) translation by Erica Wong (you can also view the original English article)

我們將構建一個簡單,響應式的網頁菜單選項。這個方法將有助在設計手機界面時把重點放在網頁的內容上。我們將不會用上JavaScript,而我們先從設計流動式界面開始。

流動式導覽

如果你讀過 Luke Wroblewski's Mobile First 你會比較熟悉他的想法是:

一般的規則是,內容理應比手機的導覽優先。

他指的是手機用戶往往是想即時找出回答;他們希望直接找到他們想要的,而不是更多的選項。

很多網站,甚至是響應式的,都習慣把導覽應該放在所有網頁的頂部,但這種方法可能會導致高親合力的問題。因為手機用戶往往缺乏兩樣東西:屏幕空間和時間。如果主導覽被放置在網頁的頂部,很有可能它會掩蓋整個手機屏幕。當導覽的鏈接為手機用戶變得更大更容易接時,問題更是變得嚴重。往往迫使手機用戶一直滾動至不見導覽才看到內容。

這個便是一個例子 London & Partners:

一個很好的響應式設計,但在標準的手機屏幕尺寸( 320px x 480px )你只能看到導覽菜單。當然,我也會想在首頁看到導覽菜單以外的東西吧?這不只是 London & Partners - 而是有很多類似的響應式網頁。

那麼有什麼解決方法呢?

我們也經常看到設計師們用jQuery來解決這個問題,來看看Chris Coyier's explanation 裡的 Five Simple Steps 響應下拉式菜單吧。


大屏幕,小屏幕。

用jQuery 複製出一個 <select> 的下拉式菜單,然後把這個複製出的菜單隱藏起來。在小屏幕下,media queries 便會把原有的菜單隱藏,呈現複製的下拉式菜單。這是很好的方法,因為下拉式菜單只佔用很小的位址和善用手機特有的界面(像iPhone的滾動條)。

或者,你可以隱藏導覽菜單,然後當點擊"菜單"的按鈕時才出現。Twitter 的 latest Bootstrap 有這樣的示範。

在較小的屏幕導覽菜單會被隱藏,並顯示一個"列表"的圖標(很快便成為公認"菜單"標示),當點擊它是真正的導覽菜單便會出現。手機用戶不但可以看到想看到的內容,同時也有導覽菜單讓他們可以看到更多內容。

純CSS解決方法

以下我們將會使用 Luke 討論的方法,使用CSS和優先處理流動式導覽。優先處理流動式是什麼意思?簡單地說,是要先設計一個小屏幕的界面,然後才設計大屏幕的界面。我們會用 media queries 偵測屏幕的尺寸變更,然後逐步添加樣式和功能。

這表示當用戶用手機瀏覽時,只會有少量的CSS和所需的檔案會被下載。這也意味著,舊版本的IE瀏覽器(不支援 media queries)會出現手機網頁的界面。Joni Korpi 的 Leaving Old Internet Explorer Behind 裡有更多這方面的說明。

步驟1 :基本標籤

以下我會慢慢為你解釋這個做法背後動機。現在,我們先開啟一個新的 HTML 5文件檔,開始吧!

注: 別忘了 Viewport Meta 的標籤!

Having done that, we'll add some page structure. Straight-forward stuff and all for the purposes of our demonstration. I've used filler text from Monty Python's Holy Grail (thanks Chris Valleskey) which is a nice way to put a smile on your face whilst you're working :)

現在,我們來寫一些網頁的結構吧。這些都是簡單和直截了當的東西。我也用上了 Monty Python 的 Holy Grail(感謝 Chris Valleskey)的文章當成這網頁的字,這令你的工作更方便 :)

步驟2 :導覽菜單標籤

我們已經有了一個基本的html頁面,所以現在我們要開始這文章的重點 - 主導覽菜單..

你沒看錯,我們將老加在第68行,在最後一篇文章之後。不要忘了,我們正在設計小屏幕的界面,後面才開始討論大屏幕。我們把導覽放置在網頁的底部,那樣它便不會蓋住內容。然後在網頁的頂部放置一個鏈接,這樣用戶就可以找到導覽菜單了。

步驟3:重設CSS

這步可跟你的個人喜好以定,我的步驟可能跟你的會有點一樣。我覺得Eric Meyer的重置檔案很仔細,尤其是他剛修改過的,有不錯的基礎。我們將會加入他的設定:

步驟4:基本樣式

目前,我們的網頁很平淡..

..所以我們來添加一些簡單的樣式吧。

這是都是一些基本的東西(字體,行的高度,顏色等),目前最重要的是我已經為"菜單"的按鈕設了樣式,令它在最常發現導覽菜單的<header>中傾向右側的。
把滑鼠懸停上面,你便會看到按鈕的另一個狀態 - 雖然這個設定在觸摸屏不管用,但這個設定會出現在不太合作的Internet Explorer版本上。為了手機用戶,我們設定了:focus的狀態。它跟:hover的狀態是一樣的,:focus會在觸摸屏上出現狀態,讓用戶知道他們已經成功按下了菜單的按鈕。

不管怎樣,點擊它,你就會被帶到菜單,讚!

現在讓我們把菜單變得更漂亮吧。

步驟5:菜單樣式

其實,我們將會把我們的菜單設計得像之前的 London & Partners 的示範一樣,只是我們把它放在網頁的底部..

好多了。我們所做的菜單鏈接不錯,大(Luke Wroblewski 的博客有更多關於Touch Target Sizes的說明),並再次確定:focus的狀態提示。

我們也包括了一個"top"的鏈接,方便用戶點到網頁頂部。

步驟6:放大吧

OK,我們已經處理好小屏幕的界面了,那麼現在我們要加入 media queries。這樣當屏幕變大時,就可以隱藏小屏幕的樣式用點大屏幕的了。

但是在什麼時候它變得不合適呢?有很多不同 media queries 的做法,我們以一個手機屏幕大小是320px x 480px為基礎 。這是把手機垂直看時寬度是320px,橫看便是480px,所以我們就把第一個 media queries 檢測設定為任何尺寸大過 480px。

這可是,接下來的是平板電腦設定。而iPad的解像度是980px x 768px,所以我們可以設定任何比768px小的便適合用上小屏幕的樣式,而任何大於768px的便可以做類似跟桌面界面差不多的樣式。

在我們開始加入不同的樣式設定,先來建立 media query:

當屏幕的寬度只少有768px時,這個 media query 會執行所有在內的樣式設定。注意當中的only是關鍵字,它將確保Internet Explorer 8能正常執行樣式設定。可看這裡,有我之前解說過的。

我們來讓"菜單"的按鈕消失吧:

只要把瀏覽器的寬度變大,"菜單"按鈕就會不見了。

步驟7:移動菜單

現在我們需要把主要的導覽切換到網頁的頂部。先把它取出,然後用 position: absolute 把它頂至頂部。

首先,我們必須在 media query 或 css 的開端把它所屬的標籤(.wrapper)設為 position: relative。

只要菜單被設定為 position: absolute,我們需要刪除一些標籤的設定,把列表顯示為 display: inline 和刪除邊框和標籤的距離便可以。當然,不用修改之前定立的 hover 狀態。

步驟8:最後一件事

你可能會注意到我們有個"頂至"的鏈接 - 還需要嗎?

有多種可以將其刪除的方法,但為確保一切正常,讓我們先為每個列表的項目添加一個 class:

這樣我們就不用 media query 也能把它刪除:

結論

完成!這些只是一些基本的設定,往後如果你的網頁需要支援更多的樣式,你可以繼續添加一些 media queries。一個簡易,響應式,為手機擾先設想的網頁設計,還需要什麼呢?!

更多資源

這些是以上提到的有用鏈接:

Envato qr branded
关注我们的公众号
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.