在 WordPress 网站中包含汉堡菜单

Question

http://thehamburgercollection.com/shop/ < < 这是网站。

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

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

<?php

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

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

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

<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 行有错别字。修复 "width" 的拼写，然后汉堡包按钮显示在平板电脑分辨率下方。

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

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

在 WordPress 网站中包含汉堡菜单

Including Hamburger Menu In WordPress Site

html

wordpress

jquery

function

hamburger-menu