大多數Web導航菜單是橫向水平的設計。這源于顯示器在發展過程中一直都是寬大于高的設計，橫向的導航欄似乎可以更完美的契合顯示器的寬度。
但是在最近幾年，另一種導航欄設計—縱向導航欄漸漸的流行起來。這不光是因為電腦等載體的屏幕變得更寬，更重要的是受到了移動設備的影響。在移動設備的訪問，因為屏幕限制，通常采用將導航欄隱藏的模式，比如漢堡菜單。這也讓人們自然地接受了縱向導航欄的存在。
縱向導航欄相比橫向導航，其實從條目數量來講，設計起來是更寬裕的。橫向導航欄的條目數量與字數共同受到了屏幕的寬度限制，而與之相比：縱向導航欄是字數受到屏幕寬度，條目數量受到屏幕高度的分別制約。
同時，縱向導航欄在響應式網站設計中，也更加方便，在空間不足的移動端屏幕上，通過漢堡菜單的設計，將縱向導航收起，內含的所有條目都可以從pc端的導航照搬過來，非常方便。
在國外許多網站的設計中，縱向導航欄已經受到了廣泛的認可與應用，以下是10個經典的網站案例與分析，讓我們來欣賞一下：
1.PETERSHAM NURSERIES
這是一家位于倫敦的開在溫室里的米其林一星餐廳的官網。
每個主導航文字條目下都有一個簡單的白色圖標，簡要的用圖片加深了每項導航的意義說明的同時，視覺感官也非常好。在橫向導航中，配以這樣的圖片應該是很難做到的，因為要容納下一個圖片，很可能會和整個頁面設計沖突。
第一個與第二個主導航的下面，有著不同的副導航列表。當鼠標懸停在這兩個導航上時，會有動效：主導航收起面積縮小，展現出副導航欄。這樣的設計在橫向導航中也經常使用。
當用戶使用移動設備訪問時，該網站采用了漢堡菜單式的自響應設計。整體布局變化不大，保證了pc端與手機端用戶體驗的一致。
2. ARBOR RESTAURANT
這個餐廳的官網同樣采用了縱向導航欄設計。
可以看到這個網站的導航條目數量非常多，而且都是主導航類別。如果應用橫向導航設計，這樣大量的條目要放上去會顯得非常擁擠，除非應用雙排導航設計或者合并某些導航條目。在這里，縱向導航設計的優勢就十分凸顯。
這個網站的縱向導航設計還有一個非常獨特的特點就是它的內容呈現方式。它通過導航菜單右邊的一個縱向內容欄來展現導航向的不同頁面中的文字內容，并且該內容欄還可以點擊右上角的X收起。該內容欄與導航欄對齊，黑白分明增強了頁面的對比度與色彩，整體顯得美觀大氣，并且內容的呈現絲毫不影響右邊的圖片的展現，渾然一體。
3.SMOKEY BONES
同樣是餐飲類的網站。
這個網站的主旨非常鮮明，用大圖中的富有誘惑力的食物圖片勾起人的味蕾，預定與就餐欲望。
該網頁的縱向導航同樣采用了隱藏設計，當點擊“menu”觸發了隱藏菜單時，主導航將向右推，整體頁面變暗的同時空出左邊的大片空間給細分的導航與內容條目。
4. MAMMOTH MEDIA
該媒體網站的導航條目與分欄頁面非常少，加上自己的博客一共才5個。并且每個頁面含有的內容量也不多。這種頁面采用縱向與橫向導航其實都可以，在內容有限的情況下，有時候嘗試一下獨特的設計，效果會更好。
該網站同樣有隱藏菜單設計，點擊“work”時會彈出兩個小的導航條目。該站點的移動端響應式設計與pc端并沒有什么不同，這提醒我們，當網站自身沒有足夠的內容時，就用獨特的設計來吸引人吧。
5. AMAZON
就像我們都知道淘寶一樣，亞馬遜在國際上也非常具有知名度。
在這種條目與分類雜項特別多的電商類網站上，淘寶，天貓與亞馬遜等網站都采用了縱向導航欄。在首屏上即可展現出所有的分類與導航，非常方便。
當你的網站導航與分類條目多的讓你無從下手，那么嘗試縱向導航欄無疑是最佳選擇。
6. CORUM
這個網站的縱向導航設計非常簡單，僅僅是羅列條目，沒有隱藏菜單欄。但是其亮點在于導航欄采用白底灰字的設計，淡化了導航欄在視覺上的注目度，強化了主要內容的存在感。同時，在內容向下滑動的時候，一直保持在左側的導航欄并不會給人突兀的感覺。而如果采用橫向導航欄跟隨頁面滑動的方式，那么對于用戶體驗可能會造成影響。
該網站的移動端的自響應式設計并沒有什么不同，在移動端上，人們同樣也是習慣縱向導航的。
7.NUA BIKES
縱向導航欄的另一個應用是可以在所有頁面中套用單一模板而無需另外設計。比如上面的這個網站的定位就是提供自行車相關的一些簡短信息，每個頁面的內容并不會太多。采用縱向導航欄的設計可以讓用戶在首屏上就完成該頁面上所有信息的瀏覽。所有頁面套用單一模板，通過緩存頁面樣式，在頁面的切換之間不會覺得突兀的同時，可以有效提高加載速度。
8. MICHAEL NGO
該網站的設計同樣從簡，并且通過縱向導航做了首頁不同模塊在頁面中位置的定位，引人注意的同時交互感很強。如果你的網站首頁內容不多，那么采用縱向導航欄配定位的格式，無疑是一個非常棒的選擇。
9. MEDIENSTADT.KOELN
這個網站采用了縱向導航與橫向導航的雙設計，右上角是標準的橫向導航，然而在左上角，該網站采用了漢堡菜單的模式進行了縱向菜單的折疊。這種設計可能會給訪客造成困惑，如果直接展現出來可能會更好些。
該縱向菜單的亮點在于主導航下的分導航的展現動效，通過一個向下的箭頭來進行展開與收起，交互感十足。
10. THE METRICK SYSTEM
相比前面九個網站將縱向導航與背景圖片非常清晰的隔離開來，該網站將導航整個融入了背景圖片中。主導航一共就4條，清晰簡單，當鼠標懸停時，展現出的子導航的動效也非常切合頁面設計。
該網站在移動端訪問，體驗與pc并沒有太大不同，唯一的不同就是子導航會直接出現在主導航的下方。如此輕量的導航欄設計在所有的設備屏幕上都可以獲得良好的自適應體驗。
總結
縱向導航欄的設計應用優勢在于，不同設備訪問的自適應體驗更好，菜單無需重新設計，并且對于寬屏的設備，有充足的擴展空間可以進行發揮。當設計網頁時，將縱向導航欄納入設計考慮也是很不錯的選擇。
