octubre 13, 2009 0

Tutorial de CSS parte II. Menú horizontal con listas.

By in CSS

Hoy vamos a ver como crear un menú horizontal con listas. Hay muchos tutoriales en Internet donde viene explicado como hacer esto, pero aquí lo vamos a explicar paso a paso.

Lo primero que vamos a hacer va a ser crear nuestro menú con una lista no ordenada:

<ul id="menu">
<li><a href="#">Inicio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contacto</a></li>
<li><a href="#">Sobre el Autor</a></li>
</ul>

Ahora vamos a aplicar los estilos. Para ello vamos a eliminar la viñeta por defecto (list-style: none) y vamos a hacer que los elementos floten a la izquierda, para que salga en horizontal. También le vamos a dar un borde para decorar y vamos a cambiar el color de fondo de los enlaces al pasar sobre ellos. Veamos el código CSS:

ul#menu {
  list-style: none;
  float: left;
  width: 900px;
  margin: 0;
  padding: 0;
  background: #f0f0f0;
  border: 1px solid #ddd;
}
ul#menu li {
  float: left;
  margin: 0;
  padding: 0;
  border-right: 1px solid #ddd;
}
ul#menu li a {
  float: left;
  display: block;
  padding: 10px;
  color: #333;
  text-decoration: none;
}
ul#menu li a:hover {
  background: #333;
  color: #f0f0f0;
}

De esta forma obtenemos un menú como el de la imagen:

Menu horizontal

Con unas pocas modificaciones podemos hacer que tenga el aspecto de pestañas:

ul#menu {
list-style: none;
float: left;
width: 900px;
margin: 0;
padding: 0;
border-bottom: 1px solid #ddd;
}
ul#menu li {
float: left;
margin: 0;
padding: 0;
border: 1px solid #ddd;
}
ul#menu li a {
float: left;
display: block;
padding: 10px;
color: #333;
background: #f0f0f0;
text-decoration: none;
}
ul#menu li a:hover {
background: #333;
color: #f0f0f0;
}

Y nos quedaría como la siguiente imagen:

Menu con pestanas

Con esto finaliza esta parte sobre las listas y CSS. En la próxima entrega volveremos con las listas, para ver como podemos crear unas listas con más estilo.

Comparte esta entrada:
Delicious Digg Google Technorati Menéame Fresqui Reddit Facebook Twitter Yahoo! Buzz MySpace Email BarraPunto

Tags: , , , ,

Leave a Reply