javascript - HTML CSS Javascript 汉堡包菜单问题

Question

有人介意看一下网站吗？地址是test.dvps.uk/index.html

我在使用汉堡包菜单时遇到问题，它位于 50% 的列中，我希望它右对齐。我已经尝试对齐内容、 float 和不同的位置和显示，但似乎可以正确处理。我遇到的另一个问题是，当切换菜单时，它会展开但会将内容向下推到下面的容器中，但我希望它也能移动容器。

我确定我调整菜单对齐导致了这个问题，所以在我进一步打破它之前，你介意帮忙吗？谢谢 :)

$(document).ready(function() {
  $(".hamburger").click(function() {
    $(".nav").slideToggle("slow");
  });
});

*,
*:before,
*:after {
  box-sizing: inherit;
}

* {
  margin: 0;
  padding: 0;
  border: none;
}

html {
  box-sizing: border-box;
}

body {
  font-family: "Arial";
  font-size: 1.2em;
}

.container {
  margin: 0 auto;
  padding-top: 10px;
  max-width: 1000px;
}

.container-bottom-pad {
  margin: 0 auto;
  padding-top: 10px;
  max-width: 1000px;
  padding-bottom: 80px;
}

.outerContainer {
  background-color: #F1F1F1;
}

.row::before,
.row::after {
  display: table;
  content: " ";
  clear: both;
}

.row {
  padding: 10px 0;
}

.one,
.one-third,
.two-thirds,
.one-fourth {
  width: 100%;
}

#headerAndNav {
  background-color: rgba(135, 196, 66, 0.60);
  margin-bottom: 10px;
}

header img {
  z-index: -2;
  position: absolute;
  width: 20%;
  margin: 0 auto;
}

.header-logo {
  position: relative;
  height: 100px;
  width: auto;
}

.nav {
  display: none;
  padding: 0;
  overflow: hidden;
  /* Makes the sliding animation cleaner */
}

.nav-item {
  list-style-type: none;
  text-align: center;
  background: #87c442;
  display: block;
  margin: 12px 0;
  padding: 10px 20px;
  border-radius: 5px;
  box-shadow: 0px 6px #2c3e50;
}

.nav-link {
  text-decoration: none;
  color: #333;
}

.nav-item:active {
  box-shadow: none;
  transform: translate(0px, 6px);
  transition: transform .20s;
}

.hamburger span {
  display: block;
  width: 35px;
  height: 4px;
  background: #625948;
  margin: 5px 0px;
  padding: 0;
}

.hamburger:hover span {
  transition: background ease-in-out .25s;
  background: #87c442;
}

.hamburger:hover {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container" id="headerAndNav">
  <div class="row">
    <header>
      <div class="eleven-twelths column">
        <nav>
          <span class="flex-container">
                    <div class="align">
                        <div class="hamburger">
                            <span></span>
          <span></span>
          <span></span>
      </div>
      <ul class="nav">
        <li class="nav-item">
          <a class="nav-link" href="index.html">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="login.html">Login</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="signup.html">Signup</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="successes.html">Successes</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="prices.html">Prices</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="about.html">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="contact.html">Contact</a>
        </li>
      </ul>
  </div>
  </span>
  </nav>
</div>
<div class="one-twelth column">
  <img alt="logo" class="header-logo" src="images/site/opaque-logo.png">
</div>
<!-- end of one-twelth-->
</div>
<!-- end of row -->
</header>
</div>
<!-- end of container -->

Answer 1

好吧，如果你想要一个强力解决方案，只需在 CSS 文件中这样做:

.hamburger { position:fixed; top: 25px; right: 30px; }

这会将 hamburger div 从文档流中取出，并且它会始终固定在给定的位置。

我看到地平线上出现了一些其他问题，但继续前进。

然后从 HTML 中取出整个对齐的 div。