簡化在 WordPress 中建立超級選單的過程

#在上一篇文章中，我研究瞭如何確定大型選單何時適合您的網站以及如何使用外掛程式來建立大型選單。

但如果您感覺更有雄心，您可能更願意將自己的大型菜單編碼到您的主題中。這為您帶來的好處是能夠以您想要的方式設計菜單，並確保它與您的主題一致。

在本教程中，我將向您展示如何編寫大型選單並將其添加到您的主題中。

你需要什麼

要學習本教程，您需要以下內容：

• 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 导航菜单的内容创建一个简单的大型菜单，这种技术可以让您将一个菜单添加到您的主题中，而无需太多额外的代码。

但是，如果您想添加额外的功能，例如自定义样式和图像，使用插件可能会更快。您一定会在我们的顶级大型菜单插件列表中找到满足您需求的一款。

以上是簡化在 WordPress 中建立超級選單的過程的詳細內容。更多資訊請關注PHP中文網其他相關文章！