移动下拉菜单汉堡包

Question

可爱的人。

我是编码方面的新手，所以我查看了所有论坛，但似乎无法在单击我的 FA 图标时出现菜单。可能有些东西我不明白。

我希望我的移动菜单如下所示：

https://imgur.com/0Mje6wX

我的主导航和移动主导航相互重叠

<nav class="nav nav__primary clearfix">
<ul id="topnav" class="sf-menu sf-js-enabled">
    <li><a href="https://staging1.herbalnitro.com">Home</a></li>
    <li><a href="https://staging1.herbalnitro.com/shop">Shop</a></li>
    <li><a class="sf-with-ul" href="https://staging1.herbalnitro.com/shop">
        <span class="sf-sub-indicator"></span>
    Products</a>
        <ul class="sub-menu">
            <li><a href="https://staging1.herbalnitro.com/product/allura-trim-appetite-control-weight-loss">Allura Trim Fitness Stick</a></li>
            <li><a href="https://staging1.herbalnitro.com/product/colon-cleanse-detox-cleanse-duo/">Colon Cleanse Detox Duo</a></li>
            <li><a href="https://staging1.herbalnitro.com/product/detox-maximo-colon-cleanse/">Detox Maximo Colon Cleanse</a></li>
            <li><a href="https://staging1.herbalnitro.com/product/extreme-energy/">Extreme Energy</a></li>
            <li><a href="https://staging1.herbalnitro.com/product/fuel-for-the-body-natural-energy-booster/">Fuel for the Body</a></li>
            <li><a href="https://staging1.herbalnitro.com/product/my-gentle-cleanse-colon-health/">My Gentle Cleanse 30</a></li>
            <li><a href="https://staging1.herbalnitro.com/product/my-gentle-detox-colon-care/">My Gentle Detox 30</a></li>
        </ul>
    </li>
    <li><a href="https://staging1.herbalnitro.com/herbal-nitro-life-blog">Blog</a></li>
    <li><a href="https://staging1.herbalnitro.com/contact-us">Contact</a></li>
</ul>
<ul id="mobile-nav" class="sf-menu sf-js-enabled">
    <li><a href="https://staging1.herbalnitro.com">Home</a></li>
    <li><a href="https://staging1.herbalnitro.com/shop">Shop</a></li>
    <li><a href="https://staging1.herbalnitro.com/shop">Products</a></li>
    <li><a href="https://staging1.herbalnitro.com/herbal-nitro-life-blog">Blog</a></li>
    <li><a href="https://staging1.herbalnitro.com/contact-us">Contact</a></li>
</ul>

我想将#mobile-nav 链接到图像中的汉堡包图标，我在这里：

<a href="#mobile-nav" class="fa fa-bars" aria-hidden="true"></a>
        <a href="https://herbalnitro.com"><img src="https://staging1.herbalnitro.com/wp-content/uploads/2017/09/Logo-165x40.png" /></a>
        <a href="#" class="fa fa-shopping-cart" aria-hidden="true"></a>
        <a href="https://staging1.herbalnitro.com/my-account" class="fa fa-user" aria-hidden="true"></a>
        <a href="#" class="fa fa-search" aria-hidden="true"></a>

您不必解决问题，但可以提供一些帮助。

非常感谢！ js

编辑：子主题自定义脚本

(function($) {
$(function(){
    //Dropdown cart in header
    $('.cart-holder > h3').click(function(){
        if($(this).hasClass('cart-opened')) {
            $(this).removeClass('cart-opened').next().slideUp(300);
        } else {
            $(this).addClass('cart-opened').next().slideDown(300);
        }
    });
    //Popup rating content
    $('.star-rating').each(function(){
        rate_cont = $(this).attr('title');
        $(this).append('<b class="rate_content">' + rate_cont + '</b>');
    });

});

})(jQuery);

Answer 1

代码的放置位置取决于您，在小型项目中，您可以这样编写，但在较大的项目中，您可以将功能拆分为多个填充，并使用 grunt 之类的工具将它们组合起来。我根据您的代码和JQuery example（无 css）制作了以下示例。

(function($) {
  $(function(){
      //Dropdown cart in header
      $('.cart-holder > h3').click(function(){
          if($(this).hasClass('cart-opened')) {
              $(this).removeClass('cart-opened').next().slideUp(300);
          } else {
              $(this).addClass('cart-opened').next().slideDown(300);
          }
      });
      //Popup rating content
      $('.star-rating').each(function(){
          rate_cont = $(this).attr('title');
          $(this).append('<b class="rate_content">' + rate_cont + '</b>');
      });

  });

  $( ".cross" ).hide();
  $( ".hamburger" ).click(function() {
    $( ".sf-menu" ).slideToggle( "slow", function() {
      $( ".hamburger" ).hide();
      $( ".cross" ).show();
    });
  });

  $( ".cross" ).click(function() {
    $( ".sf-menu" ).slideToggle( "slow", function() {
      $( ".cross" ).hide();
      $( ".hamburger" ).show();
    });
  });

})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="nav nav__primary clearfix">
<button class="hamburger">&#9776;</button>
<button class="cross">&#735;</button>
<ul id="mobile-nav" class="sf-menu sf-js-enabled">
    <li><a href="#">Home</a></li>
    <li><a href="#">Shop</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
</ul>
</nav>

Answer 2

谢谢，沃特。

我将导航更改为：

<a href="#mobile-nav" class="fa fa-bars hamburger" aria-hidden="true"></a>
            <a class="fa fa-times cross" aria-hidden="true"></a>
            <ul id="mobile-nav" class="sf-menu sf-js-enabled">
                <li><a href="#">Home</a></li>
                <li><a href="#">Shop</a></li>
                <li><a href="#">Products</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Contact</a></li>
            </ul>

所以我可以删除按钮并使用交叉 fa 类。还删除了具有其他属性的导航类。现在我只需要通过使位置绝对和东西来编辑#mobile-nav。你就是炸弹。