Question

我正在尝试使用css网格和动画。我有这个导航，每个页面都包含一个PHP语句，它与我的javascript完美配合。

但是我希望我的滑出式导航系统能够将我的容器推下来。我设置了一个转换来添加padding-top，并且它确实接受它为容器和正文添加填充。我尝试使用保证金，它也做同样的事情。

/* The navigation transition */
#nav ul {
  background: #3a3a40;
  opacity: 0.5;
  overflow: hidden;
  max-height: 0px;
  margin-bottom: 0px;
  transition: max-height cubic-bezier(0.42, 0, 0.82, 0.59) 0.4s;
}
#nav .slide {
  max-height: 270px;
}

这是我的容器css

/* The container transition */
    .c-content {
  grid-column: 1/5;
  grid-row: 1/3;
  background: green;
  z-index: -1;
  grid-row: 1/3;
  padding-top: 0;
  transition: padding-top cubic-bezier(0.42, 0, 0.82, 0.59) 0.4s;
}
.transition {
  padding-top: 270px;
}

PHP nav包含文件

 /* The PHP include html */
<header id="nav">
  <ul id="ul">
    <div id="nav-grid">
      <a class="nav-box" href="index.php"><li>Home</li></a>
      <a class="nav-box" href="#"><li>Treatments</li></a>
      <a class="nav-box" href="media.php"><li>Media</li></a>
      <a class="nav-box" href="contact.php"><li>Contact</li></a>
    </div>
  </ul>
</header>
  <div class="menu">
    <div id="handle" class="handle" onclick="toggle()">
      <p>Menu</p>
    </div>
  </div>

JavaScript切换文件

var menustate = 0;
function toggle() {
  if (menustate == 0) {
    document.getElementById('ul').classList.add('slide');
    document.getElementById('move').classList.add('transition');
    menustate = 1
  } else if (menustate == 1) {
    document.getElementById('ul').classList.remove('slide');
    document.getElementById('move').classList.remove('transition');
    menustate = 0
  }
}

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/style.css">
    <title>ESTEBAN</title>
  </head>
  <body class="c-grid">
    <div id="header">
      <?php include_once "includes/header.php" ?>
    </div>

      <section class="c-content" id="move">
        <p>item</p>
      </section>

      <div class="footer">
        <?php include_once "includes/footer.php" ?>
      </div>
      <script src="includes/transitons.js"></script>
  </body>
</html>

以下是我正在谈论的before toggle和after toggle的一些照片。你可以看到它看起来很糟糕，并添加了一个滚动条，因为它增加了身体和容器的高度。它很奇怪我不知道如何解决它。我只是想让它推倒我的页面内容。

为什么我的滑出导航会为我的容器和正文添加边距？

0 个答案: