網站的主選單很重要,在英文名稱中為Navigation又稱導航列,在台灣則是稱為主選單,顧名思義就是主要的選單,也是串接網站主要內容的骨幹,通常在網站設計的結構就會以主選單來貫串,而這個單位就是說明Wordpress建立主選單後我們常見的設定。
一、主選單的內容
通常會以頁面為單位設定內容,而設定到選單內容後,需要再把對應的選單設定為主選單才可以,這時才會在網站主選單的部份出現我們所設定的頁面。
設定方式:外觀>選單>選擇對應頁面即可
二、主選單的位置
樣式可分為很多方式,請參考下圖不建議使用浮動,主要是空間會縮小。
設定方式:外觀>自訂>版頁型式>主選單位置
三、其他必外設定
近年行動裝置掘起,因此UI/UX要符合行動裝置,就顯得格外重要,因此這邊建議必要設定的幾個項目,可以讓你的網站體驗更加順暢。
(1)Sticky 貼浮式選單
貼浮式選單,為我們在閱讀網頁時,往下閱讀時主選單會自動隱藏,而在我們滑鼠或滾輪往上稍微滑動一點點即可以自動出現主選單,這個稱為Sticky Navigation
設定方式:外觀>自訂>版頁型式>Sticky Navigation (記得Hide when scrolling down要勾選)
(2)Off canvas Navigation側滑式選單
在生活中,有許多人都是一支手提著包包一支手滑手機,而通常我們慣用手是右手,所以都會使用右手提包包,握公車、捷運的把手,因此左手就會單手操作手機,而單手操作手機時大部份都是使用姆指來控制,因此在這邊我們就要設定在行動裝置時出現左側滑式的選單。
設定方式:外觀>自訂>版頁型式>off canvas Navigation
四、主選單的色彩及背景
設定好了主選單的功能及位置後,接著就是美化樣式了,美化的方式分別可以從幾個地方著手(1)色彩 (2)背景圖片,這些可以變動的設定再與上方三大項進行排列組合,就會有千變萬化的視覺效果,不過因為美化這件事有很大的主觀判斷,老師就不變直接建議了。
設定方式:
(1)色彩部份 外觀>自訂>Colors>Primary Navigation 或 off canvas Navigation
(2)背景圖部份 外觀>自訂>background images>Navigation 系列
綜合以上不同的設定方式,主選單可呈現的方式也會有很多種,隨著不同的網站風格,會有不同的樣式,各位在求新求變的同時,也要記得網站是給人看的,所以使用者介面的友善是首要考量的。