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');
}