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:
codigo javascript archivo nombre muestra.jsa { 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; } }
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'); }