Los menús siempre han sido un elemento infaltable en la visualización de información, por qué, es a partir de él que los usuarios pueden acceder de manera fácil y rápida a toda la información que se desea mostrar.
En los sitio web, los menús han pasado de ser una simple lista enlaces a una serie de elementos HTML que combinado con CSS y JavaScript, nos muestran funcionalidades mas ricas y vistas mas atractivas para usarse.
En esta serie de posts, crearemos un menú desde cero utilizando una lista no ordenada (UL), modificando su vista con CSS y dando funcionalidad con JQuery.
Comencemos…….
1.-Estructurar el menu. Utilizo un div «contenedor » que me permitira mover el menu o cambiar su posicionamiento, dentro de él creo un elemento Lista No Ordenada y creo sus ListItems, uno por cada opción que contendrá el menú.
<div class=”contenedorMenu”>
<ul class=”menu”>
<li><a href=”#inicio”>Inicio</a></li>
<li><a href=”#seccion1″>Sección 1</a></li>
<li><a href=”#seccion2″>Sección 2</a></li>
<li><a href=”#seccion3″>Sección 3</a></li>
</ul>
</div>
2.- Diseñar los estilos. Una vez creada la estructura HTML que formará mi menú, aplico los estilos necesarios para darle una vista diferente a como se vería normalmente una lista no ordenada. A continuación se muestran los estilos aplicados a cada uno de los elementos así como la función que tiene cada uno de ellos:
<style type=»text/css»>
body{ margin:0px;}
/*Estilos para el contendor del menu*/
.contenedorMenu
{
background: #E321A6; /*Color de fondo para el menu*/
width: 400px; /*ancho del menu considerando que cada una de las opciones del menu tiene como ancho 100px;*/
}
/*Estilos para el elemnto ul*/
.menu
{
list-style: none; /*Quitar viñetas de la lista*/
padding: 0px; /*Quitar sangría de la lista */
margin:0px; /*Quitar espacios que genera la lista ul*/
height: 30px; /*Establecer el ancho del menu*/
line-height: 30px; /*Centrar el contenido al medio*/
}
/*Estilos para los items de menu*/
.menu li
{
float:left; /*alinear los elemntos a la izquierda*/
width:100px; /*Establecer el ancho de cada item*/
text-align:center; /*centrar contenido en texto*/
}
/*Estilos para el enlace dentro de los Items de menu*/
.menu li a
{
text-decoration: none; /*Quitar el subrayado*/
color: white; /*Color de fuente*/
display: inline-block; /*Expandir el enlace a lo alto del LI*/
width: 100%; /*Expandir el enlace a lo largo del LI*/
}
/*Estilos para los enlaces cuando el mouse se coloca sobre ellos*/
.menu li a:hover
{
background-color:navy; /*Color de Fondo*/
color:#fff; /*Color de fuente*/
}
</style>
Hasta ahora, tenemos un menú bastante básico pero funcional. Algo asi:
En próximos post, agregaremos algunas funcionalidades y características a este menú.
Gracias.
4 thoughts on “Creación de menú (UL) desde cero – 1 Estructura y diseño.”