你要创建的东西
导航菜单在聚光灯下有一个时刻。从用于移动的汉堡菜单到用于商店的巨型菜单，再到用于增强用户体验的粘性菜单，你可以在你的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类，它将被赋予包装菜单的容器。在这个例子中，它是main-nav。这就是我们稍后要用我们的CSS所针对的东西。theme_location => primary告诉WordPress，这是主要的导航。如果我在管理界面中创建了一个菜单，并勾选了Primary框，那么这个菜单将被用于代码中的这个位置。
有时你可能想在你的主题的其他地方添加一个导航菜单，例如在页脚，在这种情况下，你不希望使用theme_location => primary 。你只能对一个菜单使用这个。但你可能想使用额外的参数，你可以在WordPress手册的页面上找到这些参数，即 [wp_nav_menu()](https://developer.wordpress.org/reference/functions/wp_nav_menu/).
这里是菜单管理界面中的主导航的复选框。
wp_nav_menu() 函数输出的代码
在我们添加CSS来创建下拉菜单之前，熟悉WordPress为菜单产生的代码是有帮助的。
这里是一个典型的小企业的菜单，在菜单管理界面中显示。
现在这是该菜单的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 & Links</a></li>
</ul>
</div><!-- #main-nav -->
如果你检查这段代码，你会看到它由以下部分组成。
- 一个带有
main-nav类的 div，在wp_nav_menu()函数中定义。 - 在这里面，有一个
ul，ID为menu-navbar，类为menu。这是由WordPress定义的默认值。 - 在这里面，有一些
li元素，每一个都有menu-item menu-item-type-post_type的类，再加上其他一些特定的类，这些类是针对该菜单项所指向的文章类型和该菜单项当时的状态。每个元素都有一个独特的ID，其数字与数据库中导航菜单项的帖子ID相对应。 - 在其中一个
li元素的内部是另一个ul，其内部有自己的li元素，即二级菜单项。当用户将鼠标悬停在顶层菜单项上时，我们希望能将其下拉。
为创建下拉菜单的CSS编码
所以，现在我们知道WordPress正在输出什么，我们可以确定我们要用我们的CSS来针对哪些元素。
我们要实现几件事。
- 当页面被打开时，二级菜单项目被隐藏。
- 当用户将鼠标悬停在一个顶级项目上时，它下面的二级项目会出现。
默认隐藏第二级项目
在你的主题的样式表中，首先默认隐藏第二级项目。
添加这个。
main-nav ul ul {
display: none;
}
这将隐藏ul 元素在另一个ul 元素在main-nav 元素里面。然而，它不会隐藏顶级的ul 元素，因为它要求一个ul 嵌套在菜单内的另一个ul 。
现在，如果你打开页面并试图查看二级项目，这将是不可能的--它们将被隐藏。让我们来解决这个问题。
使第二层项目在悬停时显示出来
现在我们需要确保嵌套在顶层li 内的ul ，当顶层li 被悬停在上面时，就会显示出来。
把这个添加到你的样式表中。
.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的高值可以确保它被显示在其他东西的上面。- 剩下的代码给了列表的宽度，也给它添加了显示样式，包括一个阴影，使它看起来像是在页面的顶部。
现在让我们看看当我们把鼠标悬停在顶级项目上时，我们会看到什么。
它起作用了!当我把鼠标悬停在顶层项目上时，下拉菜单现在就显示出来了。
让你的下拉菜单变得移动友好
上面的代码对于桌面版的网站来说是很好的，但现实是，大多数人都会用手机访问你的网站。
这里的菜单太大，无法适应小屏幕，所以最好的解决办法是在小屏幕上编辑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
最后一步是添加一个脚本，使菜单在用户点击图标的时候出现。在你的主题中创建一个名为 "脚本"的文件夹，并在该文件夹中创建一个名为 "汉堡-菜单"的新文件，然后将这个文件添加到其中。
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' );
现在保存你的所有文件，你就会有一个小屏幕上的汉堡菜单。
下拉式菜单对小型、多级菜单很有用
当你的网站需要一个多层次的菜单，但你又不需要在你的顶层菜单之外有很多链接时，下拉菜单是实现这一目的的最简单方法。我用来演示的网站，其菜单中只有一个项目，下面还有其他项目，而且只有三个。使用一个巨型菜单会显得过分，而且单层菜单也不允许我显示我想要的一切。
能够在你的主题中加入这样的菜单，将使你的菜单更加灵活，增强用户体验。而且，你只需用几行CSS就可以做到这一点。
