Flex 导航汉堡在扩展时推送 Flex 内容

Question

我使用 flexbox 创建了一个网页，并包含一个响应式 flex-navigation 栏。但是，当汉堡展开时，它会将页面的其余部分随之向下推。我已经尝试将 .active class 定位到“显示块”和 10000 的 z-index 上的绝对位置，但是这些 help.I 也尝试将导航包装在 row flex 容器内但是那毁了布局的其余部分。

已考虑在 link:http://jsfiddle.net/hRKgV/ 找到的 js fiddle，但它没有弹性框布局，我想知道浮动是否符合概念flexbox 因为它也从文档的正常流中删除了该元素？

如有任何建议，将不胜感激！

这是索引页的代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Flex</title>
  <meta name="viewport" content="width=device-width,initial-scale=1.0">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <style type="text/css">
    * {
      box-sizing: border-box;
    }
    
    body {
      margin: 0;
      font-family: Arial;
      background-color: #faf6bf;
    }
    
    .header {
      background-image: url("images/index.jpg");
      max-width: 100%;
      height: auto;
      background-color: #cccccc;
      height: 500px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      position: relative;
      box-shadow: 2px 2px 5px purple;
    }
    
    .hero-text {
      text-align: center;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
      font-size: 30px;
    }
    
    @media screen and (max-width: 700px) {
      h1 {
        font-size: 40px;
      }
      h3 {
        font-size: 26px;
      }
    }
    
    .navbar {
      position: relative;
      font-size: 18px;
      background-color: navy;
      border: 1px solid rgba(0, 0, 0, 0.2);
      padding-bottom: 10px;
      clear: both;
    }
    
    .main-nav {
      list-style-type: none;
      display: none;
    }
    
    .nav-links,
    .logo {
      text-decoration: none;
      color: rgba(255, 255, 255, 0.7);
    }
    
    .main-nav li {
      text-align: center;
      margin: 15px auto;
      position:
    }
    
    .logo {
      display: inline-block;
      font-size: 22px;
      margin-top: 10px;
      margin-left: 20px;
    }
    
    .navbar-toggle {
      position: absolute;
      top: 10px;
      right: 20px;
      cursor: pointer;
      color: rgba(255, 255, 255, 0.8);
      font-size: 24px;
    }
    
    .active {
      display: block;
    }
    
    @media screen and (min-width: 768px) {
      .navbar {
        display: flex;
        justify-content: space-between;
        padding-bottom: 0;
        height: 70px;
        align-items: center;
      }
      .main-nav {
        display: flex;
        margin-right: 30px;
        flex-direction: row;
        justify-content: flex-end;
      }
      .nav-links {
        margin-left: 40px;
      }
      .logo {
        margin-top: 0;
      }
      .navbar-toggle {
        display: none;
      }
      .logo:hover,
      .nav-links:hover {
        color: rgba(255, 255, 255, 1);
      }
    }
    
    .row {
      display: flex;
      margin-left: 80px;
      margin-right: 80px;
      flex-wrap: wrap;
    }
    
    .fakeimg {
      background-color: #faf6bf;
      width: 100%;
      padding: 20px;
    }
    
    .side {
      -webkit-flex: 20%;
      -ms-flex: 20%;
      flex: 20%;
      background-color: orange;
      color: white;
      padding: 20px;
    }
    
    .side2 {
      -webkit-flex: 20%;
      -ms-flex: 20%;
      flex: 20%;
      background-color: orange;
      color: white;
      padding: 50px;
    }
    
    .main {
      flex: 60%;
      background-color: #fffcc7;
      padding: 20px;
    }
    
    .footer {
      background-color: brown;
      text-align: center;
      color: white;
      padding: 20px;
    }
    
    @media (max-width: 700px) {
      .row {
        flex-direction: column;
      }
    }
  </style>
</head>

