Menu burger animation toggle ganzseitiges Menü

Question

Im Grunde brauche ich einen Menü Burger, der ein ganzseitiges Menü ein- und ausschaltet, aber ich kann nicht die Kodierung zusammen arbeiten.

Also habe ich sowohl die Menü Burger Animation Umschalttaste und die Ganzseite Menü getrennt, die funktionieren gut, jetzt weiß ich nicht, wie man sie zusammen, ich habe seit Ewigkeiten versucht, kann aber nicht funktionieren, kann jemand Hilfe bitte?

Hier sind die Links zu den Codes:

1. Menu Burger FIDDLE

css:

body { 
    padding: 0px; 
} 

.border { 
    position: fixed; 
    background: #f9f8f3; 
} 

.top, .bottom { 
    left: 0; 
    right: 0; 
    height: 50px; 
} 

.top { 
    top: 0; 
} 

.bottom { 
    bottom: 0; 
} 

.right, .left { 
    top: 0; 
    bottom: 0; 
    width: 50px; 
} 

.right { 
    right: 0; 
} 

.left { 
    left: 0; 
} 

/* End of -->> Body border */ 


/* Nav */ 

.c-hamburger { 
    display: block; 
    position: fixed; 
    left: 0px; 
    bottom: 0px; 
    overflow: hidden; 
    margin: 0; 
    padding: 0; 
    width: 50px; 
    height: 50px; 
    font-size: 0; 
    text-indent: -9999px; 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 
    box-shadow: none; 
    border-radius: none; 
    border: none; 
    cursor: pointer; 
    -webkit-transition: background 0.3s; 
    transition: background 0.3s; 
} 

.c-hamburger:focus { 
    outline: none; 
} 


.c-hamburger span { 
    display: block; 
    position: absolute; 
    top: 25px; 
    left: 12px; 
    right: 12px; 
    height: 2px; 
    background: #262626; 
} 

.c-hamburger span::before, 
.c-hamburger span::after { 
    position: absolute; 
    display: block; 
    left: 0; 
    width: 100%; 
    height: 2px; 
    background-color: #262626; 
    content: ""; 
} 

.c-hamburger span::before { 
    top: -7px; 
} 

.c-hamburger span::after { 
    bottom: -7px; 
} 


.c-hamburger--htx { 
    background-color: #f9f8f3; 
} 

.c-hamburger--htx span { 
    -webkit-transition: background 0s 0.3s; 
    transition: background 0s 0.3s; 
} 

.c-hamburger--htx span::before, 
.c-hamburger--htx span::after { 
    -webkit-transition-duration: 0.3s, 0.3s; 
    transition-duration: 0.3s, 0.3s; 
    -webkit-transition-delay: 0.3s, 0s; 
    transition-delay: 0.3s, 0s; 
} 

.c-hamburger--htx span::before { 
    -webkit-transition-property: top, -webkit-transform; 
    transition-property: top, transform; 
} 

.c-hamburger--htx span::after { 
    -webkit-transition-property: bottom, -webkit-transform; 
    transition-property: bottom, transform; 
} 

/* active state, i.e. menu open */ 
.c-hamburger--htx.is-active { 
    background-color: #fafd37; 
} 

.c-hamburger--htx.is-active span { 
    background: none; 
} 

.c-hamburger--htx.is-active span::before { 
    top: 0; 
    -webkit-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    transform: rotate(45deg); 
} 

.c-hamburger--htx.is-active span::after { 
    bottom: 0; 
    -webkit-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
} 

.c-hamburger--htx.is-active span::before, 
.c-hamburger--htx.is-active span::after { 
    -webkit-transition-delay: 0s, 0.3s; 
    transition-delay: 0s, 0.3s; 
} 

2. Full Page Menu FIDDLE

css:

ul, li{ 
    list-style: none; 
} 

#yellowMenu { 
    background: #fafd37; 
    font-size: 2em; 
    text-align: center; 
    position: absolute; 
    left: 0; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    padding-top: 16%; 
} 


#yellowMenu a { 
    color: black; 
    text-decoration: none; 
    width: 100%; 
    height: 2em; 
    display: block; 
    line-height: 2.1; 
    font-family: 'FF_Super_Grotesk'; 
    font-weight: normal; 
    font-style: normal; 
    transition: background-color 2s ease; 
} 

#yellowMenu a:hover { 
    color: #e0e0d4; 
    background: rgba(182,182,157,0.7); 

} 

Answer 1

Wenn ich Sie nicht richtig eingestellt habe, klicken Sie auf Burger, um das Menü zu verbergen und anzuzeigen.

Wenn das es ist, nur um das Menü zu Ihrer burguer Geige hinzufügen, verbergen sie mit display:none und fügen Sie diese einfach jquery:

$(document).ready(function() { 
      $('.c-hamburger').click(function() { 
       $('#yellowMenu').toggle(); 
      }); 

     }); 

JSFIDDLE

Answer 2

Sie jquery show()hide() verwenden können, um zu tun dies ..

(function() { 
 

 
    "use strict"; 
 

 
    var toggles = document.querySelectorAll(".c-hamburger"); 
 

 
    for (var i = toggles.length - 1; i >= 0; i--) { 
 
     var toggle = toggles[i]; 
 
     toggleHandler(toggle); 
 
    }; 
 

 
    function toggleHandler(toggle) { 
 
     toggle.addEventListener("click", function (e) { 
 
      e.preventDefault(); 
 
      (this.classList.contains("is-active") === true) ? this.classList.remove("is-active") || $("#testMenu").hide() : this.classList.add("is-active") || $("#testMenu").show(); 
 
     }); 
 
    } 
 

 
})();

