メニューバーガーアニメーション全メニューメニューを切り替えます

Question

基本的には、フルページメニューのオン/オフを切り替えるメニューバーガーが必要ですが、一緒にコーディングすることはできません。

メニューバーガーアニメーションのトグルとフルページのメニューを別々に作成しましたが、これはうまく機能していますが、今はそれらを組み合わせる方法はわかりませんが、年齢を問わず試してみましたが、助けてください？ここで

は、コードへのリンクです：

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

あなたが気に入らなければ、バーガーをクリックしてメニューを隠して見たいと思っています。

それはそれだけで、あなたのburguerフィドルにメニューを追加display:noneでそれを隠し、このシンプルなjqueryの追加、であるなら：あなたがするjqueryのshow()hide()を使用することができます

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

     }); 

JSFIDDLE

Answer 2

をこの.. ..

(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：非表示と表示の使用.fadeIn()をアニメーション化するため と.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(); 
     }); 
    }