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
  |