在 WordPress 网站中包含汉堡菜单

Question

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 文件中。除非我遗漏了什么，否则我完全按照教程所说的去做，但仍然没有得到任何结果。关于本教程为什么不起作用的任何想法，或者您是否有任何其他建议来创建我正在寻找的特定汉堡菜单？

Answer 1

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

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

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

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