如何在WordPress中制作下拉菜单

最新推荐文章于 2023-11-17 12:25:08 发布

cunjie3951

最新推荐文章于 2023-11-17 12:25:08 发布

阅读量2.1k

点赞数 1

文章标签： python java css html web

导航菜单吸引了片刻的关注。从用于移动设备的汉堡菜单到用于商店的大型菜单，再到用于增强用户体验的便利菜单，您可以在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()是获取导航菜单并将其输出的函数。
然后将参数包装在array 。
container_class是CSS类，将赋予包装菜单的容器。在这种情况下，它是main-nav 。这就是我们稍后将通过CSS定位的目标。
theme_location => primary告诉WordPress这是主要的导航。如果我在管理屏幕中创建一个菜单并选中“ 主要”框，则此菜单将用于代码中的该位置。

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

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

`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 &#038; Links</a></li>
	</ul>
</div><!-- #main-nav -->

如果检查该代码，您将看到它包含：

在wp_nav_menu()函数中定义的具有main-nav类的div。
在其中，一个带有ID menu-navbar和class menu的ul 。这些是WordPress定义的默认值。
在其中，有多个li元素，每个li元素具有menu-item menu-item-type-post_type类的menu-item menu-item-type-post_type ，以及其他特定于菜单项所导致的发布类型以及当时菜单项状态的类。每个人还具有唯一的ID，其编号对应于数据库中导航菜单项的发布ID。
在li元素之一内部是另一个ul ，其内部具有自己的li元素-第二级菜单项。当用户将鼠标悬停在顶层菜单项上时，我们希望将其删除。

编码CSS以创建下拉菜单

因此，现在我们知道WordPress正在输出什么，我们可以确定要使用CSS定位的元素。

我们想要实现以下两点：

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

默认情况下隐藏第二级项目

在主题的样式表中，默认情况下先隐藏第二级项目。

添加此：

.main-nav ul ul {
	display: none;
}

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

现在，如果您打开页面并尝试查看第二级项目，则将不可能—它们将被隐藏。让我们修复它。

使第二级项目出现在悬停上

现在，我们需要确保当顶级li悬停在其上方时，将显示嵌套在顶级li中的ul 。

将此添加到您的样式表：

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

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

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

打开样式表并找到带有display: none的行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确保将其显示在所有其他内容的顶部。
剩下的代码给出了列表的宽度，并为其添加了显示样式，其中包括一个阴影，使其看起来好像在页面顶部。

现在让我们看一下将鼠标悬停在顶级项目上会看到什么：