Machen Sie Hamburger Menü Ausblendung Arbeit

Question

Ich mache ein "Hamburger" -Menü, responsive Stil, mit einem Menü, das die Seite der Betrachter abdecken wird.

habe ich alle HTML/CSS herausgefunden, aber ich wollte verblassen in hinzufügen und Effekte verblassen .

Fade in funktioniert mit jquery Code, aber das Menü wird nicht ausgeblendet. Habe schon einige Ideen ausprobiert, die auf SO waren, aber keine funktioniert.

Irgendwelche Hilfe? Fiddle: https://jsfiddle.net/f19kz640/

Es tut uns schlecht ger ...

HTML

<header> 

    <div id="topbar"> <!-- top bar --> 

      <div id="nav-icon"> 
       <span></span> 
       <span></span> 
       <span></span> 
       <span></span> 
      </div> 

     <div id="menu"> 
      <ul> 
       <li><a href="#">Link1</a></li> 
       <li><a href="#">Link2</a></li> 
       <li><a href="#">Link3</a></li> 
       <li><a href="#">Link4</a></li> 
       <li><a href="#">Link5</a></li> 
      </ul> 
     </div> 

    </div> 

</header> 

CSS

body{ 
    background-color: #000; 
} 

#menu{ 
    z-index: 5; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(0,0,0, 0.95); 
    position: fixed; 
    font-size: 1.5em; 
    text-align: center; 
    right: 0px; 
    top: 0px; 
    opacity: 0; 
    display: table; 
} 

.hidden{ 
    display: none; 
    visibility: none; 
} 

#menu ul{ 
    margin: 0; 
    padding: 0; 
    z-index: 10; 
    width: 100%; 
    height: 100%; 
    display: table-cell; 
    vertical-align: middle; 
} 

#menu ul li{ 
    cursor: pointer; 
    text-decoration: none; 
} 

#menu ul li:hover{ 
    background-color: #006973; 
    -webkit-transition: .15s ease-in-out; 
    -moz-transition: .15s ease-in-out; 
    -o-transition: .15s ease-in-out; 
    transition: .15s ease-in-out; 
} 

#menu ul a{ 
    letter-spacing: 5px; 
    text-align: center; 
    margin-left: auto; 
    margin-right: auto; 
    color: #fff; 
    list-style: none; 
    text-transform: uppercase; 
    padding: 0px; 
    line-height: 75px; 
    padding: 10px 700px; 
    text-decoration: none; 
} 

#menu ul a:hover{ 
    text-decoration: none; 
    color: #fff ; 
} 

#nav-icon { 
    z-index: 20; 
    width: 50px; 
    height: 35px; 
    position: relative; 
    margin: 35px 30px; 
    -webkit-transform: rotate(0deg); 
    -moz-transform: rotate(0deg); 
    -o-transform: rotate(0deg); 
    transform: rotate(0deg); 
    -webkit-transition: .5s ease-in-out; 
    -moz-transition: .5s ease-in-out; 
    -o-transition: .5s ease-in-out; 
    transition: .5s ease-in-out; 
    cursor: pointer; 
} 

#nav-icon span { 
    display: block; 
    position: absolute; 
    height: 5px; 
    width: 40px; 
    background: #bada33; 
    opacity: 1; 
    left: 0; 
    -webkit-transform: rotate(0deg); 
    -moz-transform: rotate(0deg); 
    -o-transform: rotate(0deg); 
    transform: rotate(0deg); 
    -webkit-transition: .25s ease-in-out; 
    -moz-transition: .25s ease-in-out; 
    -o-transition: .25s ease-in-out; 
    transition: .25s ease-in-out; 
} 

/* Icon 3 */ 

#nav-icon span:nth-child(1) { 
    top: 0px; 
} 

#nav-icon span:nth-child(2),#nav-icon span:nth-child(3) { 
    top: 12px; 
} 

#nav-icon span:nth-child(4) { 
    top: 24px; 
} 

#nav-icon.open span:nth-child(1) { 
    top: 8px; 
    width: 0%; 
    left: 50%; 
} 

#nav-icon.open span:nth-child(2) { 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    transform: rotate(45deg); 
} 

#nav-icon.open span:nth-child(3) { 
    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
} 

#nav-icon.open span:nth-child(4) { 
    top: 8px; 
    width: 0%; 
    left: 50%; 
} 

Javascript/JQuery

$(document).ready(function(){ 
    $('#nav-icon').click(function(){ 
     $(this).toggleClass('open'); 
     if($('#menu').css('opacity') == '0'){ 
     $('#menu').css('opacity','1'); 
     $('#menu').fadeIn(300).css('display','table'); 
     }else{ 
     $('#menu').css('opacity','0'); 
     $('#menu').fadeOut(300).css('display','none'); 
     } 
    }); 
}); 

Answer 1

Sie könnten leicht Dinge viel vereinfachen:

$(document).ready(function(){ 
    $('#nav-icon').click(function(){ 
     $(this).toggleClass('open'); 
     $('#menu').fadeToggle(300); 
    }); 
}); 

Updated Fiddle

Es gibt keinen Grund mit Opazitätseigenschaften oder Anzeigeeigenschaften zu spielen, es ist alles Teil der Funktion jQuery fade() , die du einfach umschalten kannst.