/* Body border */ 
 

 
/* https://www.youtube.com/watch?v=HbkOzrpmhUc https://css-tricks.com/body-border/ */ 
 
body { 
 
    padding: 0px; 
 
} 
 
.border { 
 
    position: fixed; 
 
    background: #f9f8f3; 
 
} 
 
.top, .bottom { 
 
    left: 0; 
 
    right: 0; 
 
    height: 50px; 
 
} 
 
.top { 
 
    top: 0; 
 
} 
 
.bottom { 
 
    bottom: 0; 
 
} 
 
.right, .left { 
 
    top: 0; 
 
    bottom: 0; 
 
    width: 50px; 
 
} 
 
.right { 
 
    right: 0; 
 
} 
 
.left { 
 
    left: 0; 
 
} 
 
/* End of -->> Body border */ 
 

 
/* Nav */ 
 
.c-hamburger { 
 
    display: block; 
 
    position: fixed; 
 
    left: 0px; 
 
    bottom: 0px; 
 
    overflow: hidden; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 50px; 
 
    height: 50px; 
 
    font-size: 0; 
 
    text-indent: -9999px; 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
    appearance: none; 
 
    box-shadow: none; 
 
    border-radius: none; 
 
    border: none; 
 
    cursor: pointer; 
 
    -webkit-transition: background 0.3s; 
 
    transition: background 0.3s; 
 
} 
 
.c-hamburger:focus { 
 
    outline: none; 
 
} 
 
.c-hamburger span { 
 
    display: block; 
 
    position: absolute; 
 
    top: 25px; 
 
    left: 12px; 
 
    right: 12px; 
 
    height: 2px; 
 
    background: #262626; 
 
} 
 
.c-hamburger span::before, .c-hamburger span::after { 
 
    position: absolute; 
 
    display: block; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 2px; 
 
    background-color: #262626; 
 
    content:""; 
 
} 
 
.c-hamburger span::before { 
 
    top: -7px; 
 
} 
 
.c-hamburger span::after { 
 
    bottom: -7px; 
 
} 
 
.c-hamburger--htx { 
 
    background-color: #f9f8f3; 
 
} 
 
.c-hamburger--htx span { 
 
    -webkit-transition: background 0s 0.3s; 
 
    transition: background 0s 0.3s; 
 
} 
 
.c-hamburger--htx span::before, .c-hamburger--htx span::after { 
 
    -webkit-transition-duration: 0.3s, 0.3s; 
 
    transition-duration: 0.3s, 0.3s; 
 
    -webkit-transition-delay: 0.3s, 0s; 
 
    transition-delay: 0.3s, 0s; 
 
} 
 
.c-hamburger--htx span::before { 
 
    -webkit-transition-property: top, -webkit-transform; 
 
    transition-property: top, transform; 
 
} 
 
.c-hamburger--htx span::after { 
 
    -webkit-transition-property: bottom, -webkit-transform; 
 
    transition-property: bottom, transform; 
 
} 
 
/* active state, i.e. menu open */ 
 
.c-hamburger--htx.is-active { 
 
    background-color: #fafd37; 
 
} 
 
.c-hamburger--htx.is-active span { 
 
    background: none; 
 
} 
 
.c-hamburger--htx.is-active span::before { 
 
    top: 0; 
 
    -webkit-transform: rotate(45deg); 
 
    -ms-transform: rotate(45deg); 
 
    transform: rotate(45deg); 
 
} 
 
.c-hamburger--htx.is-active span::after { 
 
    bottom: 0; 
 
    -webkit-transform: rotate(-45deg); 
 
    -ms-transform: rotate(-45deg); 
 
    transform: rotate(-45deg); 
 
} 
 
.c-hamburger--htx.is-active span::before, .c-hamburger--htx.is-active span::after { 
 
    -webkit-transition-delay: 0s, 0.3s; 
 
    transition-delay: 0s, 0.3s; 
 
} 
 
ul, li { 
 
    list-style: none; 
 
} 
 
#yellowMenu { 
 
    background: #fafd37; 
 
    font-size: 2em; 
 
    text-align: center; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    padding-top: 16%; 
 
} 
 
#yellowMenu a { 
 
    color: black; 
 
    text-decoration: none; 
 
    width: 100%; 
 
    height: 2em; 
 
    display: block; 
 
    line-height: 2.1; 
 
    font-family:'FF_Super_Grotesk'; 
 
    font-weight: normal; 
 
    font-style: normal; 
 
    transition: background-color 2s ease; 
 
} 
 
#yellowMenu a:hover { 
 
    color: #e0e0d4; 
 
    background: rgba(182, 182, 157, 0.7); 
 
}

<script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.js"></script> 
 

 
<div class="border top"></div> 
 
<div class="border bottom"></div> 
 
<div class="border left"></div> 
 
<div class="border right"></div> 
 
<button class="c-hamburger c-hamburger--htx"> <span>toggle menu</span> 
 

 
</button> 
 
<nav id="testMenu" style="display:none;"> 
 
    <ul id="yellowMenu"> 
 
     <li><a href="">PROJECTS</a> 
 
     </li> 
 
     <li><a href="">ABOUT</a> 
 
     </li> 
 
     <li><a href="">SERVICE</a> 
 
     </li> 
 
     <li><a href="">CONTACT</a> 
 
     </li> 
 
    </ul> 
 
</nav>

Demo

EDIT: Für die Haut und zeigen die Verwendung Animieren .fadeIn() und .fadeOut()

function toggleHandler(toggle) { 
     toggle.addEventListener("click", function (e) { 
      e.preventDefault(); 
      (this.classList.contains("is-active") === true) ? this.classList.remove("is-active") || $("#testMenu").fadeOut() : this.classList.add("is-active") || $("#testMenu").fadeIn(); 
     }); 
    }