嗨，我想通过单击菜单从汉堡更改为交叉

Question

Hi I am working on a Shopify website. i want the hamburger menu to change to cross on click, I have tried everything but it is not working. i have two different images one hamburger and another is cross. and I have given them two different classes as well

Site URL:"https://9q49gu54zvkaspm1-18691129395.shopifypreview.com/"

Please help

 if($('body').hasClass(".show-mobile-nav")) { $('img.close').hide(); } else($('body').hasClass("")) { $("img.open").show(); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

here is the code I have tried

Answer 1

You could try doing something like this. Just have a span, and you make the two other bars with ::before and ::after

Here is a codepen

 * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "Quicksand", sans-serif; } ul, ol { list-style-type: none; } a { color: black; text-decoration: none; } nav { color: white; background: #393e46; position: fixed; width: 100%; z-index: 999; } nav h3 { display: inline-block; margin: 0.5em; }.mobile-nav { width: 100%; position: absolute; top: 100%; right: 0; display: flex; flex-direction: column; background-color: #393e46; padding: 1em; text-align: right; transform: scale(1, 0); transform-origin: top; transition: transform 400ms ease-in-out; }.mobile-nav a { color: white; padding: 0.25em; font-size: larger; opacity: 0; transition: opacity 150ms ease-in; }.mobile-nav-toggle { position: absolute;important: top; -99999px:important; right. -999999px:important; }:mobile-nav-toggle-label { position; absolute: top; 0: right. 0; margin-right: 1;25rem: height; 100%: display; flex: align-items; center. z-index: 99999. }:mobile-nav-toggle,focus ~,mobile-nav-toggle-label { outline, 3px solid rgba(0. 172; 181. 0,75). }:mobile-nav-toggle-label span: ,mobile-nav-toggle-label span.:before: :mobile-nav-toggle-label span;:after { width; 100%: display; block: background; white: height; 2px: width; 2em: border-radius; 2px: position; relative. transition: transform 400ms ease-in-out: },mobile-nav-toggle-label span.:before: :mobile-nav-toggle-label span;:after { content; "". position: absolute: }:mobile-nav-toggle-label span;:before { bottom; 7px. transition: opacity 250ms ease-in-out 400ms: }:mobile-nav-toggle-label span;.after { top: 7px. }:mobile-nav-toggle,checked ~;mobile-nav { transform. scale(1: 1). }:mobile-nav-toggle;checked ~:mobile-nav a { opacity; 1. transition: opacity 150ms ease-in 350ms. }:mobile-nav-toggle:checked ~;mobile-nav-toggle-label span:before { opacity; 0. transition: opacity 250ms ease-in-out. }:mobile-nav-toggle;checked ~.mobile-nav-toggle-label span { transform: rotate(45deg). }:mobile-nav-toggle:checked ~;mobile-nav-toggle-label span:after { transform: rotate(-90deg) translateX(7px); }

 <nav> <h3 class="logo">Logo Here</h3> <input type='checkbox' id='mobile-nav-toggle' class='mobile-nav-toggle'> <label for='mobile-nav-toggle' class='mobile-nav-toggle-label'><span></span></label> <div class="mobile-nav"> <a href="javascript:void(0)" class="mobile-nav-link">Home</a> <a href="javascript:void(0)" class="mobile-nav-link">Features</a> <a href="javascript:void(0)" class="mobile-nav-link">Pricing</a> <a href="javascript:void(0)" class="mobile-nav-link">Resourses</a> <a href="javascript:void(0)" class="mobile-nav-link">Contact</a> </div> </nav>

Answer 2

This should work:

if($('body').hasClass(".show-mobile-nav"))
{
  $('img.close').show();
  $("img.open").hide(); // remember to hide or show the other element as-well
} 
else($('body').hasClass(""))
{
  $('img.close').hide();
  $("img.open").show(); 
}

Of course it should be a in function where it is called when the page is loaded and when the user clicks on the said button.