En esta guía vamos a detallar los pasos para realizar un menú desplegable (Dropdown menú) para un sitio web. Lo vamos a realizar usando HTML y CSS3, que nos permiten otorgarle muy buenas funciones y una estética muy bonita y adecuada a los principales navegadores web.
El resultado final del trabajo es el siguiente:
Primero vamos a trabajar con el HTML. En la línea “5” puedes cambiar el nombre de la pestaña del navegador web.
- Título
- En la línea “5”
En la línea “10” puedes modificarlo por el texto que quieras o el logo de la página web. Y el restante código es el del menú; si deseas personalizar los botones simplemente reemplazas “Galería” en la línea “16” por el texto que quieras. O por ejemplo puedes agregar otra línea para ampliar el desplegable.
O copias todas las líneas del menú principal y el submenú para ampliar las prestaciones del menú vertical.
- Menú con seis botones
- Menú con siete botones
Y de esta manera puedes agregar o quitar opciones del menú y el submenú.
Ahora vamos a trabajar con el CSS3; los nuevos navegadores van a poder soportar los efectos y retoques que le damos al menú sin ningún problema, pero también incluimos el código para que los navegadores antiguos lean dichos efectos (degradado, bordes redondeados, etcétera).
Aquí podrás manipular colores, el alto del menú, el largo, fuentes, sombras y negrita, entre otras opciones. También puedes manipular el estado “hover”.
- Aquí podrás manipular colores
- Modificado
Ahora nombras el html con el nombre “menú.html” y el CSS con el nombre “estilos.css”. Y para finalizar creas una textura en formato “JPG” con el tamaño “100” de ancho por “75” de alto y lo nombras “bg.jpg”. Ahora subes todos los archivos vía FTP.
Y en el navegador web escribes “tudominio.com/menu.html” y puedes ver el resultado final del menú desplegable.
Con esta guía puedes hacer un menú desplegable a tu medida con las necesidades y características que la página web lo requiera.
Comentarios
Publicar un comentario