Question

如果我有任何错误，我深表歉意，但是我刚刚加入，现在我仍然是Web开发的新手。我尝试过较早练习汉堡菜单，但不会显示。我希望有人能指导我做错了什么。这是代码。

var show = document.getElementById("nav-links");

function showMenu() {
  show.style.right = "0";
}

function closeMenu() {
  show.style.right = "-200px";
}

@media (max-width: 700px) {

  .nav-bar {
    padding: 10px 30px;
  }

  .fa-bars {
    position: absolute;
    right: 20px;
    top: 10px;
  }

  .nav-bar .fa {
    display: block;
    color: #f1f1f1;
    margin: 10px 25px;
    font-size: 22px;
    cursor: pointer;
  }

  .nav-links {
    height: 100vh;
    width: 200px;
    background: #111;
    top: 0;
    right: -200px;
    text-align: left;
    z-index: 2;
    transition: 0.5s;
    position: absolute;
  }

  .nav-links ul a {
    display: block;
  }

  .nav-links .btn {
    float: none;
    margin-left: 25px;
    margin-top: 10px;
  }
}

<div class="nav-bar">
  <div class="nav-logo">
    <a href="#">GottaGo</a>
  </div>
  <div class="nav-links">
    <i class="fa fa-close" onclick="closeMenu()" id="nav-links"></i>
    <ul>
      <a href="#">
        <li>Home</li>
      </a>
      <a href="#">
        <li>GoWhere</li>
      </a>
      <a href="#">
        <li>About</li>
      </a>
    </ul>
    <button type="button" class="btn">SIGN UP</button>
  </div>
  <i class="fa fa-bars" onclick="showMenu()" id="nav-links"></i>
</div>

我的计划是，当我单击菜单时它将显示此https://i.imgur.com/Zds2D9g.png，但是当我单击它时却没有显示。我尝试插入一个alert（）;只是为了测试它，当我单击它时，它不显示菜单而是显示警报，而不显示我希望的菜单。抱歉，这是我在这里的第一篇文章，所以我希望我不要让任何人感到困惑。

Answer 1

在代码段中，您更改了close图标的样式。为了显示汉堡菜单，应更改nav-menu样式。

因此，我在nav-menu div中添加了新ID nav-links，并更新了其样式。

var show = document.getElementById("nav-menu");

function showMenu() {
  show.style.right = 0;
}

function closeMenu() {
  show.style.right = "-200px";
}

@media (max-width: 700px) {
  .nav-bar {
    padding: 10px 30px;
  }

  .fa-bars {
    position: absolute;
    right: 20px;
    top: 10px;
  }

  .nav-bar .fa {
    display: block;
    color: #f1f1f1;
    margin: 10px 25px;
    font-size: 22px;
    cursor: pointer;
  }

  .nav-links {
    height: 100vh;
    width: 200px;
    background: #111;
    top: 0;
    right: -200px;
    text-align: left;
    z-index: 2;
    transition: 0.5s;
    position: absolute;
  }

  .nav-links ul a {
    display: block;
  }

  .nav-links .btn {
    float: none;
    margin-left: 25px;
    margin-top: 10px;
  }
}

<div class="nav-bar">
  <div class="nav-logo">
    <a href="#">GottaGo</a>
  </div>
  <div class="nav-links" id="nav-menu">
    <i class="fa fa-close" onclick="closeMenu()" id="nav-links">close</i>
    <ul>
      <a href="#">
        <li>Home</li>
      </a>
      <a href="#">
        <li>GoWhere</li>
      </a>
      <a href="#">
        <li>About</li>
      </a>
    </ul>
    <button type="button" class="btn">SIGN UP</button>
  </div>
  <i class="fa fa-bars" onclick="showMenu()" id="nav-links">test</i>
</div>

Answer 2

尝试使用此代码显示，隐藏内容：使用定位可能会导致难看的结果。请记住，然后使用id标识一个项目，使用class标识一组项目。我可以建议的另一件事是保持它尽可能简单，不要放置太多无用的id或类。尝试通过编写更少的代码来获得结果。我希望我能帮助您，祝您好运！