<body>
  <nav class="navbar">
    <span class="navbar-toggle" id="js-navbar-toggle">
        <i class="fa fa-bars"></i>        </span>
    <a href="#" class="logo">logo</a>
    <ul class="main-nav" id="js-menu">
      <li>
        <a href="#" class="nav-links">Home</a>
      </li>
      <li>
        <a href="#" class="nav-links">Products</a>
      </li>
      <li>
        <a href="#" class="nav-links">About Us</a>
      </li>
      <li>
        <a href="#" class="nav-links">Contact Us</a>
      </li>
      <li>
        <a href="#" class="nav-links">Blog</a>
      </li>
    </ul>
  </nav>
  <script type="text/javascript">
    let mainNav = document.getElementById('js-menu');
    let navBarToggle = document.getElementById('js-navbar-toggle');
    navBarToggle.addEventListener('click', function() {
      mainNav.classList.toggle('active');
    });
  </script>
  <div class="header">
    <div class="hero-text">
      <h1>I am Jane Doe</h1>
      <h3>And I'm a Photographer</h3>
      <button>Hire me</button>
    </div>
  </div>
  <div class="row">
    <div class="side">
      <h2>About Me</h2>
      <h5>Photo of me:</h5>
      <div class="fakeimg" style="height:200px;">Image</div>
      <p>Some text about me in culpa qui officia deserunt mollit anim..</p>
      <h3>More Text</h3>
      <p>Lorem ipsum dolor sit ame.</p>
      <div class="fakeimg" style="height:60px;">Image</div><br>
      <div class="fakeimg" style="height:60px;">Image</div><br>
      <div class="fakeimg" style="height:60px;">Image</div>
    </div>
    <div class="main">
      <h2>TITLE HEADING</h2>
      <h5>Title description, Dec 7, 2017</h5>
      <div class="fakeimg" style="height:200px;">Image</div>
      <p>Some text..</p>
      <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
      <br>
      <h2>TITLE HEADING</h2>
      <h5>Title description, Sep 2, 2017</h5>
      <div class="fakeimg" style="height:200px;">Image</div>
      <p>Some text..</p>
      <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
    </div>
    <div class="side2">
      <h4>follow me on socila media:</h4><br />
      <ul>
        <li>Link</li>
        <li>Link</li>
        <li>Link</li>
        <li>Link</li>
      </ul>
    </div>
  </div>
  <script type="text/javascript">
    let mainNav = document.getElementById('js-menu');
    let navBarToggle = document.getElementById('js-navbar-toggle');
    navBarToggle.addEventListener('click', function() {
      mainNav.classList.toggle('active');
    });
  </script>
  <!-- Footer -->
  <div class="footer">
    <h2>Footer</h2>
  </div>
</body>

</html>

Answer 1

您正在寻找这样的东西吗：

const nav = document.getElementById('navbar');

const navBarToggle = document.getElementById('js-navbar-toggle');

navBarToggle.addEventListener('click', () => {
  nav.classList.toggle('active');
});

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial;
  background-color: #faf6bf;
  position: relative;
}

.header {
  background-image: url("images/index.jpg");
  max-width: 100%;
  height: auto;
  background-color: #cccccc;
  height: 500px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  box-shadow: 2px 2px 5px purple;
}

.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 30px;
}

@media screen and (max-width: 700px) {
  h1 {
    font-size: 40px;
  }
  h3 {
    font-size: 26px;
  }
}

.navbar {
  position: absolute;
  z-index: 10;
  width: 100%;
  height: 3rem;
  font-size: 18px;
  background-color: navy;
  border: 1px solid rgba(0, 0, 0, 0.2);
  padding-bottom: 10px;
  clear: both;
  overflow: hidden;
  transition: height 250ms ease-in;
}

.main-nav {
  display: block;
  list-style-type: none;
  width: 100%;
}

.nav-links,
.logo {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.7);
}

.main-nav li {
  text-align: center;
  margin: 15px auto;
}

.logo {
  display: inline-block;
  font-size: 22px;
  margin-top: 10px;
  margin-left: 20px;
}

.navbar-toggle {
  position: absolute;
  top: 10px;
  right: 20px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.8);
  font-size: 24px;
}

.active {
  height: 18rem;
}

