Estoy tratando de descubrir cómo alternar la visualización de un submenú, abierto al hacer clic en un elemento del menú superior, y colocarlo en una posición relativamente tal que empuje el contenido hacia abajo a medida que se abre, y también ocupa todo el ancho del navegador. Esto también tiene que suceder de una manera que mantenga intacto el menú de nivel superior, que es lo que encuentro difícil de implementar. Aquí está mi intento aquí:

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>
3
Tom Russell 10 ene. 2017 a las 11:40

3 respuestas

La mejor respuesta

Bueno, es un poco complicado, pero puedes usar el pseudo elemento :before con position: absolute para cubrir el ancho de la pantalla.

Para que esta solución funcione, debe no establecer ningún elemento primario con position: relative. De esta manera, el elemento :before ocupará todo el ancho.

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>
1
Mosh Feu 10 ene. 2017 a las 09:58

Verifique las modificaciones a continuación.

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>

Por favor verifique el código modificado. ahora

1
Suresh Lakku 10 ene. 2017 a las 09:20

Puedes usar 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>
1
Michał Perłakowski 10 ene. 2017 a las 08:52