英文:
Animations for an HTML5 Hamburger menu
问题
Here's the translated code:
我一直在尝试创建一个工作的汉堡菜单，不仅要功能正常，而且要“看起来不错”，但我在尝试将菜单翻译到页面上时遇到了问题，而不只是它突然出现
我尝试使用webkit工具，但无法弄清楚如何使其只动画一次，并且带有条形动画
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
Menu.style.display = "none";
function ShowHide(x) {
x.classList.toggle("change");
var Menu = document.getElementById("Menu");
if (Menu.style.display === "none") {
Menu.style.display = "block";
} else {
Menu.style.display = "none";
}
}
<!-- language: lang-css -->
.container {
display: inline-block;
cursor: pointer;
}
.bar1,
.bar2,
.bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
}
body {
background-color: rgb(209, 224, 224);
}
.Menu {
width: 150px;
background-color: rgb(208, 208, 225);
display: none
}
<!-- language: lang-html -->
<div class="container" onclick="ShowHide(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div id="Menu" style="width: 150px; background-color: rgb(208, 208, 225); display: none;">
<h2><a href="Homepage.html">主页</a></h2>
<br>
<h2><a href="Subpage1.html">子页面 1</a></h2>
<br>
<h2><a href="Subpage2.html">子页面 2</a></h2>
<br>
<h2><a href="Subpage3.html">子页面 3</a></h2>
<br>
<h2><a href="Subpage4.html">子页面 4</a></h2>
<br>
<h2><a href="Subpage5.html">子页面 5</a></h2>
<br>
</div>
<!-- end snippet -->
Is there anything else you need?
英文:
I've been trying to get a working hamburger menu that not only functions but "looks good", but I've had issues trying to translate the menu onto the page, rather than it just appearing
I've attempted using webkit tools, but can't figure out how to get it to animate only once, and with the bar animations
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
Menu.style.display = "none";
function ShowHide(x) {
x.classList.toggle("change");
var Menu = document.getElementById("Menu");
if (Menu.style.display === "none") {
Menu.style.display = "block";
} else {
Menu.style.display = "none";
}
}
<!-- language: lang-css -->
.container {
display: inline-block;
cursor: pointer;
}
.bar1,
.bar2,
.bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
}
body {
background-color: rgb(209, 224, 224);
}
.Menu {
width: 150px;
background-color: rgb(208, 208, 225);
display: none
}
<!-- language: lang-html -->
<div class="container" onclick="ShowHide(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div id="Menu" style="width: 150px; background-color: rgb(208, 208, 225); display: none;">
<h2><a href="Homepage.html">Homepage</a></h2>
<br>
<h2><a href="Subpage1.html">Subpage 1</a></h2>
<br>
<h2><a href="Subpage2.html">Subpage 2</a></h2>
<br>
<h2><a href="Subpage3.html">Subpage 3</a></h2>
<br>
<h2><a href="Subpage4.html">Subpage 4</a></h2>
<br>
<h2><a href="Subpage5.html">Subpage 5</a></h2>
<br>
</div>
<!-- end snippet -->
答案1
得分: 0
要使菜单与菜单图标一起过渡，您可以将以下内容添加到您的 ShowHide() 函数中。我使用了一个新的 .menu-hidden 类来处理这个问题，这样您就可以在不使用条件语句的情况下切换它：
HTML：
<div id="Menu" class="menu-hidden">
JS：
function ShowHide(x) {
x.classList.toggle("change");
var Menu = document.getElementById("Menu");
Menu.classList.toggle("menu-hidden");
}
由于您希望菜单移动到页面上，而不是设置为 display: none，您可以通过先将其移到页面之外来隐藏它：
.menu-hidden {
transform: translateX(-999px);
}
最后，让我们将平滑过渡添加到您的 CSS（我还将您的选择器从 .Menu 类更正为 #Menu ID，并将样式从内联 HTML 移动到 CSS）：
#Menu {
width: 150px;
background-color: rgb(208, 208, 225);
transition: 0.4s;
}
另外，为了完全将您的 JS 与 HTML 分开，您可以使用事件侦听器而不是 onclick 属性（这是最后一步，不是必需的）：
var x = document.querySelector(".container");
x.addEventListener("click", ShowHide);
function ShowHide() {
this.classList.toggle("change");
var Menu = document.getElementById("Menu");
Menu.classList.toggle("menu-hidden");
}
以下是完整的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="IST101.css">
<script src="hamburger.js" defer></script>
<title>Web design test</title>
</head>
<body>
<div class="container">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div id="Menu" class="menu-hidden">
<h2><a href="Homepage.html">Homepage</a></h2>
<br>
<h2><a href="Subpage1.html">Subpage 1</a></h2>
<br>
<h2><a href="Subpage2.html">Subpage 2</a></h2>
<br>
<h2><a href="Subpage3.html">Subpage 3</a></h2>
<br>
<h2><a href="Subpage4.html">Subpage 4</a></h2>
<br>
<h2><a href="Subpage5.html">Subpage 5</a></h2>
<br>
</div>
</body>
</html>
希望这对您有所帮助！
英文:
To make the menu transition along with the menu icon, you can add this to your ShowHide() function. I used a new .menu-hidden class to address this so that you can toggle it without if conditions:
HTML:
<div id="Menu" class="menu-hidden">
JS:
function ShowHide(x) {
x.classList.toggle("change");
var Menu = document.getElementById("Menu");
Menu.classList.toggle("menu-hidden");
}
Since you want the menu to translate onto the page, instead of setting its display: none you can hide it by translating it off the page first:
.menu-hidden {
transform: translateX(-999px);
}
Finally, let's add the smooth transition to your CSS (I've also corrected your selector from .Menu class to #Menu id and moved the style to CSS from inline HTML):
#Menu{
width: 150px;
background-color: rgb(208, 208, 225);
transition: 0.4s;
}
In addition, to completely separate your JS from the HTML, you can use an event listener instead of the onclick attribute (this last step is not mandatory):
var x = document.querySelector(".container");
x.addEventListener("click", ShowHide);
function ShowHide() {
this.classList.toggle("change");
var Menu = document.getElementById("Menu");
Menu.classList.toggle("menu-hidden");
}
Here's the full code:
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-js -->
var x = document.querySelector(".container");
x.addEventListener("click", ShowHide);
function ShowHide() {
this.classList.toggle("change");
var Menu = document.getElementById("Menu");
Menu.classList.toggle("menu-hidden");
}
<!-- language: lang-css -->
.container {
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {opacity: 0;}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
body {
background-color: rgb(209, 224, 224);
}
#Menu{
width: 150px; background-color: rgb(208, 208, 225);
transition: 0.4s;
}
.menu-hidden {
transform: translateX(-999px);
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="IST101.css">
<script src="hamburger.js" defer></script>
<title>Web design test</title>
</head>
<body>
<div class="container">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div id="Menu" class="menu-hidden">
<h2><a href="Homepage.html">Homepage</a></h2>
<br>
<h2><a href="Subpage1.html">Subpage 1</a></h2>
<br>
<h2><a href="Subpage2.html">Subpage 2</a></h2>
<br>
<h2><a href="Subpage3.html">Subpage 3</a></h2>
<br>
<h2><a href="Subpage4.html">Subpage 4</a></h2>
<br>
<h2><a href="Subpage5.html">Subpage 5</a></h2>
<br>
</div>
</body>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论