可爱的人。
我是编码的新手,所以我查看了所有论坛,但在单击我的FA图标时似乎无法出现菜单。也许我不明白一些事情。
我的手机菜单我想看起来像这样:
https://i.stack.imgur.com/z8bac.jpg
我在彼此的基础上有我的主要导航和移动主要导航
<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);
这取决于您可以放置代码的位置,在小型项目中,您可以像这样编写它,但是在较大的项目中,您可以在多个填充物中拆分功能,并使用诸如Grunt之类的工具将它们组合起来。我已经根据您的代码和jQuery示例进行了以下示例(没有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">☰</button>
<button class="cross">˟</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>
谢谢,
我将导航更改为:
<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级。还删除了具有其他属性的NAV类。现在,我只需要通过使位置绝对和内容来编辑#移动-NAV。你是炸弹。