如何使子菜单将内容向下推

Question

我正在努力找出如何切换子菜单的显示，当点击顶部菜单项时打开，使其相对定位，以便在动画打开时将内容向下推，并且占据整个浏览器宽度。这也必须以一种方式发生，以保持顶级菜单完好无损，这是我发现难以实现的地方。以下是我的尝试：

jQuery("#nav > li").click(function(e) {
  e.preventDefault();

  jQuery(this).find('ul').slideToggle("slow");
});

.header-container {
  position: relative;
}
.main-nav #nav {
  text-align: center;
  margin: 0;
}
.main-nav #nav > li {
  display: inline-block;
  list-style: none;
}
.main-nav #nav > li ul {
  display: none;
  background: blue;
}
.wrapper {
  background: red;
  min-height: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="header-container">
  <header class="main-header">
    <nav role="navigation" class="main-nav">
      <ul id="nav">
        <li>
          <a href="#">Link 1</a>
          <ul>
            <li>
              <a href="#">Link</a>
            </li>
            <li>
              <a href="#">Link</a>
            </li>
            <li>
              <a href="#">Link</a>
            </li>
            <li>
              <a href="#">Link</a>
            </li>
            <li>
              <a href="#">Link</a>
            </li>
            <li>
              <a href="#">Link</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
      </ul>
    </nav>
  </header>
</div>
<div class="wrapper">
</div>

- Tom Russell

---

我不确定我是否理解你是否希望子菜单“推”内容？ - Mosh Feu

当您单击链接1时，其他顶级链接不应移动，子菜单应在蓝色中滑出并占据完整宽度，并将红色div向下推。 - Tom Russell

Answer 1

请查看以下修改。

jQuery("#nav > li").click(function(e) {
  e.preventDefault();

  jQuery('#subMenu').slideToggle("slow");
});

.header-container {
  position: relative;
  margin: 0;
}
.main-nav #nav {
  text-align: center;
  margin: 0;
}
.main-nav #nav > li {
  display: inline-block;
  list-style: none;
  vertical-align: text-top;
  max-width: 100px;
}
#subMenu {
  display: none;
  background: blue;
  position: relative;
  top: 50;
  left: 0;
  width: 100%;
  margin: 0px;
}
#subMenu > ul {
  margin: 0;
}
.wrapper {
  background: red;
  min-height: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="header-container">
  <header class="main-header">
    <nav role="navigation" class="main-nav">
      <ul id="nav">
        <li>
          <a href="#">Link 1</a>
          
        </li>
        <li>
          <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
      </ul>
    </nav>
  </header>
</div>
<div id="subMenu">
     <ul>
            <li>
              <a href="#">Link</a>
            </li>
            <li>
              <a href="#">Link</a>
            </li>
            <li>
              <a href="#">Link</a>
            </li>
            <li>
              <a href="#">Link</a>
            </li>
            <li>
              <a href="#">Link</a>
            </li>
            <li>
              <a href="#">Link</a>
            </li>
          </ul>
</div>
<div class="wrapper">
</div>

请检查修改后的代码。现在。

- Suresh Lakku

---

感谢您的帖子 - 抱歉，需要澄清的是：当您单击链接1时，其他顶级链接不应移动，子菜单应以蓝色滑出并占用整个宽度，并将红色div向下推。 - Tom Russell

@Tom Russell，要想让子菜单占满整个宽度，应该将其放在红色div的上方，放在一个不同的div中。 - Suresh Lakku

Answer 2

你可以使用弹性盒子布局（flexbox）：

jQuery("#nav > li").click(function(e) {
  e.preventDefault();

  jQuery(this).find('ul').slideToggle("slow");
});

.header-container {
  position: relative;
}
.main-nav #nav {
  display: flex;
  text-align: center;
  margin: 0;
  padding: 0;
  justify-content: center;
}
.main-nav #nav > li {
  list-style: none;
  flex: 1;
}
.main-nav #nav > li ul {
  display: none;
  background: blue;
}
.wrapper {
  background: red;
  min-height: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="header-container">
  <header class="main-header">
    <nav role="navigation" class="main-nav">
      <ul id="nav">
        <li>
          <a href="#">Link 1</a>
          <ul>
            <li>
              <a href="#">Link</a>
            </li>
            <li>
              <a href="#">Link</a>
            </li>
            <li>
              <a href="#">Link</a>
            </li>
            <li>
              <a href="#">Link</a>
            </li>
            <li>
              <a href="#">Link</a>
            </li>
            <li>
              <a href="#">Link</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
      </ul>
    </nav>
  </header>
</div>
<div class="wrapper">
</div>

- Michał Perłakowski

---

谢谢 - 差不多了 :) 只需要让展开的子菜单变成全宽即可... - Tom Russell

Answer 3

嗯，这有点棘手，但你可以使用 :before 伪元素和 position: absolute 来覆盖屏幕宽度。

为了使此解决方案有效，您必须不将其任何父元素设置为 position: relative。这样，:before 元素将占据整个宽度。

jQuery("#nav > li").click(function(e) {
  e.preventDefault();

  jQuery(this).find('ul').slideToggle("slow");
});

.header-container {
  position: relative;
}
.main-nav #nav {
  text-align: center;
  margin: 0;
}
.main-nav #nav > li {
  display: inline-block;
  list-style: none;
  vertical-align: top;
}
.main-nav #nav > li ul {
  display: none;
  background: blue;
}

.main-nav #nav > li ul:before {
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  background: blue;
  height: 100%;
  z-index: -1;
}

.wrapper {
  background: red;
  min-height: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="header-container">
  <header class="main-header">
    <nav role="navigation" class="main-nav">
      <ul id="nav">
        <li>
          <a href="#">Link 1</a>
          <ul>
            <li>
              <a href="#">Link</a>
            </li>
            <li>
              <a href="#">Link</a>
            </li>
            <li>
              <a href="#">Link</a>
            </li>
            <li>
              <a href="#">Link</a>
            </li>
            <li>
              <a href="#">Link</a>
            </li>
            <li>
              <a href="#">Link</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
        <li>
          <a href="#">Link</a>
        </li>
      </ul>
    </nav>
  </header>
</div>
<div class="wrapper">
</div>

- Mosh Feu