A modo de introducción diremos que un Menú responsive es un diseño de código HTML, que explicita que las dimensiones y distribución de los elementos en la página web varíen en función de las dimensiones de la pantalla que está mostrando el contenido de la página web.
¿Qué es un Menú Responsive?
Se denomina Responsive Web Design ( o RWD) a los diseños web que tienen la capacidad de adaptarse al tamaño y forma de la pantalla en la que se visualiza el contenido, respecto de los diseños tradicionales en los que las páginas web estaban diseñadas sólo para un tamaño o formato específico.
El truco más sencillo para saber si una web es responsive es redimensionar la pantalla del navegador. Según varía el tamaño de la misma, se podrá comprobar que la estructura, el diseño y las imágenes se ajustan a las condiciones de visualización.
Un Menú responsive se adaptará automáticamente a cualquier dispositivo móvil.
El Menú responsive que verán a continuación se compone de dos archivos que deben estar incluidos en una carpeta con un nombre (por ejemplo: menu-responsive-html).
Un archivo tendrá una extensión HTML, y lo llamaremos, por ejemplo: index.html
El segundo archivo tendrá una extensión CSS, y lo llamaremos estilos.css
Podrás ver el Menú de Navegación en funcionamiento, y podrás descargarlo en los enlaces situados al final de este artículo.
El menú consta de los siguientes enlaces de navegación:
INICIO | ACERCA DE | DOMINIOS | BLOG | CONTACTO
El Menú de Navegación tiene además un logo situado en la parte izquierda de la página con un enlace.
Cuando reducimos la ventana gráfica del navegador, aparecerá el icono de menú hamburguesa (tres líneas horizontales) a modo de botón, que desplegará el menú la parte central de la página web HTML. Este icono aparecerá en la parte derecha de la página web.
Con un clic en el icono hamburguesa se abre el menú, y una vez que abierto, se cierra con otro clic en el icono.
Dispone de un fondo de pantalla, que podréis ver más adelante en el enlace de demostración.
Menú Responsive HTML CSS
El archivo index.html contendrá el siguiente código HTML.
Código HTML
El archivo estilos.css contendrá el siguiente código CSS
Código CSS
Ver demostración Menú responsive
Más información en:
