手機下拉菜單漢堡

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

這取決於你在何處放置代碼，在小項目中，你可以只寫這樣的，但更大的項目，你可以像咕嚕在多個FILLES和使用的工具拆分功能將它們組合在一起。我已經根據您的代碼和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。你是炸彈。