Ya aprendimos a hacer un menú vertical con listas, incluso un menú vertical desplegable ahora toca el turno al menú horizontal más por que el próximo tutorial que les estoy preparando es crear su primer layout con código semántico, pasando desde listas, bloques de citas, menú y demás.
Para empezar en nuestro html ponemos el siguiente código, que será nuestra lista, la que manipularemos para crear el menú horizontal.
-
<div id="menu">
-
<ul id="menuList">
-
<li id="active"><a href="#">Item 01 </a></li>
-
<li><a href="#">Item 02 </a></li>
-
<li><a href="#">Item 03 </a></li>
-
<li><a href="#">Item 04 </a></li>
-
<li><a href="#">item 05 </a></li>
-
</ul>
-
</div>
Le asignamos el ID "menu" a la división que contiene la lista, el siguiente paso es a la lista asígnarle también un ID en este caso fué "menuList" y por último le ponemos también un ID a la opción que estará activa "active"
Bien, ya nuestra lista debe de quedar más o menos así:
Ahora vamos a nuestra CSS y ponemos el siguiente código:
-
/* CONTENEDOR DEL MENU*/
-
#menu {
-
margin:25px 0px 0px 0px;
-
padding:0px;
-
border-bottom:4px solid #000;
-
}
-
-
/* LISTA DEL MENU */
-
#menuList {
-
list-style-type: none;
-
padding:0px 0px 24px 30px;
-
margin: 0px;
-
}
-
-
/* OPCIONES DEL MENÚ */
-
#menuList li {
-
float: left;
-
height: 24px;
-
margin: 0px 1px 0 1px;
-
}
-
-
/* LINKS GENERALES EN EL MENÚ*/
-
#menuList a {
-
float: left;
-
display: block;
-
text-decoration: none;
-
padding: 5px 15px 5px 15px;
-
}
-
-
#menuList a:link,
-
#menuList a:visited {
-
background-color:#CCC;
-
color: #333;
-
}
-
-
#menuList a:hover {
-
background: #333; color:#FFF;
-
}
-
-
/* OPCION ACTIVA */
-
-
#menuList li#active a:link,
-
#menuList li#active a:visited {
-
background-color: #000;
-
color:#FFF;
-
}
-
-
#menuList li#active a:hover {
-
background-color:#A90000;
-
color: #FFF;
-
}
Con esto nuestro menú estará listo para usarse.
- Si quieren que sus opciónes tengan más espacio entre ellas editan en #menuList li la línea del margen.
- Si quieren que sean más largas editan en #menuList a la línea del padding
3 comentarios para Menú horizontal con listas
Joder, no hay dia uno no aprenda algo.
eres genial, gacisa de nuevo