@media screen and (min-width: 768px) {
  .navbar {
    display: flex;
    justify-content: space-between;
    padding-bottom: 0;
    height: 60px;
    align-items: center;
  }
  .main-nav {
    display: flex;
    margin-right: 30px;
    flex-direction: row;
    justify-content: flex-end;
  }
  .nav-links {
    margin-left: 40px;
  }
  .logo {
    margin-top: 0;
  }
  .navbar-toggle {
    display: none;
  }
  .logo:hover,
  .nav-links:hover {
    color: rgba(255, 255, 255, 1);
  }
}

.row {
  display: flex;
  margin-left: 80px;
  margin-right: 80px;
  flex-wrap: wrap;
}

.fakeimg {
  background-color: #faf6bf;
  width: 100%;
  padding: 20px;
}

.side {
  -webkit-flex: 20%;
  -ms-flex: 20%;
  flex: 20%;
  background-color: orange;
  color: white;
  padding: 20px;
}

.side2 {
  -webkit-flex: 20%;
  -ms-flex: 20%;
  flex: 20%;
  background-color: orange;
  color: white;
  padding: 50px;
}

.main {
  flex: 60%;
  background-color: #fffcc7;
  padding: 20px;
}

.footer {
  background-color: brown;
  text-align: center;
  color: white;
  padding: 20px;
}

@media (max-width: 700px) {
  .row {
    flex-direction: column;
  }
}

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
  <nav class="navbar" id="navbar">
    <span class="navbar-toggle" id="js-navbar-toggle">
        <i class="fa fa-bars"></i>        </span>
    <a href="#" class="logo">logo</a>
    
    <ul class="main-nav" id="js-menu">
      <li>
        <a href="#" class="nav-links">Home</a>
      </li>
      <li>
        <a href="#" class="nav-links">Products</a>
      </li>
      <li>
        <a href="#" class="nav-links">About Us</a>
      </li>
      <li>
        <a href="#" class="nav-links">Contact Us</a>
      </li>
      <li>
        <a href="#" class="nav-links">Blog</a>
      </li>
    </ul>
  </nav>

  <div class="header">
    <div class="hero-text">
      <h1>I am Jane Doe</h1>
      <h3>And I'm a Photographer</h3>
      <button>Hire me</button>
    </div>
  </div>
  <div class="row">
    <div class="side">
      <h2>About Me</h2>
      <h5>Photo of me:</h5>
      <div class="fakeimg" style="height:200px;">Image</div>
      <p>Some text about me in culpa qui officia deserunt mollit anim..</p>
      <h3>More Text</h3>
      <p>Lorem ipsum dolor sit ame.</p>
      <div class="fakeimg" style="height:60px;">Image</div><br>
      <div class="fakeimg" style="height:60px;">Image</div><br>
      <div class="fakeimg" style="height:60px;">Image</div>
    </div>
    <div class="main">
      <h2>TITLE HEADING</h2>
      <h5>Title description, Dec 7, 2017</h5>
      <div class="fakeimg" style="height:200px;">Image</div>
      <p>Some text..</p>
      <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
      <br>
      <h2>TITLE HEADING</h2>
      <h5>Title description, Sep 2, 2017</h5>
      <div class="fakeimg" style="height:200px;">Image</div>
      <p>Some text..</p>
      <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
    </div>
    <div class="side2">
      <h4>follow me on socila media:</h4><br />
      <ul>
        <li>Link</li>
        <li>Link</li>
        <li>Link</li>
        <li>Link</li>
      </ul>
    </div>
  </div>

  <!-- Footer -->
  <div class="footer">
    <h2>Footer</h2>
  </div>
</body>

我在 .navbar class 中添加了一个 position: absolute; z-index: 10;（可能还进行了一些其他的小改动以正确获取代码段运行）。

编辑

我还添加了过渡效果。为此，我更改了切换开关的工作方式。现在，不是更改 .main-nav 的 display 属性，而是更改 .navbar 的高度。 .active class 现在应用于 navbar 元素。

让我知道这是否适合你。

Flex 导航汉堡在扩展时推送 Flex 内容

Flex navigation hamburger pushing Flex content when expanded

html

css

navigation

frontend

flexbox

编辑