如何在WordPress中制作下拉菜单

导航菜单已经成为人们关注的焦点。从用于移动设备的汉堡菜单到用于商店的大型菜单，再到用于增强用户体验的粘性菜单，您可以在 wordpress 网站中展示导航菜单的方式是一个很好的选择。

但是，如果您想创建一个简单的菜单，其中包含一些顶级项目和更多当用户将鼠标悬停在它们上时从它们下拉的项目？

在开始编写高级菜单（如大型菜单和汉堡菜单）之前，学习如何创建下拉菜单是个好主意。这将在比您想象的更多的站点上派上用场（并非每个站点都需要精美的菜单），并且它将为您提供开始构建更高级菜单所需的基础。

在本教程中，我将向您展示如何在您的 WordPress 主题中创建一个下拉菜单，使用 css 来定位WordPress 菜单功能输出的html 。这旨在用于您自己编码的主题，而不是用于已经有自己的菜单的第三方主题。但是，如果您正在使用菜单不是下拉菜单的第三方主题并且您想要添加它，那么您需要创建一个子主题并将您的菜单代码添加到其中。

你需要什么

要学习本教程，您需要：

WordPress的开发安装
您自己编写的主题，或第三方主题的子主题（如果您想修改菜单）
代码编辑器

WordPress 的内置菜单功能

您需要了解的第一件事是 WordPress 如何生成菜单。与静态站点不同，菜单不会硬编码到您的站点中。相反，WordPress 使用php函数来查询数据库并获取导航菜单项，然后以正确的结构显示它们。

导航菜单中的每个项目实际上是数据库中 wp_posts 表中的一个帖子——不是普通帖子，而是一种仅用于导航菜单项目的特殊帖子，具有自己的元数据，包括要显示的文本和目标的链接。

在您的主题中，打开 header.php 文件。您应该能够找到这一行：

wp_nav_menu(array('container_class' => 'main-nav', 'theme_location' => 'primary') );

根据参数的不同，您的函数可能看起来有些不同，但让我们分解上面的示例，看看每个元素的作用：

wp_nav_menu() 是获取导航菜单并输出它的函数。
然后将参数包装在一个数组中。
container_class 是将提供给包装菜单的容器的 CSS 类。在这种情况下，它是主导航。这就是我们稍后将使用 CSS 的目标。
theme_location => primary 告诉 WordPress 这是主要导航。如果我在管理屏幕中创建一个菜单并选中 Primary 框，那么这个菜单将用于代码中的这个位置。

有时您可能想在主题的其他地方添加导航菜单，例如在页脚中，在这种情况下您不想使用 theme_location => primary. 您只能将其用于一个菜单。但是您可能想要使用其他参数，您可以在 WordPress 手册页面中找到这些参数 wp_nav_menu()。

这是菜单管理屏幕中主要导航的复选框：

如何在WordPress中制作下拉菜单第1张

wp_nav_menu() 函数输出的代码

在我们添加 CSS 来创建下拉菜单之前，熟悉 WordPress 为菜单生成的代码会有所帮助。

这是小型企业的典型菜单，显示在菜单管理屏幕中：

如何在WordPress中制作下拉菜单第2张现在这是该菜单的 HTML 输出：

