Question

我正试图找到一个工作班轮,不仅能够发挥作用,而且“看好好”,但我已想把菜单翻译成一页,而不是仅仅看上去。

我曾尝试使用网基工具,但可以指出,如何仅仅一次使用网基工具,并用条星表示。

法典如下:

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";
  }
}

 .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
}

<!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" 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>
</body>
</html>

Answer 1

为了与菜单一起实现菜单的过渡,你可以在<条码>上添加这一内容。我使用了一个新的<代码>> 曼努-藏匿类别来处理这一问题,以便你能够在没有下列条件的情况下加以辩论:

传真:

<div id="Menu" class="menu-hidden">

JS:

function ShowHide(x) {
  x.classList.toggle("change");
  var Menu = document.getElementById("Menu");
  Menu.classList.toggle("menu-hidden");
}

由于你想要将菜单上页,而不是设置其<编码>:无。您可以将其从第1页上删除,以掩盖:

.menu-hidden {
  transform: translateX(-999px);
}

最后,请允许我补充一下向你的特别安全局的顺利过渡(我也更正了你从<代码>挑选出来的人。 Menu category to #Menu id , 并将其风格从网上超文本上移至中央支助事务处:

#Menu{
  width: 150px;
  background-color: rgb(208, 208, 225);
  transition: 0.4s;
}

此外,为了把你的联合材料与超文本完全分开,你可以使用一个活动听众而不是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");
}

全文如下:

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");
}

.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);
}

<!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>

友情链接