En esta guía muestro como hacer un menu horizontal simple desde 0. Explico los códigos detalladamente para que no queden dudas y espero que les sirva.
Comenzemos! Por favor tomen asiento.
Vista previa final del menú:
Algo que creo que muchos no se dan cuenta es que un menú comienza con lo que en HTML se llama lista y se define así:
Código: <ul>
<li><a href="#" title="Enlace genérico">Elemento 1</a></li>
<li><a href="#" title="Enlace genérico">Elemento 2</a></li>
<li><a href="#" title="Enlace genérico">Elemento 3</a></li>
<li><a href="#" title="Enlace genérico">Elemento 4</a></li>
<li><a href="#" title="Enlace genérico">Elemento 5</a></li>
<li><a href="#" title="Enlace genérico">Elemento 6</a></li>
</ul>
Uffff... Muy complicado! xD
Ahora, ¿cómo hacer para que esa lista se transforme en un menú horizontal? La respuesta: CSS
Lo primero que se debe hacer es darle un valor a la lista para aplciarle estilos CSS que en cuyo caso sería "menu". Entonces ahora aplicaremos estilos CSS a este selector.
Código: <ul id="menu">
<li><a href="#" title="Enlace genérico">Elemento 1</a></li>
<li><a href="#" title="Enlace genérico">Elemento 2</a></li>
<li><a href="#" title="Enlace genérico">Elemento 3</a></li>
<li><a href="#" title="Enlace genérico">Elemento 4</a></li>
<li><a href="#" title="Enlace genérico">Elemento 5</a></li>
<li><a href="#" title="Enlace genérico">Elemento 6</a></li>
</ul>
Explicare en forma de comentarios CSS cada parte del código.
Primero tenemos que definir la estructura del menu, "lo general" digamos:
Código: #menu {
list-style: none; /*Las listas tienen un circulito al principio de cada link y con esto lo sacamos*/
padding: 0; /*Para que no halla relleno entre el borde del menu y lo que este dentro*/
width: 100%; /*Esto hace que el menu, en el caso de que los links no llenen todo el espacio disponible, se vea hasta que termine la caja que lo contenga*/
overflow: hidden; /*Esto es complicado*/
margin: 0px; /*Para que no halla margen entre el menu y la caja que lo contenga*/
background-color: #ffffff; /*El color del fondo del menú. Así es más colorido*/
}
Estamos en la parte más importante, aca es donde reside la transformación de un menu horizontal para que se vea como tal:
Código: #menu li {
float: left; /*Para que los elementos <li> esten uno al lado del otro y no uno abajo del otro*/
margin: 1px 0px 1px 0px; /*Para que esten un poco separados y no juntos*/
padding: 0; /*Sin relleno*/
}
Ahora seguimos con los enlaces normales, osea, los que estan siempre visibles:
Código: #menu a {
display: block; /*Los enlaces son elementos de línea, con esto los transformamos en elementos de bloque para poder manipularlos mejor*/
float: left; /*Para que esten uno al lado del otro*/
margin: 0; /*Es lo mismo que en las anteriroes veces*/
padding: 5px 8px; /*Es lo mismo que en las anteriroes veces*/
text-decoration: none; /*Es para que los links no esten subrayados*/
color: #06A4F9; /*Es el color de los enlaces*/
}
Ahora seguimos con los enlaces que están al posicionar el cursor sobre ellos, así logramos un buen efecto que es muy común pero que nunca vieron como se hacía
Código:
#menu a:hover {
padding: 5px 8px; /*Relleno -.-*/
color: #0771AA; /*El color de los enlaces. Así al posicionarse el cursor cambiara el color del enlace*/
background-color: #E1E3E4; /*El fondo del enlace*/
}
Este menu es básico. Se pueden personalizar más poniendo en lugar de color para el fondo imágenes. También con códigos javascript y cuando aprenda publico el tutorial. Para poner imágenes se cambia la propiedad "background-color" por "background" seguido por el valor "url(url de la imagen)" quedando finalmente así:
Código:
background: url(ur de la imagen);
Fuente
Saludos! ______________
Ultima edición por kilometro6 el Jue Abr 28, 2011 6:31 pm; editado 2 veces
|