Klasse zum Menü auf Hamburger hinzufügen klicken

Question

Ich bin hin und her gegangen.

Ich verwende https://jonsuh.com/hamburgers/ für die mobilen Hamburger Animationen.

Das Problem ist, ich klicke auf den Hamburger, öffnet sich das Menü-Overlay. Wenn Sie jedoch auf das Overlay klicken, verschwindet es, ohne den Hamburger zurückzusetzen. Das X bleibt erhalten.

Zweites Problem, und ich habe versucht, mit jQuery zu beheben. Dies ist das erste Mal, dass ich es benutze, also ertragen Sie mit mir.

Ich habe das Menü bei Scrollen nach unten einblenden, aber ich habe versucht, eine 'remove' Klasse in die 'Menü' Klasse zu injizieren. Damit kann ich das CSS so einstellen, dass es keine anzeigt. Im Moment ist es oben auf dem Overlay und sieht nicht gut aus.

$(document).ready(function() { 
 

 
    $(".hamburger").click(function() { 
 
    $(".overlay").fadeToggle(200); 
 
    }); 
 
}); 
 

 
$('.overlay').on('click', function() { 
 
    $(".overlay").fadeToggle(200); 
 

 
    open = false; 
 
}); 
 

 
var $hamburger = $(".hamburger"); 
 
$hamburger.on("click", function(e) { 
 
    $hamburger.toggleClass("is-active"), $(".overlay").fadeToggle(200); 
 
    // Do something else, like open/close menu 
 
}); 
 
var $hamburger = $(".hamburger"); 
 
$hamburger.on("click", function(e) { 
 
    $hamburger.removeclass("is-active"); 
 

 
}); 
 

 
$(".hamburger").click(function() { 
 
    $('#menu').addClass('remove'); 
 
}); 
 

 
$(".hamburger").click(function() { 
 
    $('#menu').removeClass(''); 
 
}); 
 

 
(function($) { 
 
    $(document).ready(function() { 
 
    $(window).scroll(function() { 
 
     if ($(this).scrollTop() > 100) { 
 
     $('#menu').fadeIn(500); 
 
     } else { 
 
     $('#menu').fadeOut(500); 
 
     } 
 
    }); 
 
    }); 
 
})(jQuery);

.hamburger { 
 
    font: inherit; 
 
    display: inline-block; 
 
    overflow: visible; 
 
    margin: 0; 
 
    padding: 15px; 
 
    cursor: pointer; 
 
    transition-timing-function: linear; 
 
    transition-duration: .15s; 
 
    transition-property: opacity, -webkit-filter; 
 
    transition-property: opacity, filter; 
 
    transition-property: opacity, filter, -webkit-filter; 
 
    text-transform: none; 
 
    color: inherit; 
 
    border: 0; 
 
    background-color: transparent; 
 
    position: absolute; 
 
    z-index: 99999; 
 
} 
 
.hamburger:hover { 
 
    opacity: .7 
 
} 
 
.hamburger-box { 
 
    position: relative; 
 
    display: inline-block; 
 
    width: 40px; 
 
    height: 24px 
 
} 
 
.hamburger-inner { 
 
    top: 50%; 
 
    display: block; 
 
    margin-top: -2px 
 
} 
 
.hamburger-inner, 
 
.hamburger-inner:after, 
 
.hamburger-inner:before { 
 
    position: absolute; 
 
    width: 40px; 
 
    height: 4px; 
 
    transition-timing-function: ease; 
 
    transition-duration: .15s; 
 
    transition-property: -webkit-transform; 
 
    transition-property: transform; 
 
    transition-property: transform, -webkit-transform; 
 
    border-radius: 4px; 
 
    background-color: #000 
 
} 
 
.hamburger-inner:after, 
 
.hamburger-inner:before { 
 
    display: block; 
 
    content: '' 
 
} 
 
.hamburger-inner:before { 
 
    top: -10px 
 
} 
 
.hamburger-inner:after { 
 
    bottom: -10px 
 
} 
 
