Menu burger hoạt hình chuyển đổi menu trang đầy đủ

Question

Về cơ bản tôi cần một trình đơn bánh mì kẹp để bật và tắt một menu trang đầy đủ nhưng tôi không thể lấy mã để làm việc cùng nhau.

Vì vậy, tôi đã tạo cả trình đơn hoạt ảnh của Trình đơn bánh burger và menu Toàn trang riêng biệt, bây giờ tôi không biết cách đặt chúng lại với nhau, tôi đã thử độ tuổi nhưng dường như không hoạt động xin vui lòng giúp đỡ?

Dưới đây là các liên kết đến các mã:

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

Nếu tôi undesrtood bạn phải bạn muốn bấm vào burger để ẩn và hiển thị menu.

Nếu đó là nó là, chỉ cần thêm menu thay vì chỉ violong burguer của bạn, giấu nó với display:none và thêm jquery đơn giản này:

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

     }); 

JSFIDDLE

Answer 2

bạn có thể sử dụng jquery show()hide() làm này ..

(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: Đối với hoạt cảnh ẩn và hiển thị sử dụng .fadeIn() và .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(); 
     }); 
    }