Mobile Dropdown Menü Hamburger

Question

liebe Menschen.

Ich bin ziemlich neu in der Programmierung, also habe ich mir alle Foren angeschaut, aber es scheint nicht, dass ein Menü erscheint, wenn ich auf mein FA Icon klicke. Vielleicht verstehe ich einige Dinge nicht.

Mein Handy-Menü Ich möchte wie folgt aussehen:

https://imgur.com/0Mje6wX

Ich habe meine primäre nav und mobile primäre nav auf die jeweils anderen

<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> 

Ich mag um das # mobile-nav mit dem Hamburger-Symbol in dem Bild zu verknüpfen, das ich wie hier habe:

<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> 

Sie müssen das Problem nicht lösen, aber einige Hilfe wäre genial.

Vielen Dank! Js

Edit: Kinder Thema benutzerdefinierte Skript

(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

Es liegt an Ihnen, wo Sie den Code platzieren, in kleinen Projekten können Sie einfach so schreiben, aber in größeren Projekten können Sie Funktionen in mehrere Dateien aufteilen und Tools wie Grunt verwenden, um sie zu kombinieren. Ich habe das folgende Beispiel basierend auf Ihrem Code und der JQuery example (no css) gemacht.

(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

Danke, Wouter.

änderte ich das nav zu:

<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> 

So konnte ich den Knopf entfernen und die Quer fa-Klasse verwenden. Außerdem wurde die Navigationsklasse mit anderen Attributen entfernt. Jetzt muss ich nur das # mobile-nav bearbeiten, indem ich die Position absolut mache und so weiter. Du bist die Bombe.