.menu-overlay { 
 
    position: fixed; 
 
    background-color: transparent; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    pointer-events: none; 
 
    transition: all 300ms ease-in-out 
 
} 
 
#menu { 
 
    position: fixed; 
 
    top: 0px; 
 
    width: 100%; 
 
    height: 65px; 
 
    z-index: 4; 
 
    display: none; 
 
    background: red; 
 
} 
 
.menu { 
 
    margin: 0 
 
} 
 
nav { 
 
    text-align: center; 
 
    display: inline-block; 
 
    position: relative; 
 
    height: auto; 
 
    overflow: hidden; 
 
    background: none; 
 
    float: right 
 
} 
 
nav ul { 
 
    text-align: center; 
 
    margin: 0; 
 
    padding: 0; 
 
    text-decoration: none; 
 
    list-style: none; 
 
    float: right; 
 
    margin: 0 .3rem 0 
 
} 
 
nav ul li { 
 
    display: inline-block; 
 
    letter-spacing: 3px; 
 
    font-size: .5rem !important; 
 
    font-family: "Montserrat", sans-serif; 
 
    transition-property: all .2s linear 0s; 
 
    -moz-transition: all .2s linear 0s; 
 
    -webkit-transition: all .2s linear 0s; 
 
    -o-transition: all .2s linear 0s; 
 
    border-top: 3px solid transparent 
 
} 
 
nav ul li:hover { 
 
    border-top: 3px solid #FFC3AF 
 
} 
 
nav ul li a { 
 
    color: #2d2d2d; 
 
    font-size: 16px; 
 
    text-transform: uppercase; 
 
    font-weight: 500; 
 
    font-size: 13px; 
 
    display: inline-block; 
 
    display: inline-block; 
 
    padding: 1.2rem 1.5rem; 
 
    text-decoration: none; 
 
    border-bottom: none 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="menu"> 
 
    <div class="hamburger hamburger--elastic" tabindex="0" aria-label="Menu" role="button" aria-controls="navigation"> 
 
    <div class="hamburger-box"> 
 
     <div class="hamburger-inner"></div> 
 
    </div> 
 
    </div> 
 
    <nav class="nav-scroll"> 
 
    <ul> 
 
     <li><a href="#home">Home</a> 
 
     </li> 
 
     <li><a href="#about">About</a> 
 
     </li> 
 
     <li><a href="#testimonials">Testimonials</a> 
 
     </li> 
 
     <li><a href="#portfolio">Portfolio</a> 
 
     </li> 
 
     <li><a href="#services">Services</a> 
 
     </li> 
 
     <li><a href="#contact">Contact</a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</div> 
 
<div class="overlay" id="navigation"> 
 
    <div class="wrap"> 
 
    <ul class="wrap-nav"> 
 
     <li><a href="#home">Home</a> 
 
     </li> 
 
     <li><a href="#about">About</a> 
 
     </li> 
 
     <li><a href="#testimonials">Testimonials</a> 
 
     </li> 
 
     <li><a href="#portfolio">Portfolio</a> 
 
     </li> 
 
     <li><a href="#services">Services</a> 
 
     </li> 
 
     <li><a href="#contact">Contact</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
    <!-- end overlay - wrap --> 
 
</div> 
 
<!-- end overlay -->

Answer 1

ich es ausprobiert und ich habe die Lösung. Sie haben diesen Code, um nur einige Änderungen vornehmen:

$('.overlay').on('click', function() { 
    $(".overlay").fadeToggle(200); 
    // Add this: 
    $(".hamburger").toggleClass("is-active"); 
    open = false; 
}); 

Sie müssen nur diese Klasse wechseln: is-active für die .hamburger. Eine andere Sache ist, der Fehler, den Sie haben, ist:

$hamburger.removeclass("is-active"); 
//---------------^ Should be C not c. 

Das obige ist ein Tippfehler. Ändern Sie es in:

$hamburger.removeClass("is-active");