最近，我们的一位用户问我们如何用 jQuery 滑动面板菜单替换导航菜单？使用滑动面板菜单可以大大改善移动网站的用户体验。在本文中，我们将向您展示如何在 WordPress 主题中添加滑动面板菜单。
最近，我们的一位用户问我们如何用 jQuery 滑动面板菜单替换他们的导航菜单？滑动面板菜单可用于极大改善移动网站的用户体验。在本文中，我们将向您展示如何在 WordPress 主题中添加幻灯片面板菜单。
注意：这是一个中级教程，需要足够的 HTML 和 CSS 知识。
注意：这是一个中级教程，需要足够的 HTML 和 CSS 知识。
用WordPress中的滑动面板菜单替换默认菜单 （Replacing Default Menu With a Slide Panel Menu in WordPress）
The goal here is to show a slide panel menu to users on smaller screens while keeping our theme’s default menu so that the users on laptops and desktops can see the full menu. Before we get started, it is important to know that there are many different WordPress 主题, and you will have to deal with a little CSS later on.
这里的目标是在较小的屏幕上向用户显示幻灯片面板菜单，同时保留我们主题的默认菜单，以便笔记本电脑和台式机上的用户可以看到完整菜单。 在开始之前，重要的是要知道有很多不同的WordPress 主题 ，稍后您将不得不处理一些CSS。
您需要做的第一件事是在计算机上打开纯文本编辑器（例如记事本），然后创建一个新文件。复制并粘贴此代码：
您需要做的第一件事是在计算机上打开纯文本编辑器（例如记事本）并创建一个新文件。复制并粘贴以下代码：
(function($) {
$('#toggle').toggle(
function() {
$('#popout').animate({ left: 0 }, 'slow', function() {
$('#toggle').html('<img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="close" />');
});
},
function() {
$('#popout').animate({ left: -250 }, 'slow', function() {
$('#toggle').html('<img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="close" />');
});
}
);
})(jQuery);
Replace example.com with your own 域名, and also replace your-theme with your actual theme directory. Save this file as slidepanel.js on your desktop. This code uses jQuery to toggle a slide panel menu. It also animates the toggle effect.
用您自己的域名替换example.com ，并用您实际的主题目录替换your-theme 。 将此文件另存为slidepanel.js在您的桌面上。 此代码使用jQuery切换幻灯片面板菜单。 它还会设置切换效果的动画。
Open an FTP客户端 like Filezilla and connect to your website. Next, go to your theme directory and if it has a js folder then open it. If your theme directory does not have a js folder, then you need to create one and upload slidepanel.js file into the js folder.
打开FTP 客户端（如Filezilla)并连接到您的网站。 接下来，转到您的主题目录，如果它有一个js文件夹，则将其打开。 如果您的主题目录没有js文件夹，那么您需要创建一个并将slidepanel.js文件上传到js文件夹。
下一步是设计或寻找菜单图标。最常用的菜单图标是三行菜单图标。您可以使用 Photoshop 创建一张或从 google 查找众多现有图像之一。在本教程中，我们使用 27x23px 菜单图标。创建或找到菜单图标后，将其重命名为 menu.png 并将其上传到主题目录中的图像文件夹中。
下一步是设计或寻找菜单图标。最常用的菜单图标是三行菜单图标。您可以使用 Photoshop 创建图像，也可以从 Google 找到众多现有图像之一。在本教程中，我们使用 27x23px 菜单图标。创建或找到菜单图标后，将其重命名为 menu.png 并将其上传到主题目录中的图像文件夹中。
The next step is to 将 javascript 文件加入队列 for slide panel in WordPress. Basically just copy and paste this code in your theme’s functions.php file.
下一步是将WordPress 文档放入WordPress幻灯片面板。 基本上，只需将此代码复制并粘贴到主题的functions.php文件中。
wp_enqueue_script( 'wpb_slidepanel', get_template_directory_uri() . '/js/slidepanel.js', array('jquery'), '20131010', true );
Now that everything is setup, you need to modify your theme’s default menu. Usually, most themes display navigation menus in theme’s header.php file. Open header.php file and find the line similar to this one:
现在已经完成所有设置，您需要修改主题的默认菜单。 通常，大多数主题在主题的header.php文件中显示导航菜单。 打开header.php文件，找到与这一行相似的行：
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
The goal here is to wrap your theme’s navigation menu with the HTML code to display your slide panel menu on smaller screens. We are going to wrap it in a <div id="toggle"> and <div id="popout">. Like this:
此处的目标是用HTML代码包装主题的导航菜单，以在较小的屏幕上显示幻灯片面板菜单。 我们将其包装在<div id="toggle">和<div id="popout"> 。 像这样：
<div id="toggle"><img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="Show" /></div>
<div id="popout">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</div>
将 example.com 替换为您自己的域名，将 your-theme 替换为您的主题目录。保存您的更改。
将 example.com 替换为您自己的域名，并将您的主题替换为您的主题目录。保存您的更改。
The last step is to use CSS to hide the menu icon for users with larger screens and display it to users with smaller screens. We also need to adjust the position of the menu icon and the appearance of the slide panel. Copy and paste this CSS to your theme’s stylesheet.
最后一步是使用CSS为大屏幕用户隐藏菜单图标，并将其显示给小屏幕用户。 我们还需要调整菜单图标的位置和滑动面板的外观。 将此CSS复制并粘贴到主题的样式表中。
@media screen and (min-width: 769px) {
#toggle {
display:none;
}
}
@media screen and (max-width: 768px) {
#popout {
position: fixed;
height: 100%;
width: 250px;
background: rgb(25, 25, 25);
background: rgba(25, 25, 25, .9);
color: white;
top: 0px;
left: -250px;
overflow:auto;
}
#toggle {
float: right;
position: fixed;
top: 60px;
right: 45px;
width: 28px;
height: 24px;
}
.nav-menu li {
border-bottom:1px solid #eee;
padding:20px;
width:100%;
}
.nav-menu li:hover {
background:#CCC;
}
.nav-menu li a {
color:#FFF;
text-decoration:none;
width:100%;
}
}
请记住，您的主题的导航菜单可能使用不同的 CSS 类，并且它们可能与此 CSS 样式冲突。但是，您可以使用 Chrome Inspector 工具找出样式表中哪些 css 类发生冲突来解决这些问题。尝试使用 CSS 来满足您的风格和需求。
请记住，您的主题的导航菜单可能使用不同的 CSS 类，并且它们可能与此 CSS 样式冲突。但是，您可以使用 Chrome 检查器工具查找样式表中哪些 CSS 类发生冲突来解决这些问题。使用 CSS 来满足您的风格和需求。
We hope this tutorial helped you add a slide panel menu in WordPress using jQuery. For feedback and questions please leave a comment below and don’t forget to follow us on 谷歌+
我们希望本教程可以帮助您使用jQuery在WordPress中添加幻灯片面板菜单。 有关反馈和问题，请在下面发表评论，不要忘记在谷歌+上关注我们
翻译自: https://www.wpbeginner.com/wp-themes/add-slide-panel-menu-wordpress-themes/