簡介
繼上篇章有述說到Sub Menu的套件(Superfly)與應用，大家在新增Menu上可能已經有了第一步的了解，今天這篇章我們來講講最正統的如何新增在我們的網頁中並在手機板有不同的樣貌，這篇我們會搭配著MegaMenu外掛來讓我們的Menu Style更活潑以及更多功能化。
Install Mega Menu Plugin
又到了我們最熟悉又最必須要知道的環節，安裝外掛，通常WordPress網頁最聰明的做法就是你已有既定的網頁基礎架構知識，並搭配著使用得宜的物掛與Template即可做出不錯的網頁。好不多廢話，直接到Plugin->Add New，打上Mega Menu，安裝好之後並啟動(Activate)之。
Menu Structure and Setting
基本Menu要怎麼新增呢?!先點選Appearance->Menu大家可以看到黃色螢光筆處的”Create New Menu”，點下後會看到Menu Structure中空無一物，這邊就要靠左側有著許多下拉是選單處的Item來新增Menu的按鈕。
這邊有我們剛剛新增的外掛Mega Menu Menu Setting、Page 、 Post 、 Portfolio 、 Custom Links 、 Tag…，那我們最常使用到的其實就是Post 、 Custom links與Post，但這也是因網頁特性而異，假如你的網頁類似部落格，或是網頁內容是以比較特殊的方式新增內容，就會用到其他的功能，而這邊我們假設大家都是透過Post來新增網頁中每一頁的內容而定。
Custom Links是比較常用來作Menu標題，假如你只想要單純讓她是標題而不是連結的話，則URL處可以只打一個字元即可，不打他不會讓你新曾到Menu中。Link Text則是打上標題名稱。
而新增Page到Menu則如上圖所示，你可以先點選View All他會將你Page全部展出，你再把你想要連結的頁面新增到Menu中。
都新增好之後我們可以看到上方全覽圖的Menu Setting處有三個選項按鈕，Top Navigation這一定要打勾的，因為這關係到是否在你首頁或其他頁面(DeskTop View)顯示此Menu。第二個基本上也是要打勾，現在網頁都講求RWD，Mobile Navigation則會讓你的Menu在Mobile視窗解析度下顯示不同的選單呈現。最後一個則是Fullscreen Navigation，這其實是選配，假如你的Templete有支援Fullscreen Menu則可以將此勾選。
基礎都設定好之後別忘記到Manage Locations設定剛剛上方所提到的Menu RWD Location Setting，她這三個選項可以讓你選擇要Assigned哪一個Menu。都設定好別忘記按下儲存。
在此標題提到的Menu Structure就如上圖所示，你將要在Menu中的Item都放進去這容器後，可以將它們做階層排列，變成子階層的就會變成主階層的下拉是選單，我們可以透過拖曳要成為子階層的項目放置到指定項目下方，會看到拖曳的時候會有出現虛線階層指示，如上圖所示。
最後我們看到Menu這區塊的最後一個設定，Max Mega Menu Setting，這邊可以設定Mega Menu在Top或是Mobie的選單效果，Event是觸發效果，Effect就是效果選項，Theme則是你的Menu Theme Setting，在下個段落會提到。
Mega Menu Setting
接著我們到Mega Menu Setting來做細部設定，總體來說這邊算是設定Mege Menu的Style區，在設定完成後儲存成Theme並應用到剛剛的Appearance Menu區。
Click Event Behaviour :定義將事件設置為“單擊”時應該發生的情況。 這也適用於手機，可設定要怎麼觸發Menu的方式。
Mobile Menu Behaviour : 定義Mobile Menu的子選項的行為。
CSS Output : CSS將保存到wp-content / uploads / maxmegamenu / style.css並從此處讀取，亦可在此修改。
Menu Item Descriptions : 這個建議不要開，Menu會變很醜，Menu最好就是乾淨。
Unbind JavaScript Events :為了避免與Menu系統發生衝突，默認情況下將刪除已添加到Menu中的JavaScript事件。
Prefix Menu Item Classes :給Menu項類加上“ mega-”前綴詞，在要使用Code新增時比較好辨識。
Active Menu Instances :可以在一頁中重複出現該設定的Menu。
第二部分是Menu Theme的設定，這邊就是要一直Try Test，可以設定Menu中的字體、背景顏色、行距、陰影、Menu Align頁面的哪個位置、Menu的高度、Fly Menu的動態設定等等。
第三部分則是Location的設定，這在Appearance Menu有設定過的話，這邊會直接連結到那邊的設定。
Tool這邊比較算可以不用作動到的地方，主要是在清除Menu Cache、輸出調整好的Theme以及匯入，所有動作完成後要記得儲存。
Mega Menu Application
讓我們回到Appearance Menu的部分，可以看到上圖的Menu Structure會出現每個Item前面有著Mega Menu的小Icon，請點選他，這個的目的是要來雕刻Menu，可以讓你Menu放入圖片、影片、Social Media Button等豐富你Menu的項目。
上圖則是進入Mega Menu設定頁面，可以看到有很多區塊，我們從頭說。
Step1:
要先在Sub Menu Display Mode選到第二個Grid Layout才可以編輯客製化的Mega Menu
Step2:
假如要新增Row之後的最右側的”+ Column”，可以點下這按鈕，並在新增下方選項前可以先設定Columns的參數，基本上都是以12 columns，並且可以讓此Columns加入Custom CSS。
Step3:
看到上圖一右側箭頭處，選擇你要新增的項目，有Video , Image等等，如上圖。選取你所想要新增的項目點選將會加入到你的Columns之中。
Step4:
注意Sub Menu中的Column的布局，這有關乎到整體Sub Menu的顯示。我們可以看到上圖，假設你想要將某一ROW要分成6小區塊，就把該項目設定成”2/12″，透過方向按鈕可調整數值，bootstrap RWD會講道Row的階層，連結在此。
Step5:
而每個Item所可以設定的細項都不同，但要設定內容同樣是要點選”板手”的選項進行設定。設定好之後請按下Save。
結果顯示&小結
其實Mega Menu其實可以講得更細，可以再以一篇的內容來述說每個項目的新增方式，在這之前大家可以先測試玩玩看，這篇是以一個架構下來講述整體的WorkFlow，成果可以看看如上圖，剛剛新增了Mega Menu中的Image。