如何在WordPress上创建响应式菜单

您想在您的 WordPress 博客上创建响应式菜单吗？

如今，移动用户数量超过台式机用户。添加响应式移动菜单可使用户更轻松地浏览您的网站。

在本教程中，我们将向您展示如何轻松地在WordPress上创建响应菜单。

但是之前，如果您从未安装过WordPress发现 在WordPress上安装多少个插件. et 如何找到，安装和你的博客激活WordPress主题

然后回到为什么我们在这里。

在这里，向您展示针对初学者的带有插件的方法和针对高级用户的编码方法，这将是一个深入探讨的问题。

第一种方法：使用WordPress插件创建移动菜单

这种方法比较容易，建议初学者使用，因为它不需要任何特殊的编码技能。

在这种方法中，我们将创建一个菜单（带有一个汉堡图标）在移动屏幕上滑动。

您需要做的第一件事是安装并激活 WordPress响应式菜单插件 。有关更多详细信息， 查看有关如何安装WordPress插件的指南 .

激活插件后，插件将在菜单上添加一个名为“ 响应菜单 ”。点击它会带你进入设置页面 WordPress插件.

您必须首先输入移动菜单应显示的尺寸。默认值为800px，适用于大多数网站。

之后，您必须选择要在移动设备上使用的菜单。

屏幕上的最后一个选项允许您为菜单提供CSS类。这将允许插件在小屏幕上隐藏您的无响应菜单。

不要忘记点击« 更新选项 保存设置。

我们也建议您发现我们的 10 WordPress插件可在您的博客上创建菜单

现在，您可以访问您的网站并调整浏览器屏幕的大小，以查看响应式菜单的作用。

插件« 响应菜单 »提供许多其他选项，使您可以修改响应菜单的行为和外观。您可以在插件的设置页面上浏览这些选项，并根据需要进行调整。

2方法：如何手动添加移动菜单

在移动屏幕上显示菜单的最常用方法之一是使用杠杆。

此方法要求您将自定义代码添加到WordPress文件中。

在以前的教程之一中，我们向您展示 如何创建一个WordPress插件.

首先，您需要打开一个文本编辑器（如记事本）并粘贴此代码。

（功能（）{风险NAV =的document.getElementById（ '与网站导航'），按钮，菜单;如果（NAV）{返回} ;!按钮= nav.getElementsByTagName（ '按钮'）[0] =导航菜单。的getElementsByTagName（ 'UL'）[0]如果{返回;}（按钮！）//隐藏按钮如果菜单丢失或空if（|| menu.childNodes.length菜单！）= {button.style.display。 '无';返回;} button.onclick =函数（）{如果（-1 === menu.className.indexOf（NAV-菜单 '））{menu.className = NAV-菜单';}如果（ - ！== 1 button.className.indexOf（ '被切换'））{button.className button.className.replace =（ '被切换'， ''）; menu.className menu.className.replace =（“切换-on'，''）;} else {button.className + ='toggled-on'; menu.className + ='toggled-on';}};}）（jQuery）;

现在，您必须使用“ navigation.js 在你的桌子上。

然后，您需要打开一个FTP客户端，以将该文件下载到WordPress网站上的“ / wp-content / themes / your-theme / js /”位置。

替换表达式“ 您的主题 » 带有您的文件夹的名称 WordPress主题当前的。如果你的主题目录没有 js 文件夹，那么你需要创建一个。

上传JavaScript文件后，下一步是确保您的WordPress网站将加载JavaScript文件。您需要将以下代码添加到“ 的functions.php “ 你的 WordPress主题.

发现其他东西 你怎么用functions.php文件？

 wp_enqueue_script（ 'bpc_togglemenu' get_template_directory_uri（） '/js/navigation.js'，阵列（”的jquery '），20160909'，真）;

现在我们需要在我们的中添加导航菜单 WordPress主题。通常导航菜单添加在“ header.php文件 您的WordPress主题。

<nav id="site-navigation" class="main-navigation" role="navigation">
            <button class="menu-toggle">Menu</button>
            <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav>

我们假设您的 WordPress 主题定义的菜单位置称为“ 小学 ”。否则，请使用您的 WordPress 主题定义的位置。

最后一步是添加一些CSS，以便我们的菜单在移动设备上查看时使用正确的CSS类进行切换。

/* Navigation Menu */
.main-navigation {
    margin-top: 24px;
    margin-top: 1.714285714rem;
    text-align: center;
}
.main-navigation li {
    margin-top: 24px;
    margin-top: 1.714285714rem;
    font-size: 12px;
    font-size: 0.857142857rem;
    line-height: 1.42857143;
}
.main-navigation a {
    color: #5e5e5e;
}
.main-navigation a:hover,
.main-navigation a:focus {
    color: #21759b;
}
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
    display: none;
}

.main-navigation ul.nav-menu.toggled-on,
.menu-toggle {
    display: inline-block;
}

// CSS to use on mobile devices

@media screen and (min-width: 600px) {

.main-navigation ul.nav-menu,
    .main-navigation div.nav-menu > ul {
        border-bottom: 1px solid #ededed;
        border-top: 1px solid #ededed;
        display: inline-block !important;
        text-align: left;
        width: 100%;
    }
    .main-navigation ul {
        margin: 0;
        text-indent: 0;
    }
    .main-navigation li a,
    .main-navigation li {
        display: inline-block;
        text-decoration: none;
    }
    .main-navigation li a {
        border-bottom: 0;
        color: #6a6a6a;
        line-height: 3.692307692;
        text-transform: uppercase;
        white-space: nowrap;
    }
    .main-navigation li a:hover,
    .main-navigation li a:focus {
        color: #000;
    }
    .main-navigation li {
        margin: 0 40px 0 0;
        margin: 0 2.857142857rem 0 0;
        position: relative;
    }
    .main-navigation li ul {
        margin: 0;
        padding: 0;
        position: absolute;
        top: 100%;
        z-index: 1;
        height: 1px;
        width: 1px;
        overflow: hidden;
        clip: rect(1px, 1px, 1px, 1px);
    }
    .main-navigation li ul ul {
        top: 0;
        left: 100%;
    }
    .main-navigation ul li:hover > ul,
    .main-navigation ul li:focus > ul,
    .main-navigation .focus > ul {
        border-left: 0;
        clip: inherit;
        overflow: inherit;
        height: inherit;
        width: inherit;
    }
    .main-navigation li ul li a {
        background: #efefef;
        border-bottom: 1px solid #ededed;
        display: block;
        font-size: 11px;
        font-size: 0.785714286rem;
        line-height: 2.181818182;
        padding: 8px 10px;
        padding: 0.571428571rem 0.714285714rem;
        width: 180px;
        width: 12.85714286rem;
        white-space: normal;
    }
    .main-navigation li ul li a:hover,
    .main-navigation li ul li a:focus {
        background: #e3e3e3;
        color: #444;
    }
    .main-navigation .current-menu-item > a,
    .main-navigation .current-menu-ancestor > a,
    .main-navigation .current_page_item > a,
    .main-navigation .current_page_ancestor > a {
        color: #636363;
        font-weight: bold;
    }
    .menu-toggle {
        display: none;
    }
    
    }

现在，您可以访问您的网站并调整浏览器屏幕的大小，以查看响应式菜单是否切换。