Búsqueda en el Foro:
Buscar


« Ver tema anterior :: Ver siguiente tema »  
Autor Mensaje
Mensaje21-07-2011, 18:30 (UTC)    
Título del mensaje: [Tutorial] Como crear un Menu Horizontal con Css

En este tutorial les Enseñare a Como crear un Menu utilizando Css .
Comenzemos.

Usaremos listas para crear este menú horizontal. Consta de 8 enlaces (por defecto, podemos incluir cuantos queramos):
Código HTML
Cita:
<ul id=”button”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Services</a></li>
<li><a href=”#”>Clients</a></li>
<li><a href=”#”>Products</a></li>
<li><a href=”#”>F.A.Q</a></li>
<li><a href=”#”>Help</a></li>
<li><a href=”#”>Contact Us</a></li>

</ul>



Pero claro, este menú no tiene estilo (CSS). Sin estilo se muestra así:



Código CSS

Vamos aplicarle estilo pues. Solo usaremos un nombre de ID para aplicar CSS Se llamará “button”:

Cita:
#button {
padding: 0;
}


El código anteriormente expuesto eliminará el padding que pueda haber por defecto en la lista de elementos.

Como vamos a crear un menú horizontal, la lista deberá ser horizontal, así que diremos que se dispongan en línea (display: inline):

Cita:
#button li {
display: inline;
}


Nos quedará algo parecido a esto:


Ahora viene lo divertido. Vamos a aplicar los colores, fuentes y tamaños del menú (a nuestro gusto, claro está):

Cita:
#button li a {
font-family: Arial;
font-size:11px;
text-decoration: none;
float:left;
padding: 10px;
background-color: #2175bc;
color: #fff;
}


Y el menú va quedando de esta manera:



Vamos a aplicar un efecto :hover al mover el ratón encima de un elemento de la lista (menú). Nótese la diferencia de padding, margin y color de fondo que mostraremos:

#button li a:hover {
background-color: #2586d7;
margin-top:-2px;
padding-bottom:12px;
}

El efecto sería este:




Aqui finaliza el Tutorial.


Pero si no lo Entendiste bien aqui te dejo los Codigos completos para que los uses si es que deceas.

Codigo Css.



Cita:
#button {
padding: 0;
}
#button li {
display: inline;
}
#button li a {
font-family: Arial;
font-size:11px;
text-decoration: none;
float:left;
padding: 10px;
background-color: #2175bc;
color: #fff;
}
#button li a:hover {
background-color: #2586d7;
margin-top:-2px;
padding-bottom:12px;
}




Codigo Html

Cita:
<ul id="button">
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
</ul>


Si deces ver como funciona entra aqui ; http://brianpwg.es.tl/Ejemplo-de-Menu.htm

Recuerda nunca borrar el BUTTON ya que se conecta con el css , en caso que sepas de css Cambialo.


Ultima edición por brianpwg el Jue Jul 21, 2011 2:33 pm; editado 1 vez
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group