Ich bin hin und her gegangen.Klasse zum Menü auf Hamburger hinzufügen klicken
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 -->
Möchten Sie bitte einen Code aus Ihrem Code machen? Macht nichts, tu es selbst. –
Bitte machen Sie das Schnipsel funktioniert ... Danke. –
Hallo Praveen, Vielen Dank für Ihre Hilfe. Kannst du mir helfen zu verstehen, was ich falsch gemacht habe? – Tommy999