<div class="main-nav">
    <ul id="menu-navbar" class="menu">
        <li id="menu-item-610" class="menu-item menu-item-type-post_type 
        menu-item-object-page menu-item-home current-menu-item page_item page-item-609 current_page_item menu-item-610">
        <a href="https://121interviewcoaching.co.uk/">Home</a></li>
        <li id="menu-item-613" class="menu-item menu-item-type-post_type menu-item-object-page 
        menu-item-613"><a href="https://121interviewcoaching.co.uk/about/">About Me</a></li>
        <li id="menu-item-615" class="menu-item menu-item-type-post_type 
        menu-item-object-page menu-item-has-children menu-item-615">
        <a href="https://121interviewcoaching.co.uk/services/">Services</a>
            <ul class="sub-menu">
                <li id="menu-item-618" class="menu-item menu-item-type-post_type menu-item-object-page 
                menu-item-618"><a href="https://121interviewcoaching.co.uk/services/services-for-individuals/">
                Preparing for interviews / individuals</a></li>
                <li id="menu-item-617" class="menu-item menu-item-type-post_type menu-item-object-page 
                menu-item-617"><a href="https://121interviewcoaching.co.uk/services/services-for-groups/">
                Preparing for interviews / groups</a></li>
                <li id="menu-item-619" class="menu-item menu-item-type-post_type menu-item-object-page 
                menu-item-619"><a href="https://121interviewcoaching.co.uk/services/conducting-interviews/">
                Conducting interviews</a></li>
            </ul>
        </li>
        <li id="menu-item-30780" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30780">
        <a href="https://121interviewcoaching.co.uk/succeed-at-your-next-job-interview/">My Book</a></li>
        <li id="menu-item-614" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-614">
        <a href="https://121interviewcoaching.co.uk/clients-2/">Clients</a></li>
        <li id="menu-item-616" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-616">
        <a href="https://121interviewcoaching.co.uk/interview-tips/">Interview Tips</a></li>
        <li id="menu-item-612" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-612">
        <a href="https://121interviewcoaching.co.uk/where-i-work/">Areas covered</a></li>
        <li id="menu-item-611" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-611">
        <a href="https://121interviewcoaching.co.uk/contact/">Contact &#038; Links</a></li>
    </ul>
</div><!-- #main-nav -->

如果您检查该代码，您会发现它包括：

带有 main-nav 类的 div，在 wp_nav_menu() 函数中定义。
在其中， ul 带有 ID menu-navbar 和 class 的 a menu。这些是 WordPress 定义的默认值。
在其中，有许多 li 元素，每个元素都有的类 menu-item menu-item-type-post_type，以及其他特定于菜单项指向的帖子类型以及该菜单项当时的状态的类。每一个也有一个唯一的ID，编号对应于数据库中导航菜单项的post ID。
在其中一个元素内部li 是另一个 ul 具有自己元素的li 元素 - 二级菜单项。当用户将鼠标悬停在顶级菜单项上时，我们想要下拉的就是这个。

编写 CSS 代码以创建下拉菜单

所以现在我们知道 WordPress 输出了什么，我们可以确定我们想要使用 CSS 定位哪些元素。

我们想要实现几件事：

打开页面时，二级菜单项被隐藏。
当用户将鼠标悬停在顶级项目上时，会出现其下方的二级项目。

默认隐藏二级项

在您的主题样式表中，首先默认隐藏二级项目。

添加这个：

main-nav ul ul {
    display: none;
}

这会将元素隐藏在 ul 元素内的另一个 ul 元素内 main-nav 。但是，它不会隐藏顶级 ul 元素，因为它需要ul 将s 嵌套ul 在菜单内的另一个元素中。

现在，如果您打开页面并尝试查看二级项目，这是不可能的——它们将被隐藏。让我们解决这个问题。

使二级项目出现在悬停时

现在我们需要确保在顶层悬停时会显示 ul 顶层内的嵌套。lili

将此添加到您的样式表中：

.main-nav ul li:hover > ul {
    display: block;
}

现在，当您将鼠标悬停在顶级项目上时，将出现其下方的列表。但是你会发现它不会以你想要的方式显示。具体来说，它将下推菜单下方的内容。我们希望它看起来好像漂浮在内容之上。为了解决这个问题，我们需要为我们的 ul ul 元素添加一些布局样式。

将布局样式添加到二级列表

打开您的样式表并找到其中的行 display: none 。编辑该块以添加布局样式：

.main-nav ul ul {
    display: none;    position: absolute;
    top: 3em;
    left: 0;
    z-index: 99999;
    width: 180px;    background: #fff;
    box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
}

您还需要给顶级列表项相对定位：

