Autor Tema: javascript esconder menu mientras este visualizando en un movil android o ios (Leído 3209 veces)

tata · « **en:** 01 de Marzo 2017, 16:50 »

Hola a todos/as:Estoy de aprendiz en javascript, y quiero esconder digamos el menu mientras esté visualizando en un móvil, y tengo este código:

Código: [Seleccionar]

var btnMenu = document.getElementById('btn-menu');
var nav = document.getElementById('nav');
btnMenu.addEventListener('click', function(){
  nav.classList.toggle('mostrar');
});

Y este es el codigo de enlace de mi index.html

Código: [Seleccionar]

<body>
	<header div class="header">
		<div class="contenedor">
			<h1 class="logo">Texas Get Home</h1>
			<span class="icon-menu" id="btn-menu"></span>
			<nav class="nav" id="nav">
				<ul class="menu">
					<li class="menu__item"><a class="menu__link" href="">Inicio</a></li>
					<li class="menu__item"><a class="menu__link"href="">Procesos</a></li>
					<li class="menu__item"><a class="menu__link"href="">Servicios</a></li>
					<li class="menu__item"><a class="menu__link"href="">Contacto</a></li>
				</ul>
			</nav>
		</div>
	</header>
	<script type="text/javascript" src="js/menu.js"></script>
	</body>
	

</html>

Y este seria el de mi css

Código: [Seleccionar]

nav{
	left: -100%;
	position: absolute;
	top:60px;
	width: 100%;
}
.menu{
	list-style: none;
	margin: 0;
	padding: 10px;
}

.menu__link{
	color: #fff;
	background: #FBA919;
	display: block;
	padding: 15px;
	text-decoration: none;
	
}
.menu__link:hover{
	background: white;
	color: coral;
}
.mostrar{
	left: 0;
}

Gracias de antemano por su ayuda

pedro,, · « **Respuesta #1 en:** 02 de Marzo 2017, 22:26 »

Hola tata.

Intenta poner el código completo, y te digo por qué, el código javascript que pusiste ¿va dentro de alguna función? , y ¿en que parte del html cargas el archivo o código javascript
? porque lo que creo es que se está ejecutando el código javascript antes de que se cargue el contenido del body, y de ahí que no responda correctamente.

Saludos.

bermartinv · « **Respuesta #2 en:** 06 de Marzo 2017, 23:09 »

Se puede mejorar con un poco más de javascript y un poco de transition de CSS, pero bueno, lo que interesa es que funcionase el javascript,no?

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
  body{
    margin:0;
  }
  nav{
left: -100%;
position: absolute;
top:133px;
}
.menu{
list-style: none;
margin: 0;
padding: 10px;
display: inline-block;
}

.menu__link{
color: #fff;
background: #FBA919;
display: block;
padding: 15px;
text-decoration: none;

}
.menu__link:hover{
background: white;
color: coral;
}
.mostrar{
left: -20px;
}
#btn-menu{
  display:block;;
  background: linear-gradient(135deg, #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#fdffff 12%,#e6f8fd 30%,#c8eefb 54%,#bee4f8 75%,#b1d8f5 100%);
  line-height:4em;
  padding-left:50px;
  text-transform:uppercase;
  cursor:pointer;
  margin:0;

}
  </style>
</head>
<body>
	<header div class="header">
		<div class="contenedor">
			<h1 class="logo">Texas Get Home</h1>
			<span class="icon-menu" id="btn-menu">BOTON</span>
			<nav class="nav" id="nav">
				<ul class="menu">
					<li class="menu__item"><a class="menu__link" href="">Inicio</a></li>
					<li class="menu__item"><a class="menu__link"href="">Procesos</a></li>
					<li class="menu__item"><a class="menu__link"href="">Servicios</a></li>
					<li class="menu__item"><a class="menu__link"href="">Contacto</a></li>
				</ul>
			</nav>
		</div>
	</header>
	<script >
  var btnMenu = document.getElementById('btn-menu');
var nav = document.getElementById('nav');
btnMenu.addEventListener('click', function(){
  nav.classList.toggle('mostrar');
});
  </script>
	</body>


</html>

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: