我希望你能帮助我。我正在为标题添加一个额外的自定义菜单。我想这是一个汉堡菜单与滑入功能，这是可见的（和工作）在桌面和手机上。在小屏幕上查看时，两个单独的菜单应合并为一个菜单。托尼·罗宾斯（TonyRobbins）为我想要实现的目标提供了一个很好的例子。

我是WordPress的新手，正在本地开发这个网站，所以很遗憾我无法提供链接。到目前为止我所做的：

在特定于站点的插件中注册了一个新菜单

 function wpb_custom_new_menu() {
  register_nav_menu(\'slide-in-menu\',__( \'Slide In Menu\' ));
}
add_action( \'init\', \'wpb_custom_new_menu\' );

使用WordPress仪表板、外观、菜单：我将页面添加到此菜单

我将此菜单添加到主题的标题中：

---

<?php wpb_custom_new_menu( array( \'theme_location\' => \'slide in menu\', \'menu_class\' => \'slide-in-menu-class\' ) ); ?>

我为代码创建了一个js文件，名为“slidepanel”。并将其上载到my childtheme中新创建的js文件夹中：/ol>

---

(function($) {
$(\'#toggle\').toggle( 
    function() {
        $(\'#popout\').animate({ left: 0 }, \'slow\', function() {
            $(\'#toggle\').html(\'<img src="https://localhost:8888/testwebsite/wp-content/themes/testwebsite-child/images/menu.png" alt="close" />\');
        });
    }, 
    function() {
        $(\'#popout\').animate({ left: -250 }, \'slow\', function() {
            $(\'#toggle\').html(\'<img src="https://localhost:8888/testwebsite/wp-content/themes/testwebsite-child/images/menu.png" alt="close" />\');
        });
    }
);
})(jQuery);

然后我返回到头文件并包装代码，以便它可以切换：

---

<div id="toggle">
    <img src="https://localhost:8888/testwebsite/wp-content/themes/testwebsite-child/images/menu.png" alt="Show" /></div>
    <div id="popout">
    <?php wpb_custom_new_menu( array( \'theme_location\' => \'slide in menu\', \'menu_class\' => \'slide-in-menu-class\' ) ); ?>
</div>

但不幸的是，即使在多次尝试之后，它仍然不起作用。我看到的只是汉堡图标，它应该在哪里，但是：–它不会打开；–它没有在小屏幕上与我的主菜单相结合，而是保持独立。

我希望这里有人能帮我。也许我的代码有问题？也许我在错误的文件中工作？对于如何在这方面取得成功的任何帮助或其他建议，我们将不胜感激！

非常感谢。

$(\'#toggle\').toggle( // don\'t you need a click action here?

$( "#toggle" ).click(function() {
  $( "#toggle" ).toggle( "slow", function() { // The matched elements will be revealed or hidden
    // Animation complete.
  });
});

<div id="toggle">
  <img src="img_url" alt="Show" /></div>
  <div id="popout">
    <?php wpb_custom_new_menu( array( \'theme_location\' => \'slide in menu\', \'menu_class\' => \'slide-in-menu-class\' ) ); ?>
  </div> <!-- missing closing div -->
</div>