1

Estaba intentando hacer una navbar desplegable pero al desplegarse no ocupa el 100% de la pantalla ya que la lista de dentro coge el 100% de la navbar no de la pantalla:

<nav>
  <a href="../index.html">
    <span class="main-text"><img src="../imgs/white-black-PNG.png" style="width: 55px">TITULO</span>
  </a>
  </button>
  <div class="main-nav">
    <ul id="menu">
      <li>
        <a href="inicio.html"><i class="fas fa-home"></i>Inicio</a>
      </li>
      <li>
        <a href="games.html"><i class="fas fa-gamepad"></i>Games</a>
      </li>
      <li>
        <a href="edits.html"><i class="fas fa-edit"></i>Edits</a>
      </li>
      <li>
        <a href="random.html"><i class="fas fa-random"></i>Random</a>
      </li>
      <li>
        <a href="about.html"><i class="fas fa-user"></i>About</a>
      </li>
    </ul>
    <div id="hamburger" onclick="someFunction(this)">
      <div class="bar1"></div>
      <div class="bar2"></div>
      <div class="bar3"></div>
    </div>
  </div>
</nav>

la navbar tiene las siguientes propiedades:

nav {
  position: fixed;
  width: 100%;
  height: 80px;
  top: 0;
  z-index: 15;
}

Cuando la lista se despliega lo pongo 100% pero solo coge el 100% de la nav, es decir que sólo se alarga 80px. He probado en ponerle mucha height para que en cualquier pantalla se vea completo pero no puedo poner los elementos de forma proporcional, la uncia solución es adaptar la lista

--- EDIT ---

Las propiedades de la lista son las siguientes:

ul#menu {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 80px;
  left: 0;
  margin: 0;
}
3
  • al agregar un 100% es el 100% del contenedor en el que está... Nav en este caso, debe estar dentro de otra cosa.
    – Excorpion
    Commented el 15 oct. 2021 a las 14:41
  • No queda claro tu problema y tampoco es reproducible porque no adjuntas el código suficiente para hacerlo. Si fijas el height: 80px; es totalmente normal que el css respete ese height en los hijos si utilizas una medida relativa porcentual. ¿Cómo haces el despliegue del menú? ¿Qué clase le agregas? ¿Con qué código? Checa las unidades vw y vh relativas al ancho de las pantallas y por favor, aclara tu problema editando tu pregunta.
    – Jaime
    Commented el 15 oct. 2021 a las 14:54
  • No toma el 100% porq es un elemento que salio del flujo (fixed, absolut, etc) esta flotando Commented el 15 oct. 2021 a las 15:37

1 respuesta 1

0

El problema que encontré son varios: no estas definiendo bien tu CSS para obtener el efecto desplegable que quieres; no estas definiendo el estilo para el efecto pantalla completa; y la forma que llamas al evento con el onclick="" no es necesario así.

Si entendí bien lo que quieres hacer, realice un cambio para lograr el efecto desplegable correcto del menú:

nav {
 position: fixed;
 width: 100%;
 height: 80px;
 left: 0;
 top: 0;
 z-index: 15;
 -webkit-transition: all 0.3s ease-in-out; 
}

/* Desplega nav */
nav.abrir {
 height: 100%;
 /* Efecto suave */
 background: rgba(0,128,0, 0.5)
}

/* Si ul está dentro de nav, no es necesario ponerlo fijo */
ul#menu {
 position: relative;
 width: 100%;
 height: 100%;
 background: rgba(0,128,0, 0.5)
}

/* Este es a modo de visualización nada más para hacer click */
#hamburger {
 display: block;
 width: 50px;
 height: 50px;
 background: #000;
 color: #fff
   }
<nav>
  <a href="../index.html">
<span class="main-text"><img src="../imgs/white-black-PNG.png" style="width: 55px">TITULO</span>
  </a>
  </button>
  <div class="main-nav">
<ul id="menu">
  <li>
    <a href="inicio.html"><i class="fas fa-home"></i>Inicio</a>
  </li>
  <li>
    <a href="games.html"><i class="fas fa-gamepad"></i>Games</a>
  </li>
  <li>
    <a href="edits.html"><i class="fas fa-edit"></i>Edits</a>
  </li>
  <li>
    <a href="random.html"><i class="fas fa-random"></i>Random</a>
  </li>
  <li>
    <a href="about.html"><i class="fas fa-user"></i>About</a>
  </li>
</ul>
<div id="hamburger" onclick="someFunction()">
  Menú
</div>
  </div>
</nav>

<script> // desplegamos menú
let click = document.querySelector("nav")
function someFunction() {
   
 click.classList.toggle("abrir")
}
</script>

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.