3

Estoy actualmente creando un menú de navegación responsive con HTML5 y CSS. Para ello, mi idea es que en versión de escritorio el menú se muestre completo, a full width y que en versión móvil se muestre un label con un checkbox el cual abre o cierra el menú en responsive.

El problema es que el menú no me ocupa el ancho de la página completo (en cualquier pantalla. Tengo dos actualmente, una de 1440px y otra de 1920px para las pruebas).

Dejo el código a continuación:

Nota: la imagen es un placehold de 350 x 100 píxeles

body {
  margin: 0px;
}
/*Strip the ul of padding and list styling*/

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: absolute;
}
/*Hacer que la imagen no se mueva */

#img-nav {
  padding-top: 0px !important;
}
/*Create a horizontal list*/

li {
  display: inline-block;
  float: left;
}
/*Style for menu links*/

li a {
  display: block;
  min-width: 200px;
  height: 70px;
  text-align: center;
  line-height: 50px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #fff;
  background: #2f3036;
  text-decoration: none;
  padding-top: 30px;
}
/*Hover state for top level links*/

li:hover a {
  background: #19c589;
}
/*Style for dropdown links*/

li:hover ul a {
  background: #f3f3f3;
  color: #2f3036;
  height: 40px;
  line-height: 40px;
}
/*Hover state for dropdown links*/

li:hover ul a:hover {
  background: #19c589;
  color: #fff;
}
/*Hide dropdown links until they are needed*/

li ul {
  display: none;
}
/*Make dropdown links vertical*/

li ul li {
  display: block;
  float: none;
}
/*Prevent text wrapping*/

li ul li a {
  width: auto;
  min-width: 100px;
  padding: 0 20px;
}
/*Display the dropdown on hover*/

ul li a:hover + .hidden,
.hidden:hover {
  display: block;
}
/*Style 'show menu' label button and hide it by default*/

.show-menu {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-decoration: none;
  color: #fff;
  background: #19c589;
  text-align: center;
  padding: 10px 0;
  display: none;
}
/*Hide checkbox*/

input[type=checkbox] {
  display: none;
}
/*Show menu when invisible checkbox is checked*/

input[type=checkbox]:checked ~ #menu {
  display: block;
}
/*Responsive Styles*/

@media screen and (max-width: 760px) {
  /*Make dropdown links appear inline*/
  ul {
    position: static;
    display: none;
  }
  /*Create vertical spacing*/
  li {
    margin-bottom: 1px;
  }
  /*Make all menu links full width*/
  ul li,
  li a {
    width: 100%;
  }
  /*Display 'show menu' link*/
  .show-menu {
    display: block;
  }
  #img-nav {
    display: none;
  }
}
<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>CSS Only Navigation Menu</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/home.css">
</head>

<body>
  <nav>
    <label for="show-menu" class="show-menu">Show Menu</label>
    <input type="checkbox" id="show-menu" role="button">
    <ul id="menu">
      <li>
        <a href="#" id="img-nav">
          <img src="images/nav/logoplacehold.png" alt="">
        </a>
      </li>
      <li><a href="#">Inicio</a>
      </li>
      <li>
        <a href="#">Aula Virtual</a>
        <ul class="hidden">
          <li><a href="#">Test Online</a>
          </li>
          <li><a href="#">Test DGT</a>
          </li>
        </ul>
      </li>
      <li><a href="#">Resultado Teórico</a>
      </li>
      <li><a href="#">Nuestros Vehículos</a>
      </li>
      <li><a href="#">Permisos</a>
      </li>
    </ul>
  </nav>
</body>

</html>

1
  • 2
    @media screen and (max-width: 760px) { <-- hace que esta regla no se aplique a ninguna de los 2 pruebas que estás haciendo (se aplica hasta un máximo de pantalla de 760px)
    – Mariano
    el 16 ago. 2016 a las 8:35

2 respuestas 2

4

Ahora mismo la lista no ocupa el 100%, así que lo primero sería hacer que ocupe todo el ancho de la ventana:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: absolute;
  width: 100%; /* añade esto */
}

