在上一篇文章中，我研究了如何確定大型菜單何時適合您的網站以及如何使用插件來創建大型菜單。
但如果您感覺更有雄心，您可能更愿意將自己的大型菜單編碼到您的主題中。這給您帶來的好處是能夠按照您想要的方式設計菜單，并確保它與您的主題一致。
在本教程中，我將向您展示如何編寫大型菜單并將其添加到您的主題中。
你需要什么
要學習本教程，您需要以下內容：
- WordPress 的開發安裝（在一切正常運行之前，請勿將其添加到您的實時網站中）。
- 您自己可以編輯的主題，或者如果您使用的是第三方主題，則為該主題的子主題。
- 代碼編輯器。
我正在使用第三方主題 (ColorMag)，因此我將為其創建一個子主題并向其中添加我的樣式。
超級菜單如何工作
我們的大型菜單將采用 WordPress 中的菜單系統輸出的代碼并將其顯示為大型菜單。我不會向網站添加額外的菜單：如果您愿意，可以這樣做，但由于這個大型菜單無法在較小的屏幕上工作，因此我更喜歡堅持使用相同的菜單。這是因為我喜歡讓移動設備和桌面設備上的用戶訪問相同的導航。
大型菜單的樣式將僅適用于較大的屏幕。對于較小的屏幕，我建議使用漢堡菜單，該菜單在用戶點擊漢堡（三條水平線）圖標之前是不可見的。您可以在我們的漢堡菜單編碼教程中了解如何編碼漢堡菜單。
開始使用
第一步是向菜單中添加大量菜單項。這意味著您將有大量內容來填充您的大型菜單。
我在菜單中添加了很多鏈接，并具有三個級別的導航。當用戶將鼠標懸停在頂級菜單項上時，該菜單項下面的項目將出現在大型菜單中。現在，它們出現在標準布局中：
讓我們首先識別網站前端此菜單輸出的代碼。這是我的菜單的（編輯后的）代碼。我取出了一些 li 元素并刪除了大部分 CSS 類，以便您可以看到 HTML 的結構：
<nav id="site-navigation" class="main-navigation clearfix" role="navigation"><div class="inner-wrap clearfix"> <p class="menu-toggle"></p> <div class="menu-primary-container"> <ul id="menu-main-nav" class="menunav-menu" aria-expanded="false"> <li><a>Home</a></li> <li> <a>Top Level Item</a> <ul class="sub-menu"> <li> <a>Second Level Item 1</a> <ul class="sub-menu"> <li><a>Third Level Item 1</a></li> <!-- more li elements --> </ul> </li> <li> <a>Second Level Item 2</a> <ul class="sub-menu"> <li><a>Third Level Item 5</a></li> <!-- more li elements --> </ul> </li> <li> <a>Second Level Item 3</a> <ul class="sub-menu"> <li> <a>Third Level Item 7</a> </li> <!-- more li elements --> </ul> </li> </ul> </li> <li> <a>Another Top Level Item</a> <ul class="sub-menu"> <li> <a>Second Level Item 4</a> <ul class="sub-menu"> <li><a>Third Level Item 12</a></li> <!-- more li elements --> </ul> </li> </ul> </li> </ul> </div> </div> </nav>
那里有很多代碼，但我建議花點時間研究它，因為它可以幫助我們識別我們需要使用 CSS 來定位的類和元素（以及子元素），以便創建我們的大型菜單。
我們可以使用 WordPress 生成的 CSS 類來設計我們的大型菜單并確保其布局正確。我們將使用媒體查詢來確保菜單僅出現在足夠大的屏幕上。
我們將針對的具體元素是：
- .main-navigation
- ul 元素（包括 ul ul 和 ul ul ul）
- li 和 a 元素位于 ul 元素內。
在較小的屏幕上，我將使默認菜單可見，盡管我建議在非常小的屏幕上使用移動替代方案，例如漢堡菜單。我的主題已經為小屏幕編碼了一個漢堡菜單，所以我不需要擔心這一點。
注意：您的主題的 HTML 輸出將與我的類似，因為它是由 WordPress 生成的。但也會有差異，例如主導航元素的類或 ID。為了確保萬無一失，最好先檢查一下。
設置媒體查詢
第一步是為大型菜單樣式添加媒體查詢（如果需要）。在主題的樣式表中，添加以下內容：
@media screen and ( min-width: 500px ) { }
您可以將 min-width 值更改為適用于您的主題并對應于任何漢堡菜單已存在的媒體查詢的值。
設置布局樣式
我現有的菜單的樣式是這樣的，只有當我將鼠標懸停在緊鄰其上方的第二級項目上時，才會顯示第三級項目。我想更改此設置以便顯示所有菜單項。然后我將對它們進行樣式設置，以便它們正確布局。
讓我們首先在用戶將鼠標懸停在頂級菜單項上時使第二級和第三級菜單項可見。
將其添加到媒體查詢內的樣式表中：
.main-navigation ul:hover li ul, .main-navigation ul:hover li ul li ul { display: inherit; }
現在，當您刷新頁面并將鼠標懸停在菜單項上時，它看起來有點像這樣：
第二層和第三層的項目是可見的，但說得客氣一點，它們看起來很亂。讓我們解決這個問題。
我們首先將每個頂級項目下的 li 元素設置為全寬。為了實現這一點，我們必須通過將其設置為靜態來刪除上面元素的任何相對或絕對定位。我們還將添加 display:inherit 以確保當頂級菜單項懸停在上方時，下級菜單項可見。
將其添加到您的樣式表中：
.main-navigation { position: relative; } .main-navigation li { position: static; } .main-navigation ul li:hover ul { display: inherit; position: absolute; left: 0; right: 0; width: 100%; } .main-navigation ul li:hover ul li ul { display: inherit; position: relative; left: 0; }
菜單現在看起來像這樣：
它是全寬的，但我們需要做一些改進布局。讓我們向二級列表添加一個浮動，以便它們彼此相鄰顯示。
將其添加到您的樣式表中：
.main-navigation ul li:hover ul li { float: left; position: static; display: block; padding-top: 1em; } .main-navigation ul li:hover ul li ul li { float: none; padding-top: 0; }
現在菜單看起來更好了：
浮動正在工作，但背景顏色已關閉。編輯 .main-navigation ul li:hover ul 元素的樣式以添加背景樣式。您使用的具體顏色取決于您使用的主題。
.main-navigation ul li:hover ul { display: inherit; position: absolute; left: 0; right: 0; width: 100%; background-color: #bababa; }
現在菜單看起來更好了：
讓我們為各個列表添加一些顏色和布局樣式，以使第二級項目更加突出。將其添加到您的樣式表中：
.main-navigation ul:hover ul li a:link, .main-navigation ul:hover ul li a:visited { color: #b01b1b; text-decoration: underline; } .main-navigation ul:hover ul li ul li a:link, .main-navigation ul:hover ul li ul li a:visited { color: #fff; text-decoration: none; }
這使得列表看起來更好，第二級項目帶有下劃線和紅色。請隨意修改這些顏色以適合您的主題。
最后，讓我們刪除第三級項目的上邊距，以便它們更緊密地聚集在一起。編輯它們的代碼如下：
.main-navigation ul:hover ul li ul li a { padding-left: 1em; padding-top: 0; }
現在菜單看起來更加整潔：
我們現在有了一個功能強大的大型菜單，使用我們主題中的主導航菜單。
您不需要插件來創建簡單的超級菜單
如果您想使用 WordPress 導航菜單的內容創建一個簡單的大型菜單，這種技術可以讓您將一個菜單添加到您的主題中，而無需太多額外的代碼。
但是，如果您想添加額外的功能，例如自定義樣式和圖像，使用插件可能會更快。您一定會在我們的頂級大型菜單插件列表中找到滿足您需求的一款。
