[SOLUCIONADO] barra de navegacion responsive.

b44 · #1 (**permalink**) 01/03/2015, 13:55

Hola a todos, estoy realizando una barra de navegación responsive, es una lista que se ve en la pantalla del ordenador inline, excepto cuando la pantalla de presentación sea menor a 450 (Moviles) que se oculta en block debajo de una imagen y al pasar el dedo en la pantalla tactil de un móvil aparece la barra de navegación.
Esto último que lo he hecho con javascript es lo que no se porqué motivo no funciona. Adjunto el código abajo por si le podéis echar un vistazo y ayudarme a encontrar el error.
Muchas gracias de antemano.

codigo html

Código:

<html lang="es">
<head>
   <meta charset="utf-8">
   <link href="navegacion.css" rel="stylesheet">
<script type="text/javascript" src="muestra.js"></script>
</head>
<body>
   <nav>
 <a onclick="muestra('mostrar')"><img src="menu.png"></a>
      <ul id="mostrar">
         <li>Inicio</li>
         <li>Contacto</li>
         <li>Mis cosas</li>
         <li>Enlaces</li>
         <li>Mapa del Sitio</li>
      </ul>
   </nav>
</body>

codigo css nombre archivo navegacion.css

Código:

a {
   padding: 0.5em 0em;/*8px/16px*/
}
li {
   color:white;
   list-style: none;
   padding:0.75em;/*12px/16px*/
}
li:hover {
   background: rgba(0,0,0,.50);
}
nav {
   background:gray;
   text-align: center;
   width: 100%;
}
ul {
   margin: 0%;
   padding: 0%;
}
/* En resoluciones mayores a 450px */
@media screen and (min-width: 450px) {
   a {
      display: none;
   }
   li {
      display: inline-block;
   }
   ul {
      display: block;
   }
}
/* En resoluciones menores a 450px */
@media screen and (max-width: 449px){
   a {
      display: block;
   }
   li {
      display: block;
   }
}

codigo javascript archivo nombre muestra.js

Código:

function mostrarOcultar(id) {
   if (document.getElementById) {
      var menu = document.getElementById(id);
      menu.style.display = (menu.style.display == 'none') ? 'block' : 'none';
   }
}
window.onload = function(){
   mostrarOcultar('mostrar');
}

monicapo · #2 (**permalink**) 02/03/2015, 07:16

Sin tocar el CSS, poniendo el JS asi:

Código:

muestra = function() {
	if(document.getElementById('mostrar').style.display == 'block') {
		document.getElementById('mostrar').style.display = 'none';
	} else {
		document.getElementById('mostrar').style.display = 'block';
	}
}

window.onload = function() {
	muestra();
}

y el HTML así:

Código:

	<nav>
		<a onmouseover="muestra();"><img src="menu.png"></a>
		<ul id="mostrar">
			<li>Inicio</li>
			<li>Contacto</li>
			<li>Mis cosas</li>
			<li>Enlaces</li>
			<li>Mapa del Sitio</li>
		</ul>
	</nav>

A mi si me funciona. Al hacer click en la imagen se ve o se oculta la capa.

b44 · #3 (**permalink**) 02/03/2015, 12:23

Muchas gracias una pregunta mas:
SE PUEDE
[CODE]
muestra = function() {
if(document.getElementById('mostrar').style.displa y == 'block') {
document.getElementById('mostrar').style.display = 'none';
} else {
document.getElementById('mostrar').style.display = 'block';
}
}

window.onload = function() {
muestra();
}
[/ CODE ]
ponerl este codigo en un archivo externo por ejemplo muestra_oculta.js y luego enlazarlo en el html con un enlace como este

[CODE]
<script type="text/javascript" src="muestra_oculta.js"></script>
[/ CODE ]

monicapo · #4 (**permalink**) 02/03/2015, 16:30

Sí, el ejemplo lo he hecho con el .js externo.