不管在網(wǎng)頁設(shè)計中是新手或老手，垂直選單列表都是一個值得討論的話題。垂直的選單設(shè)計好像破壞了設(shè)計的基本規(guī)則，但實際上卻常常有令人驚艷的運(yùn)用。

當(dāng)然并不是每個網(wǎng)站都需要這樣的設(shè)計，也可以看看五個網(wǎng)頁設(shè)計建議，來增加網(wǎng)站吸引力！

單頁版面

每個網(wǎng)頁都需有個導(dǎo)航選單，匡助用戶導(dǎo)向內(nèi)容。單頁版面可說是最靈活的，由于不需一籮筐的連結(jié)，也不需要大量的下拉選單和滑動面板。

Jorge Rigabert是很棒的網(wǎng)站范例。網(wǎng)站以大膽勇敢的用色，切割區(qū)塊來代表呈現(xiàn)不同的訊息，同時左側(cè)的垂直選單永遠(yuǎn)在你的鼠標(biāo)滾輪動彈時跟隨在旁邊，十分利便。

Silly Poems是另一個很棒的單頁網(wǎng)站范例，使用更具創(chuàng)意的設(shè)計風(fēng)格，同時享受很多圖形分散在整個頁面。但是網(wǎng)站內(nèi)容緊湊，垂直的選單在手機(jī)上是否需要不同的呈現(xiàn)方式呢？并沒有絕對的謎底。

單欄選單

不是所有網(wǎng)站都是單頁版面，慶幸的是有很多其他方法建構(gòu)一個垂直選單列表。有時設(shè)計師仍會選擇隨動彈的選單，這在不管垂直或水平的選單列表都是一種流行。但在很多情況下，垂直選單仍只是簡樸放置在頁面上方并與表頭(header)和平相處。例如下面范例：

麥當(dāng)勞的垂直選單列表設(shè)計是，當(dāng)鼠標(biāo)停留在鏈接，選單氣泡就會泛起在一旁。這與水平下拉選單相似，但不常見的原因是選單氣泡需要大量的空間。事實上，在步履版中就是改以水平呈現(xiàn)。

Power tothe Poster也是很好的例子，這是一個海報零售網(wǎng)站，這樣的選單擺設(shè)與背景相稱和諧。

小而簡選單

使用垂直選單列表，真的需要將訊息凝結(jié)在一個較小的區(qū)塊，這通常關(guān)系著調(diào)整字體和去除某些頁面元素。記住！設(shè)計垂直選單列表時保持「簡樸和易于辨識」。

Web Designer Wall使用粉紅色的網(wǎng)頁，并使用非常小的圖標(biāo)配以華麗的文字，最令人驚艷的是在「BLOG」特別呈現(xiàn)的彈出選單。由于尺寸和相對位置，使此垂直選單顯得精美。

ParachuteClothing的首頁使用類似的垂直選單列表并加入圖標(biāo)，圖標(biāo)不僅匡助是別，也增加了網(wǎng)頁的設(shè)計感。

躲藏式滑動選單

人們越來越習(xí)慣以步履裝置瀏覽網(wǎng)站，使得響應(yīng)式蔚為流行。

Kick Point在計算機(jī)版和步履版都采用滑動選單，依屏幕大小呈現(xiàn)固定比例。點開才固定呈現(xiàn)在右側(cè)，顯得更為簡潔，而Bad Assembly是一個非常類似的例子。

對于這樣的一個網(wǎng)站，利用躲藏式滑動選單是有意義的。在任何裝置上頁面都可更快速加載并且感覺更活潑。

以上每一個例子都可證實垂直選單列表在設(shè)計得宜下，如何得令人驚艷。固然不是每個網(wǎng)站可從這樣的設(shè)計中受益。但是我們在設(shè)計上，可以盡量試著嘗試，并不要以為只有水平才是最好，往往最出人意料的設(shè)計最能吸惹人，不是嗎？