.main-nav li {
    position: relative;
}

让我们看看这段代码做了什么：

position: absolute 给出二级列表绝对定位，将其从页面中的元素流中取出。对于更高级别的项目， position: relative 将顶级列表放入页面流中，并允许将绝对定位的元素放置在其中。
top: 3em 相对于其内部元素的顶部（即顶级列表项）定位列表的顶部。该 3em 值反映了顶级导航栏的高度。如果您的顶级导航具有不同的高度，请编辑您的。
left: 0 相对于其上方的项目，将列表放置在左侧。
z-index: 99999 定义元素在页面的三维模型中的位置。高值 99999 确保它显示在其他所有内容之上。
剩下的代码给出了列表的宽度并添加了显示样式，包括一个阴影，使它看起来好像在页面的顶部。

现在让我们看看当我们将鼠标悬停在顶级项目上时看到的内容：

如何在WordPress中制作下拉菜单第3张有用！当我将鼠标悬停在顶级项目上时，现在会显示下拉菜单。

使您的下拉菜单对移动设备友好

上面的代码非常适合该网站的桌面版本，但现实情况是大多数人将通过手机访问您的网站。

这里的菜单太大而不能放在小屏幕上，所以最好的解决方案是在小屏幕上编辑 CSS 并使用一些javascript创建一个汉堡菜单。

这是如何做到的。

向横幅添加菜单图标

首先，添加人们需要点击才能在小屏幕上访问菜单的图标。

将此添加到 header.php 文件中，在您希望菜单图标所在的位置：

<a class="toggle-nav" href="#">☰</a>

这将使用符号的 HTML 代码在一个元素内输出汉堡符号，该元素带有一个类，我们将使用该类将其隐藏在更大的屏幕上。

为汉堡菜单添加 CSS

现在您需要将 CSS 添加到样式表中。首先，在大屏幕上隐藏图标：

.toggle-nav {

    display: none !important;

}

现在在媒体查询中，为菜单添加 CSS：

@media screen and ( max-width: 550px) {
    
   
	a.toggle-nav {
	    float: right;
	    margin: 0 0 0.5em 0.5em;
	    display: inline-block !important;
	    color: #fff;
	    transition: color linear 0.15s;
	}
	
	a.toggle-nav:hover, a.toggle-nav:active {
	    text-decoration: none;
	    color: #fff;
	} 
   
	.menu-header {
	    display: inline-block;
	    position: relative;
		margin: 0;
		width: 100%;
	}
	
	#access .menu-header ul {
	    display: none;
		position: absolute;
	    top: 80%;
	    right: 0px;
	    min-width: 200px;
	    background-color: #7B3D84;
	    font-size: 1.2em;
	}
	
	#access .menu-header li {
	    display: block;
	    float: none;
	    padding-right: 2%;
	    text-align: right;
	}
	#access ul li:hover > ul {
		display: none;
	}
		 
}

请注意，如果您在主题中使用不同的类和 ID，则需要对其进行编辑。

添加JavaScript

最后一步是添加脚本以在用户点击图标时显示菜单。在您的主题中创建一个名为scripts的文件夹，并在其中创建一个名为burger-menu.js的新文件，并将其添加到其中：

jquery(document).ready(function() {
    jQuery('.toggle-nav').click(function(e) {
        jQuery('.menu-header ul.menu').slideToggle(500);
 
        e.preventDefault();
    });
    
});

现在确保脚本被主题调用。在主题的 functions.php 文件中，添加一个函数来将脚本加入队列：

function tutsplus_burger_menu_scripts() {
    
	wp_enqueue_script( 'burger-menu-script', get_stylesheet_directory_uri() . '/scripts/burger-menu.js', array( 'jquery' ) );
 
}
add_action( 'wp_enqueue_scripts', 'tutsplus_burger_menu_scripts' );

现在保存所有文件，您将在小屏幕上看到汉堡菜单。

如何在WordPress中制作下拉菜单第4张