Underc0de - Hacking y seguridad informática

Programación Web => Zona Webmaster => Mensaje iniciado por: Xt3mP en Enero 25, 2011, 08:45:06 am

Título: [CSS][AVANZADO] Crear un menú con listas
Publicado por: Xt3mP en Enero 25, 2011, 08:45:06 am
(http://img684.imageshack.us/img684/6411/menuxt3mpjeje.png)

Hola, ¿qué tal?, el siguiente post fue creado a petición de un amigo mío y se trata nada más ni nada menos que un menú sencillo en CSS fácil de adaptar y/o modificar a su gusto.

Si tienes alguna duda de los conceptos básicos del CSS puedes tomar de referencia el post anterior en donde explico como "maquillar" formularios con CSS (en este post se explican que son ids, etc).

En mi caso solo utilizaré un solo archivo HTML pero cuando se trata de una web más grande se recomienda incluír el archivo CSS con el siguiente código:

Código: HTML5
  1. <link type="text/css" rel="stylesheet" href="directorio/tunombre.css">

En donde "directorio" equivale a en la carpeta donde tienes el CSS y "tunombre.css" lógicamente es el archivo CSS, reitero, en este caso solo utilizaré un solo archivo HTML ya que es poco contenido.
Sin nada más que decir comenzemos con el código HTML:

Código: HTML5
  1. <div id="base">
  2. <ul>
  3.     <li><a href="#"></a><div class="link"><a href="#">Link 1</a></div></li>
  4.     <li><a href="#"></a><div class="link"><a href="#">Link 2</a></div></li>
  5.     <li><a href="#"></a><div class="link"><a href="#">Link 3</a></div></li>
  6.     <li><a href="#"></a><div class="link"><a href="#">Link 4</a></div></li>
  7.     <li><a href="#"></a><div class="link"><a href="#">Link 5</a></div></li>
  8. </ul>
  9. </div>

Como podran notar estoy utilizando listas para de esta maner facilitarnos mucho más a la hora de crear algún menú, dentro de una capa con el identificador base ponemos la lista la cual a su vez contiene un link y otra capa más con el identificador link, recuerden que para manejar id en CSS utilizamos "#" y para manejar clases utilizamos ".". Pasemos al código CSS:

Código: CSS
  1. #base{ //Hacemos referencia al id Base el cual sera la base del menu
  2. width: 800px; //Ancho
  3. margin: 0 auto; //Margen
  4. height: 50; //Alto
  5. background: #004E00; //Fondo
  6. font-family: "Trebuchet MS", Verdana; //Fuente de letra
  7. font-size: 18px; //Tamaño de letra
  8. font-weight: bold; //Negrita/strong
  9. -moz-border-radius-bottomleft:10px; //Borde redondeado aba-izq
  10. -moz-border-radius-bottomright:10px; //Borde redondeado aba-der
  11. -moz-border-radius-topleft:10px; //Borde redondeado arr-izq
  12. -moz-border-radius-topright:10px; //Borde redondeado arr-der
  13. text-shadow: #000000 1px 1px 1px; //Sombra de texto
  14. }
  15. #base ul{//Hacemos referencia a la lista desordenada
  16. margin: 0; //Margen
  17. padding: 0; //Separacion
  18. }
  19. #base ul li:hover{//Hacemos referencia al elemento de la lista y al indicar hover estamos declarando qeu al pasar el mouse sobre este cambiara su estilo
  20. background: #B8CA01; //Fondo
  21. height: 100%; //Alto
  22. -moz-border-radius-bottomleft:10px; //Borde redondeado aba-izq
  23. -moz-border-radius-bottomright:10px; //Borde redondeado aba-der
  24. -moz-border-radius-topleft:10px; //Borde redondeado arr-izq
  25. -moz-border-radius-topright:10px; //Borde redondeado arr-der
  26. }
  27. #base ul li a{//Hacemos referencia a los links dentro de la lista desordenada
  28. text-decoration:none; //Decoracion
  29. padding-top: 15px; //Separacion
  30. color: #FFFFFF; //Color
  31. }
  32. #base ul, li{ //Hacemos referencia a la lista desordenada y a los elementos dentro de esta
  33. list-style:none; //Estilo de lista
  34. }
  35. #base ul li{ //Hacemos referencia a los elementos de la lista desordenada
  36. float:left; //Situar
  37. width: 20%; //Ancho
  38. text-align:center; //Alineacion del texto
  39. }
  40. #base .link{ //Indicamos la clase link
  41. padding-top:13px; //Separacion
  42. }

Ahora les explicaré un poco más detalladamente que es lo que hago en términos prácticos:

Abro una capa con id base el cual me servirá como base del menú, dentro de este situo la lista desordenada con sus respectivos elementos y mediante CSS les quito su valor predeterminado para que aparezcan en forma horizontal en vez de forma vertical y les indico un ancho de 20% a c/u, dentro de esos elementos pongo un atributo a con su respectiva capa con la clase link, con CSS cambio los valores predeterminados del atributo a los cuales son los famosos "links" y la capa con la clase link la creo para poder separar el borde del contenido y que éste se centre.

Realmente es un código muy sencillo ya que al ser código CSS la página cargará mucho más rápido y en cuestión de segundos se puede modificar el diseño, cabe mencionar que en los backgrounds en vez de utilizar el color puedes utilizar alguna imagen para darle un toque más personal.

Acá les dejo un demo: Menú (http://xt3mp.info/demos/CSS/menu_1/)
Acá descargar ejemplo: Descargar ejemplo (http://xt3mp.info/demos/CSS/menu_1/crear_menu_listas_y_css_1.rar)
Nota: El resaltador de código no me muestra correctamente la parte del HTML, les recomiendo ir al demo y ver el código fuente.

Saludos.