在 WordPress 网站中包含汉堡菜单

Posted 2023-05-09

【中文标题】在 WordPress 网站中包含汉堡菜单

【英文标题】：Including Hamburger Menu In WordPress Site

【发布时间】：2017-04-06 20:51:08

【问题描述】：

http://thehamburgercollection.com/shop/

我正在尝试创建一个汉堡菜单，其中菜单项直接下拉到汉堡图标下方（例如在平板电脑和手机大小的this 示例中）。

目前，我的菜单在我的 WordPress 主题的 footer.php 中：

<?php

if ( ! is_front_page() && ! is_home() ) 
    wp_nav_menu();  
 
?>

如您所见，菜单无法出现在主页上。

在this tutorial 之后，我尝试在 wp_nav_menu() 函数周围包裹一个 div，如下所示：

<div class="mobile-nav">

    <div class="menu-btn" id="menu-btn">
        <div></div>
        <span></span>
        <span></span>
        <span></span>
    </div>

    <div class="responsive-menu">

    <?php

    if ( ! is_front_page() && ! is_home() ) 
        wp_nav_menu();  
     
    ?>

    </div>

</div>

然后我将 JQuery 代码复制并粘贴到一个名为 navigation.js 的 JS 文件中，并将该文件包含在 functions.php 中

<?php
    wp_enqueue_script( 'wpb_togglemenu', 
    get_template_directory_uri() . '/js/navigation.js',
    array('jquery'), 
    '20160909', true );

我还将 CSS 代码复制并粘贴到我的 style.css 文件中。除非我遗漏了什么，否则我完全按照教程所说的去做，但仍然没有得到任何结果。关于本教程为什么不起作用的任何想法，或者您是否有任何其他建议来创建我正在寻找的特定汉堡菜单？

【参考方案1】：

我看到的两个大（但很容易解决）问题。

1) 您的style.css 的第 350 行有错字。修正“宽度”的拼写，然后汉堡按钮显示在平板分辨率以下。

@media screen and (max-wdith: 768px)

2) 您的navigation.js 中包含 html，使其成为无效的 JS 文件并阻止其执行。您需要从文件中删除所有 <script type="text/javascript"> 和 </script> 标记 - 这些标记仅用于 HTML 文档以包含脚本（但从不在脚本文件中）。

【讨论】：

你是对的，修复错字导致图标出现，去掉

你明白了！首先，您可以将此规则添加到与其他汉堡菜单样式相同的 max-width: 768px 媒体查询中：.menu-item display: block; margin: 10px 0 0; 今天很高兴为您提供帮助！

完美！非常感谢您的帮助！