Búsqueda en el Foro:
Buscar


« Ver tema anterior :: Ver siguiente tema »  
Autor Mensaje
Mensaje28-04-2011, 22:26 (UTC)    
Título del mensaje: [Tutorial CSS] Crear menu horizontal simple desde 0

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
Mensaje28-04-2011, 22:49 (UTC)    
Título del mensaje:

Hey fede (:
Re bueno el tuto :D

Bien explicado a mi me sirvio porque ando haciendoo un menu igualito bue no sera menu pero esta basado en algo haci solo poquito diferente xD

haha nadamas que me sale una linea verde por debajo x)
si te paso el code me podrias ayudar a quitarsela?
;D
te lo agradeceria ya que no la encuentro O_O n_n

Mensaje29-04-2011, 00:50 (UTC)    
Título del mensaje:

Gracias, que bueno que te sirvio. Además es la primera vez (creo, ya no me acuerdo) que me llaman por mi nombre en PWG y como poder negarme cuando lo hacen xD
Pasame el código que te ayudo con gusto.
______________
Mensaje29-04-2011, 01:42 (UTC)    
Título del mensaje:

Je je talvez con mi regreso haga un menu como este, muchas gracias (=
______________
Off
Mensaje29-04-2011, 02:10 (UTC)    
Título del mensaje:

Hola!,

Muy bien el tutorial, muchas gracias un poco simple pero esta bien como ya lo habías comentado
Mensaje29-04-2011, 02:13 (UTC)    
Título del mensaje:

Bonito tutorial, con eso que nos diste Kilometro6 se puede mejorar con esa estructura

Salu2

PD: Soy SSET
______________
Soy solamente-sencillo
Mensaje29-04-2011, 16:02 (UTC)    
Título del mensaje:

Es simple el menu pero tiene un lindo aspecto, además sirve mucho para cuando uno comienza =).
@fcbarcafanweb: el código al final del menú sirve para poner imágenes en lugar de colores. Así se puede personalizar más esta misma estructura que les di.

Saludos!
______________
Mensaje29-04-2011, 16:33 (UTC)    
Título del mensaje:

ohh genial fede :D

muchas gracias por compartirnos siempre tus ayudas en css n_n
y ayudarnos claroo ñ_ñ hohoho
me serivira el css C:

te esperaremos con mas por aqui :D


Ultima edición por skulldarknight el Vie Abr 29, 2011 12:33 pm; editado 1 vez
Mensaje29-04-2011, 19:17 (UTC)    
Título del mensaje:

O.o Cuando seme ocurra de que hacer el proximo tutorial lo ago y luego lo posteo.
______________
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group