Soy nuevo en diseño web y ahora enfrento el siguiente problema: Mi barra de navegación desaparece después de hacer clic en el icono de la hamburguesa (haga clic en el disparador en el menú y luego haga clic de nuevo para ocultarlo) y cambiar el tamaño de la ventana (no quiero que se oculte). Aquí está la página: https://www.ramezamr.com/navbar

Cómo recrear el problema:

1 - Abra el enlace https://www.ramezamr.com/navbar

2: cambie el tamaño de la ventana para alcanzar un ancho inferior a 700 px (el icono de la hamburguesa se mostrará a la izquierda y la navegación se ocultará)

3 - Haga clic en el icono para activar el menú de navegación oculto y vuelva a hacer clic para ocultarlo.

4 - Cambie el tamaño de la ventana nuevamente con un ancho de más de 700 px y notará que la barra de navegación no es visible (El problema aquí es que quiero que muestre la barra de navegación una vez que maximice la ventana).

Saludos

0
ramezamr 1 mar. 2018 a las 16:17

3 respuestas

La mejor respuesta

Así no es como funciona javascript. Debe activar el evento onresize para ejecutar el mismo fragmento de código y verificar el ancho de la ventana cada vez que cambia. Y su código no funcionará si el usuario cambia el ancho de repente pasando a través de 700px, por lo que es mejor usar >=. Véalo a continuación:

function navMenu() {
  x = document.getElementById('nav');

  if (x.style.display === 'block') {
    x.style.display = 'none';
  } else {
    x.style.display = 'block';
  }
}

function myFunction() {
  var w = window.innerWidth;

  if (w >= 700) {
    document.getElementById('nav').style.display ='block';
  }
}
body {
  margin: 0;
}


nav {
  background-color:#ff4d4d;
  width: 100%;
  position:fixed;
  -webkit-box-shadow: 3px 11px 53px -12px rgba(0,0,0,0.75);
  -moz-box-shadow: 3px 11px 53px -12px rgba(0,0,0,0.75);
  box-shadow: 3px 11px 53px -12px rgba(0,0,0,0.75);
  border: 0.2px solid white;
}


 
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.drop li{
  float: none;
}

.drop {
  display: none;
}




li {
  float: left;
}

li a {
	text-decoration: none;
	color: white;
	background-color: #ff4d4d;
	display: block;
	width: 80px;
	text-align: center;
	padding: 10px 10px;
	font-family: sans-serif;
	letter-spacing: 1px;
	border: 1px solid #ff0000;
}

a:hover {

	background-color: #ff1a1a;
}

.droplist:hover .drop {

	display: block;
	position: absolute;
	-webkit-box-shadow: 3px 11px 53px -12px rgba(0,0,0,0.75);
-moz-box-shadow: 3px 11px 53px -12px rgba(0,0,0,0.75);
box-shadow: 3px 11px 53px -12px rgba(0,0,0,0.75);


}

.material-icons {
	cursor: pointer;
	padding:8px;
	text-align: center;
	color: white;
	



}
.burger {
	background-color: #ff4d4d;
	display: block;
	width: 100%;
	position: fixed;
	z-index: 1;
	
}



@media only screen and (max-width: 700px) {

	body {
		background-color: gray;
	}

	li {

	float: none;

	}

	li a {

	
	width: 100%;


	}

	.drop{
 
		width: 100%;
		display: block;
	}
	.droplist:hover .drop {

	display: block;
	position: relative;
	-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;


	}

	nav {
		display: none;
	}

	

}


@media only screen and (min-width: 700px) {

	.burger {

		display: none;
	}

	nav{

		display: block;

	}
}
 <body onresize="myFunction()"> 
 <div class="burger" onclick="navMenu()">
  <i class="material-icons">menu</i>
</div>
<nav id="nav">
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li class="droplist"><a href="#">Dropdown</a>
			<ul class="drop">
				<li><a href="#">Link1</a></li>
				<li><a href="#">Link2</a></li>
				<li><a href="#">Link3</a></li>
			</ul>
		</li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>
</body>

Y aquí jsfiddle.

0
guijob 1 mar. 2018 a las 13:42

Hay un error en la consola que dice que document.getElementsById no es una función. El problema aquí es que debe ser elemento y no elementos. Entonces debería leer:

document.getElementById('nav').style.display = 'block';

La razón de esto es que las ID son únicas, no puede tener más de un elemento HTML en la página con la misma ID. Por lo tanto, getElements.. no es válido.

También vi:

if (w = 700)

Aquí, en la instrucción if, en realidad está asignando 700 a la variable w y siempre se evaluará como verdadero. No está probando la igualdad. Probablemente quisiste hacer algo como:

if (w >= 700) 
0
Bryan 1 mar. 2018 a las 13:51

Miro tu código y encuentro esto

document.getElementsById('nav').style.display ='block';

Reemplácelo con un

document.getElementById('nav').style.display ='block';

Debería funcionar.

0
Anirudha Gupta 1 mar. 2018 a las 13:25