可爱的人。手机下拉菜单汉堡
我是编码方面的新手,所以我已经看过所有的论坛,但似乎无法获得菜单,点击我的FA图标。也许我不明白一些事情。
我的手机菜单我想是这样的:
我有我的主要导航和移动的主要导航上的相互
<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的);
我认为最好是,如果你看看一些在线例子,如果你想自己达到解决方案https://codepen.io/g13nn/pen/eHGEF使用jquery和https://codepen.io/ erikterwan/pen/EVzeRP仅使用css。如果你不发布任何你一直在使用的css/js,那么我们有点难以帮助你。 – Wouter
我明白了。感谢您的参考,Wouter!我已经看到了这两个,但我肯定会尝试深入探索第一个。我会将修改过的jquery粘贴到我的子主题的自定义脚本中吗?见上面的编辑。 – Poocey