Crear un menú horizontal simple con CSS

Ir abajo

Crear un menú horizontal simple con CSS

Mensaje por Deryan el Dom Oct 14, 2012 11:38 am


Bueno pues este es un tutorial sobre como hacer un menu horizontal con css, lo he encontrado en la web, y pues creo que es de utilidad para aquellos que no tienen mucho conocimiento acerca del css.

Usaremos listas para crear este menú horizontal. Consta de 8 enlaces (por defecto, podemos incluir cuantos queramos):

Código HTML
Código:
<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”:

Código:
#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):

Código:
#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á):

Código:
#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:

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

El efecto sería este:



Saludos espero les sirva!




Hola Invitado, si eres nuevo por aqui te recomiendo leerte las Normas generales de MundoCodigos

Mi nombre es Deryan soy:
Like a Star @ heaven Fundador y Administrador de MundoCodigos Like a Star @ heaven
para cualquier duda,sugerencia,queja,denuncia,se contacta con migo o crea un tema en este foro.
avatar
Deryan
Administrador
Administrador

Mensajes Mensajes : 134
MCoins MCoins : 1086725
Gracias Gracias : 8
Advertencia Advertencia : 100%


Ver perfil de usuario http://mundocodigos.foroactivo.mx

Volver arriba Ir abajo

Volver arriba


 
Permisos de este foro:
No puedes responder a temas en este foro.