时间戳

首页 > 解决方案 > 为什么我的折叠导航菜单在展开时没有向下推内容？

html - 为什么我的折叠导航菜单在展开时没有向下推内容？

问题描述

我正在创建一个简单的 flexbox 导航菜单，折叠菜单在移动版本中展开时不会将内容向下推。

这是我正在进行的现场演示：https ://stackblitz.com/edit/bootstrap-nabar-snoyrg

.main-header {
  width: 100%;
  float: left;
  display: block;
  min-height: 100vh;
  height: 100%;
  background-size: cover;
  background-position: center;
  padding-bottom: 100px;
  background-color: gray;
}

.main-nav {
  margin-top: 100px;
  position: sticky;
  align-items: center;
  justify-content: space-around;
  top: 3em;
  left: 0;
  display: flex;
  height: 50px;
  width: 100%;
  color: white;
}
.main-nav__bars {
  color: white;
}
.main-nav__list {
  list-style: none;
  display: flex;
  color: white;
}
.main-nav__item {
  padding: 24px 27px;
  position: relative;
}
.main-nav__item:after {
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
  content: "";
  display: block;
  float: left;
  background-color: #f5f5f5;
  width: 2px;
  height: 60px;
  -webkit-transform: rotate(20deg);
  transform: skew(155deg);
  position: absolute;
  right: 0;
  bottom: 6px;
}
.main-nav__item:last-child::after {
  content: "";
  width: 0px;
}
.main-nav__item:hover::after {
  width: calc(100% + 1px);
}
.main-nav__item:hover .main-nav__link {
  color: #444;
  position: relative;
  z-index: 3;
}
.main-nav__link {
  list-style: none;
  font-size: 1rem;
  color: #fff;
  font-family: "proxima-nova-n6", "proxima-nova";
  font-style: normal;
  font-weight: 600;
}
.main-nav__bars {
  display: none;
}

.main-banner {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.main-banner h2 {
  font-size: 3.75rem;
  line-height: 5.375rem;
  margin-bottom: 1.5rem;
  color: #fff;
  font-family: "proxima-nova-n4", "proxima-nova";
  font-style: normal;
  font-weight: 400;
  margin-top: 70px;
  font-weight: normal;
}
.main-banner p {
  font-size: 1.25rem;
  font-weight: normal;
  color: white;
  text-align: center;
  max-width: 700px;
  margin-bottom: 3.375rem;
  margin-right: auto;
  margin-left: auto;
}
.main-banner__green-button {
  height: 3.4375rem;
  background-color: #00964e;
  text-decoration: none;
  color: #fff;
  padding: 11px 13px;
  display: inline-block;
  box-sizing: border-box;
  line-height: 27px;
  border-radius: 30px;
  border: 3px solid #00964e;
  font-size: 1.125rem;
  padding-right: 50px;
  font-family: "proxima-nova-n6", "proxima-nova";
  font-style: normal;
  font-weight: 600;
  position: relative;
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}
.main-banner__arrow-right::after {
  font-family: "icomoon";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  content: "" !important;
  font-size: 33px;
}
.main-banner__green-button::after {
  float: right;
  content: "";
  display: block;
  width: 34px;
  height: 34px;
  margin-left: 10px;
  top: 10px;
  position: absolute;
  right: 10px;
}
.main-banner__green-button:hover {
  background-color: white;
  color: green;
}
.main-banner__arrow-down {
  transform: rotate(90deg);
  width: 34px;
  height: 34px;
  position: absolute;
  bottom: 100px;
  margin-left: -17px;
  left: 50%;
  z-index: 2;
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
  background-image: url("/assets/images/icon-arrow-right.png");
}

@media only screen and (max-width: 768px) {
  .main-nav {
    margin: 0;
    display: block;
    position: inherit;
  }

  .main-nav__list {
    margin-top: 20px;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .main-nav__item:after {
    content: "";
    width: 1px;
  }

  .Navbar__ToggleShow {
    display: flex;
  }

  .main-nav__bars {
    display: flex;
    justify-content: flex-end;
    cursor: pointer;
    margin-top: -120px;
    padding: 0px;
    font-size: 33px;
  }

  .main-banner__arrow-down {
    bottom: 17px;
  }
  .main-banner h2 {
    text-align: center;
    margin-top: 155px;
  }
}
<div class="main-header">
  <nav class="main-nav navbar" appSidebar #ref="appSidebar">
    <div class="main-nav__link">
      <img src="https://user-images.githubusercontent.com/263237/36633897-d3237f2e-19ad-11e8-960a-daaf5ca3088a.png">
    </div>
    <div class="main-nav__toggle">
      <i class="main-nav__bars fa fa-bars"></i>
    </div>
    <ul class="main-nav__list" [ngClass]="ref.click === true? 'Navbar__ToggleShow' :''">
      <li class="main-nav__item">
        <a class="main-nav__link" href="#">Home</a>
      </li>
      <li class="main-nav__item">
        <a class="main-nav__link" href="#">About us</a>
      </li>
      <li class="main-nav__item">
        <a class="main-nav__link" href="#">What we do</a>
      </li>
      <li class="main-nav__item">
        <a class="main-nav__link " href="#">Projects</a>
      </li>
      <li class="main-nav__item">
        <a class="main-nav__link " href="#">Contact</a>
      </li>
    </ul>
  </nav>

  <div class="main-banner">
    <h2>We are a team of
      <strong>experts</strong>.</h2>
    <p>Founded in 2007, the demila specializes in IT personnel outsourcing for the areas of banking, insurance, telecommunications,
      high-tech, pharmacy, logistics and many others</p>
    <a href="http://en.astek.pl/about-us/" class="main-banner__green-button main-banner__arrow-right">Read more
      <i></i>
    </a>
    <a href="#" class="main-banner__arrow-down"></a>
  </div>
</div>

<div class="container">
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel lobortis est. In felis erat, dignissim sed molestie sed,
  dictum sit amet purus. Nulla ultrices rutrum maximus. Aenean hendrerit, nisl sit amet sagittis viverra, tellus erat euismod
  risus, egestas elementum nibh eros sed ante. Donec imperdiet convallis dui, et semper justo venenatis non. Vestibulum a
  tincidunt sem, non bibendum nunc. Nam tincidunt sed lectus condimentum luctus. Fusce ut blandit lacus. In maximus libero
  vitae velit consequat lobortis. Ut pellentesque, neque ut interdum consectetur, dui dui posuere nulla, sit amet luctus
  nibh augue sed justo. Sed quis gravida leo. Sed cursus erat arcu, eget accumsan orci consequat sed. Phasellus quis dui
</div>

我的代码有什么问题？

标签： htmlcssflexboxbootstrap-4

解决方案

删除height: 50pxfrom.main-nav将允许内容适当地扩展并下推随后的任何内容。

推荐阅读