響應式菜單在網站上不起作用

Question

我對響應菜單進行了編碼，但是它不起作用。 我的期望：當您單擊漢堡菜單時，菜單將轉換為關閉圖標，並且全屏菜單處於打開狀態（background-> opacity .5）。

我不確定錯誤在哪里。 CSS？ 或js？ 你有什么建議嗎？ 任何幫助表示贊賞。 非常感謝。

 $(document).ready(function() { let hamburgerClicked = false; $('#toggle').on("click", function() { if (hamburgerClicked == false) { $(".top").css('transform', 'translate (11px) translateX(0) rotate(45deg)'); $(".bottom").css('transform', 'translateY(-11px) translateX(0) rotate(-45deg)'); hamburgerClicked = true; } else { $(".top").css('transform', 'translate (0px) translateX(0) rotate(0deg)'); $(".bottom").css('transform', 'translateY (0px) translateX(0) rotate(0deg)'); hamburgerClicked = false; } $("#overlay").toggleClass('active'); $('#overlay').toggleClass('open'); }); }); 

 .button-container { position: fixed; top: 5%; right: 2%; height: 27px; width: 35px; cursor: pointer; z-index: 100; transition: opacity .25s ease; opacity: 1; content: ""; } .button-container:hover { opacity: .7; } .top:active { transform: translate(11px) translateX(0) rotate(45deg); } .middle:active { opacity: 0; } .bottom:active { transform: translateY(-11px) translateX(0) rotate(-45deg); } span { background: #fff; border: none; height: 4px; width: 32px; position: absolute; top: 0; left: 0; transition: all .35s ease; cursor: pointer; border-radius: 3px; } .middle { top: 10px; } .bottom { top: 20px; } .overlay { z-index: 500; position: fixed; background: rgba(0, 0, 0, 0.6); top: 0; left: 0; width: 5%; height: 0%; opacity: .6; visibility: hidden; transition: opacity .35s, visibility .35s, height .35s; } li { animation: fadeInRight .5s ease forwards; animation-delay: .35s; } li:nth-of-type(2) { animation-delay: .4s; } li:nth-of-type(3) { animation-delay: .45s; } li:nth-of-type(4) { animation-delay: .50s; } nav { position: relative; height: 70%; top: 20%; transform: translateY(-50%); font-size: 0.8em; } ul { list-style: none; padding: 0; margin: 0 auto; display: inline-block; position: relative; height: 100%; } li { display: block; height: 25%; min-height: 50px; position: relative; opacity: 0; } a { display: block; position: relative; text-decoration: none; overflow: hidden; } a:hover { transform: scale(1); } a:hover:after, a:focus:after, a:active:after { width: 30%; } a:after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0%; transform: translateX(-50%); height: 3px; background: rgba(0, 0, 0, 0.6); transition: .35s; } @keyframes fadeInRight { 0% { opacity: 0; left: 20%; } 100% { opacity: 1; left: 0; } } .active { visibility: visible; } 

 <div class="button-container" id="toggle"> <span class="top"></span> <span class="middle"></span> <span class="bottom"></span> </div> <div class="overlay" id="overlay"> <nav class="overlay-menu"> <ul> <li><a href="#constellation">Home</a></li> <li><a href="#what is constellations?">About</a></li> <li><a href="#12 constellations">12 Constellations</a></li> <li><a href="#">Stargazing</a></li> </ul> </nav> </div> </header> 

Answer 1

您的Javascript代碼中有錯誤。

當您更改.top span的CSS時，您使用的是“ translate”而不是“ translateY”。

$(".top").css('transform', 'translate (11px) translateX(0) rotate(45deg)'); // In if condition
$(".top").css ('transform', 'translate (0px) translateX(0) rotate(0deg)'); // In else condition

應該是：

$(".top").css('transform', 'translateY(11px) translateX(0) rotate(45deg)'); // In if condition
$(".top").css ('transform', 'translateY(0px) translateX(0) rotate(0deg)'); // In else condition

同樣，在單擊按鈕時，應切換中間跨度的可見性，以使按鈕看起來像十字形。

$(".middle").css("display", "none"); // In if condition
$(".middle").css("display", ""); // In else condition

這是有關JSFiddle的工作演示： https ://jsfiddle.net/0p9faz7m/