Con eso la lista ocupará ya todo el ancho, ahora lo que quieres es que cada elemento de la lista se distribuya de manera similar. Para ello puedes hacer como sugiere Jose FG en su respuesta y hacer un calc:

li {
  display: inline-block;
  float: left;
  width: calc(100% / 6); /* añade esto, se divide por 6 porque hay 6 elementos */
}

El código quedaría así:

body {
  margin: 0px;
}
/*Strip the ul of padding and list styling*/

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: absolute;
  width: 100%;
}
/*Hacer que la imagen no se mueva */

#img-nav {
  padding-top: 0px !important;
}
/*Create a horizontal list*/

li {
  display: inline-block;
  float: left;
  width: calc(100% / 6);
}
/*Style for menu links*/

li a {
  display: block;
  min-width: 200px;
  height: 70px;
  text-align: center;
  line-height: 50px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #fff;
  background: #2f3036;
  text-decoration: none;
  padding-top: 30px;
}
/*Hover state for top level links*/

li:hover a {
  background: #19c589;
}
/*Style for dropdown links*/

li:hover ul a {
  background: #f3f3f3;
  color: #2f3036;
  height: 40px;
  line-height: 40px;
}
/*Hover state for dropdown links*/

li:hover ul a:hover {
  background: #19c589;
  color: #fff;
}
/*Hide dropdown links until they are needed*/

li ul {
  display: none;
}
/*Make dropdown links vertical*/

li ul li {
  display: block;
  float: none;
}
/*Prevent text wrapping*/

li ul li a {
  width: auto;
  min-width: 100px;
  padding: 0 20px;
}
/*Display the dropdown on hover*/

ul li a:hover + .hidden,
.hidden:hover {
  display: block;
}
/*Style 'show menu' label button and hide it by default*/

.show-menu {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-decoration: none;
  color: #fff;
  background: #19c589;
  text-align: center;
  padding: 10px 0;
  display: none;
}
/*Hide checkbox*/

input[type=checkbox] {
  display: none;
}
/*Show menu when invisible checkbox is checked*/

input[type=checkbox]:checked ~ #menu {
  display: block;
}
/*Responsive Styles*/

@media screen and (max-width: 760px) {
  /*Make dropdown links appear inline*/
  ul {
    position: static;
    display: none;
  }
  /*Create vertical spacing*/
  li {
    margin-bottom: 1px;
  }
  /*Make all menu links full width*/
  ul li,
  li a {
    width: 100%;
  }
  /*Display 'show menu' link*/
  .show-menu {
    display: block;
  }
  #img-nav {
    display: none;
  }
}
<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>CSS Only Navigation Menu</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/home.css">
</head>

<body>
  <nav>
    <label for="show-menu" class="show-menu">Show Menu</label>
    <input type="checkbox" id="show-menu" role="button">
    <ul id="menu">
      <li>
        <a href="#" id="img-nav">
          <img src="images/nav/logoplacehold.png" alt="">
        </a>
      </li>
      <li><a href="#">Inicio</a>
      </li>
      <li>
        <a href="#">Aula Virtual</a>
        <ul class="hidden">
          <li><a href="#">Test Online</a>
          </li>
          <li><a href="#">Test DGT</a>
          </li>
        </ul>
      </li>
      <li><a href="#">Resultado Teórico</a>
      </li>
      <li><a href="#">Nuestros Vehículos</a>
      </li>
      <li><a href="#">Permisos</a>
      </li>
    </ul>
  </nav>
</body>

</html>


Ahora, si quieres hacer algo similar pero el número de menús puede cambiar, entonces esa solución puede ser un quebradero de cabeza (porque tendrías que actualizar el CSS si se añaden/borran opciones del menú).

Otra opción que tienes sería usar flex. De este modo los menús se ajustarán automáticamente al ancho del padre independientemente de su número, por lo que el código te servirá independiente-mente del número de opciones que tengas:

ul {
    display:flex;
    width:100%;
}

ul li {
    display:flex;
    flex:1;
}

ul li a {
    width:100%;
}

Tendrías que hacer algunos ajustes para el submenú, yo he hecho algunos pero tampoco son maravillosos. Y el resultado se vería así:

body {
  margin: 0px;
}
/*Strip the ul of padding and list styling*/

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: absolute;
}
/*Hacer que la imagen no se mueva */

#img-nav {
  padding-top: 0px !important;
}
/*Create a horizontal list*/

li {
  display: inline-block;
  float: left;
}
/*Style for menu links*/

li a {
  display: block;
  min-width: 200px;
  height: 70px;
  text-align: center;
  line-height: 50px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #fff;
  background: #2f3036;
  text-decoration: none;
  padding-top: 30px;
}
/*Hover state for top level links*/

li:hover a {
  background: #19c589;
}
/*Style for dropdown links*/

li:hover ul a {
  background: #f3f3f3;
  color: #2f3036;
  height: 40px;
  line-height: 40px;
}
/*Hover state for dropdown links*/

li:hover ul a:hover {
  background: #19c589;
  color: #fff;
}
/*Hide dropdown links until they are needed*/

li ul {
  display: none;
}
/*Make dropdown links vertical*/

li ul li {
  display: block;
  float: none;
}
/*Prevent text wrapping*/

li ul li a {
  width: auto;
  min-width: 100px;
  padding: 0 20px;
}
/*Display the dropdown on hover*/

ul li a:hover + .hidden,
.hidden:hover {
  display: block;
  top: 100px;
  min-width: 200px;
  width: auto;
}
/*Style 'show menu' label button and hide it by default*/

.show-menu {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-decoration: none;
  color: #fff;
  background: #19c589;
  text-align: center;
  padding: 10px 0;
  display: none;
}
/*Hide checkbox*/

input[type=checkbox] {
  display: none;
}
/*Show menu when invisible checkbox is checked*/

input[type=checkbox]:checked ~ #menu {
  display: block;
}
/*Responsive Styles*/

ul {
    display:flex;
    width:100%;
}

ul li {
    display:flex;
    flex:1;
}

ul li a {
    width:100%;
}

@media screen and (max-width: 760px) {
  /*Make dropdown links appear inline*/
  ul {
    position: static;
    display: none;
  }
  /*Create vertical spacing*/
  li {
    margin-bottom: 1px;
  }
  /*Make all menu links full width*/
  ul li,
  li a {
    width: 100%;
    display: block;
  }
  /*Display 'show menu' link*/
  .show-menu {
    display: block;
  }
  #img-nav {
    display: none;
  }
}
<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>CSS Only Navigation Menu</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/home.css">
</head>

<body>
  <nav>
    <label for="show-menu" class="show-menu">Show Menu</label>
    <input type="checkbox" id="show-menu" role="button">
    <ul id="menu">
      <li>
        <a href="#" id="img-nav">
          <img src="images/nav/logoplacehold.png" alt="">
        </a>
      </li>
      <li><a href="#">Inicio</a>
      </li>
      <li>
        <a href="#">Aula Virtual</a>
        <ul class="hidden">
          <li><a href="#">Test Online</a>
          </li>
          <li><a href="#">Test DGT</a>
          </li>
        </ul>
      </li>
      <li><a href="#">Resultado Teórico</a>
      </li>
      <li><a href="#">Nuestros Vehículos</a>
      </li>
      <li><a href="#">Permisos</a>
      </li>
    </ul>
  </nav>
</body>

</html>

2
  • Muy buena tu respuesta! el 16 ago. 2016 a las 13:25
  • He probado a hacer un calc como has dicho y todo funciona correctamente. El problemilla sería el submenú, que sería más complicado de encuadrar. No funciona al intentar hacer un calc(100%/6) (lo hice para que saliera la misma medida que arriba). Una buena solución sería aplicar al submenú un display:flex para mostrar los dos elementos juntos (aunque a la hora del responsive se vean más grande que los elementos de arriba, aunque no queda mal del todo). el 18 ago. 2016 a las 11:34
1

Lo arreglas añadiendo un ancho relativo a cada elemento de la lista.

Puedes hacer algo como:

width: calc(100% / N); // N es el número de elementos de la lista.

Así se adaptará siempre al ancho de la pantalla.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.