18910140161

JavaScript垂直Navbar动画不工作

顺晟科技

2021-09-07 12:50:24

175

我是一个14岁的程序员,目前正在制作一个网站。我正在制作一个javascript navbar动画。我已经检查了三次,但一切似乎都是对的。请帮帮我。高度赞赏。我的html`

#sideNav {
  height: 100vh;
  width: 250px;
  right: -250px;
  top: 0;
  background: #f67c92;
  position: fixed;
  z-index: 2;
  transition: all 0.5s;
}

#menubtn {
  position: fixed;
  z-index: 2;
  right: 65px;
  top: 35px;
  cursor: pointer;
  width: 50px;
}
nav ul li {
  margin: 50px 20px;
  list-style: none;
}

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

我的JavaScript

<script>
  var menubtn = document.getElementById("menubtn");
  var sideNav = document.getElementById("sideNav");

  menubtn.style.right = "-250px";

  menubtn.onclick = function () {
    if (sideNav.style.right == "-250px") {
      sideNav.style.right = "0px";
    } else {
      sideNav.style.right = "-250px";
    }
  };
</script>

我的HTML

<nav id="sideNav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Features</a></li>
    <li><a href="#">Courses</a></li>
    <li><a href="#">Offer</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <img src="/images/menu.png" id="menubtn" />
</nav>

顺晟科技:

  • TAG:
相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航