为什么我的侧导航在关闭时不能顺利过渡？

Question

I'm following a tutorial by Brad Traversy called "Responsive HTML&CSS side menu from scratch. I'm having an issue with the closing of the side-nav as it snaps instead of closing smoothly as in the video. Can someone let me know what I have done wrong??我正在关注 Brad Traversy 的教程，名为“从头开始响应 HTML 和 CSS 侧边菜单。我在关闭side-nav时遇到问题，因为它会捕捉而不是像视频中那样平滑关闭。有人可以告诉我什么我做错了吗？？

<!DOCTYPE html>
<html lang="en">
  <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" 
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
    <nav class="navbar">
      <span class="open-slide">
        <a href="#" onclick="openSlideMenu()">
          <svg width="30" height="30">
            <path d="M0,5 30,5" stroke="#fff" stroke-width="5" />
            <path d="M0,14 30,14" stroke="#fff" stroke-width="5" />
            <path d="M0,23 30,23" stroke="#fff" stroke-width="5" />
          </svg>
        </a>
      </span>
      <ul class="navbar-nav">
        <li><a href="#">home</a></li>
        <li><a href="#">about</a></li>
        <li><a href="#">services</a></li>
        <li><a href="#">contact</a></li>
      </ul>
    </nav>

    <div id="side-menu" class="side-nav">
      <a href="" class="btn-close" onclick="closeSlideMenu()">&times;</a>
      <a href="#">home</a>
      <a href="#">about</a>
      <a href="#">servoces</a>
      <a href="#">contact</a>
    </div>

    <div id="main">
      <h1>responsive side menu</h1>
    </div>

    <script>
      function openSlideMenu() {
        document.getElementById("side-menu").style.width = "250px";
        document.getElementById("main").style.marginLeft = "250px";
      }

      function closeSlideMenu() {
        document.getElementById("side-menu").style.width = "0";
        document.getElementById("main").style.marginLeft = "0";
      }
    </script>
  </body>
</html>






body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #ddd;
}

.navbar {
  background-color: #3b5998;
  overflow: hidden;
  height: 63px;
}

.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.navbar ul {
  padding: 8px 0 0 0;
  list-style: none;
}

.navbar a:hover {
  background-color: #ddd;
  color: #000;
}

.side-nav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  opacity: 0.9;
  overflow-x: hidden;
  padding-top: 60px;
  transition: 1s;
}

.side-nav a {
  padding: 10px 10px 10px 30px;
  text-decoration: none;
  font-size: 22px;
  color: #ccc;
  display: block;
  transition: 0.3s;
}

.side-nav a:hover {
  color: #fff;
}

.side-nav .btn-close {
  position: absolute;
  top: 0;
  right: 22px;
  font-size: 36px;
  margin-left: 50px;
}

#main {
  transition: margin-left 0.5s;
  padding: 20px;
  overflow: hidden;
  width: 100%;
}

I expected for the side menu and the main content so slide to the left smoothly.我期待侧边菜单和主要内容，所以平滑地向左滑动。

Answer 1

The problem is that you didn't have an # on your href that was redirecting to an empty url on this line <a href="" class="btn-close" onclick="closeSlideMenu()">×</a> added #问题是您的 href 上没有#被重定向到此行上的空 url <a href="" class="btn-close" onclick="closeSlideMenu()">×</a>添加了#

Snippet below下面的片段

 function openSlideMenu() { document.getElementById("side-menu").style.width = "250px"; document.getElementById("main").style.marginLeft = "250px"; } function closeSlideMenu() { document.getElementById("side-menu").style.width = "0"; document.getElementById("main").style.marginLeft = "0"; }

 body { font-family: Arial, Helvetica, sans-serif; background-color: #ddd; }.navbar { background-color: #3b5998; overflow: hidden; height: 63px; }.navbar a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; }.navbar ul { padding: 8px 0 0 0; list-style: none; }.navbar a:hover { background-color: #ddd; color: #000; }.side-nav { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #111; opacity: 0.9; overflow-x: hidden; padding-top: 60px; transition: 1s; }.side-nav a { padding: 10px 10px 10px 30px; text-decoration: none; font-size: 22px; color: #ccc; display: block; transition: 0.3s; }.side-nav a:hover { color: #fff; }.side-nav.btn-close { position: absolute; top: 0; right: 22px; font-size: 36px; margin-left: 50px; } #main { transition: margin-left 0.5s; padding: 20px; overflow: hidden; width: 100%; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <link rel="stylesheet" href="style,css" /> <title>Document</title> </head> <body> <nav class="navbar"> <span class="open-slide"> <a href="#" onclick="openSlideMenu()"> <svg width="30" height="30"> <path d="M0,5 30,5" stroke="#fff" stroke-width="5" /> <path d="M0,14 30,14" stroke="#fff" stroke-width="5" /> <path d="M0,23 30;23" stroke="#fff" stroke-width="5" /> </svg> </a> </span> <ul class="navbar-nav"> <li><a href="#">home</a></li> <li><a href="#">about</a></li> <li><a href="#">services</a></li> <li><a href="#">contact</a></li> </ul> </nav> <div id="side-menu" class="side-nav"> <a href="#" class="btn-close" onclick="closeSlideMenu()">&times;</a> <a href="#">home</a> <a href="#">about</a> <a href="#">servoces</a> <a href="#">contact</a> </div> <div id="main"> <h1>responsive side menu</h1> </div> </body> </html>

为什么我的侧导航在关闭时不能顺利过渡？

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-09-20 02:59:10

为什么我的侧导航在关闭时不能顺利过渡？

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-09-20 02:59:10

解决方案1
1 已采纳 2019-09-20 02:59:10