HTML：

<div class="nav-bar">
            <div class="nav-logo">
                <a href="#">GottaGo</a>
            </div>
            <div class="nav-links" id="nav-links">
                <i id="close" class="fa fa-close" onclick="closeMenu()" >Close menu</i>
                <ul>
                    <a href="#"><li>Home</li></a>
                    <a href="#"><li>GoWhere</li></a>
                    <a href="#"><li>About</li></a>
                </ul>
                <button type="button" class="btn">SIGN UP</button>
            </div>
            <i id="show"  class="fa fa-bars" onclick="showMenu()">Show menu</i>
        </div>

CSS

@media (max-width: 700px){
.nav-bar{
    padding: 10px 30px;
}
.fa-bars{
    position: absolute;
    right: 20px;
    top: 10px;
}
.nav-bar .fa{
    display: block;
    color: #f1f1f1;
    margin: 10px 25px;
    font-size: 22px;
    cursor: pointer;
}
.nav-links{
    position:absolute;
    height: 100vh;
    width: 200px;
    background: #111;
    top: 0;
    left: -200px;  
    text-align: left;
    z-index: 2;
    
}
.nav-links .btn{
    float: none;
    margin-left: 25px;
    margin-top: 10px;
    }
}
i:hover{
    cursor: pointer;
    color:red;
}

JavaScript

var show = document.getElementById("nav-links");
function showMenu(){
    show.style.display="block";
            document.getElementById('show').style.display="none";
        document.getElementById('close').style.display="block";
}

function closeMenu(){
    show.style.display= "none";
        document.getElementById('close').style.display="none";
        document.getElementById('show').style.display="block";
}

Answer 3

您在代码中使用的所有内容似乎都已经过时，而且学习起来并不好，我创建了那个小片段，也许您从中得到了一些好处（我评论了所有内容，以便您可以理解）。只需发表评论以询问有关某事的详细信息

let hamburger = document.getElementById("hamburger"); // Get The Hamburger-Button
let nav = document.getElementById("nav"); // Get the Navigation
hamburger.onclick = ()=>{ // when you click the hamburger, the following function will be exec
 nav.classList.toggle("open"); //you toggle the classList of the Navigation with the class "open"
};

body{
  overflow-x:hidden;
}

#hamburger{
  width:50px;
  height:40px;
  display:flex; /* Will display the inner bars like we want it (google css flex for more information)*/
  flex-direction:column; /* Will display the bars in a column */
  align-items: center; /* align the bars to the center */
  justify-content:space-around; /* Displays the bars in a even space vertically*/
  cursor:pointer; /* When you hover over the Hamburger, your cursor will be a pointer */
}

#hamburger div{
  width:30px;
  height:4px;
  background:black;
}

nav a{
  color:white;
  text-decoration:none;
}

nav{
  position:fixed; /* The position is fixed, and it stays the same when you scroll*/
  top:0px; /* Set the y-position to the top at 0px */
  right:0px; /* Set the x-position to the right at 0px */
  width:20vw; /* Set the width to 20vw (vw = viewpoint Width) you can see vw as a percentage of you current screen. so the value 20vw will use 20% of your available width */
  transform: translateX(20vw); /* translate (move) the navigation 20px to the right */
  height:100vh; /* set the height to 100vh (hv = viewpointHeight) so 100% of our current available height */
  background:black;
  transition:transform 500ms; /* set a transition animation for the transform */
}

#nav.open{
  transform: translateX(0); /* when you have the open class attached, it will be visible.
}

nav ul{
  margin:10px;
  list-style-type:none;
  padding:0;
}

<html>

<head>
    <title>Snippet</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>

  <div id="hamburger">
    <div></div>
    <div></div>
    <div></div>
  </div>
  
  <nav id="nav">
  
  <ul>
  
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Lorem</a></li>
  <li><a href="#">Ipsum</a></li>
  
  </ul>
  
  </nav>

</body>

</html>

我正在尝试做一个汉堡菜单，但是当我单击它时它不会显示

3 个答案: