Inicio
Comentar
Imágenes
Webgae
Crear un menú responsive
HTML
Inicio
Temas
Deportes
Información
Video
Mapa
Autor
Contactos
CSS
.clase-navegador { overflow: hidden; background-color: #333; } .clase-navegador a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .clase-navegador a:hover { background-color: #ddd; color: black; } .clase-navegador a.active { background-color: #DF013A; color: white; } .clase-navegador .icon { display: none; } @media screen and (max-width: 600px) { .clase-navegador a:not(:first-child) {display: none;} .clase-navegador a.icon { float: right; display: block; } } @media screen and (max-width: 700px) { .clase-navegador.responsive {position: relative;} .clase-navegador.responsive .icon { position: absolute; right: 0; top: 0; } .clase-navegador.responsive a { float: none; display: block; text-align: left; } }
JavaScript
function miproyecto() { var x = document.getElementById("menuresponsive"); if (x.className === "clase-navegador") { x.className += " responsive"; } else { x.className = "clase-navegador"; } }
Puede cambiar código para ver el resultado
Resultado ↓
No hay comentarios:
Publicar un comentario
Entrada más reciente
Entrada antigua
Inicio
Suscribirse a:
Enviar comentarios (Atom)
No hay comentarios:
Publicar un comentario