
Anterior

2. Código CSS

Bueno, ahora viene la parte más difícil, aunque tampoco lo es tanto. Simplemente copiando y pegando ya sale ;-) aunque explicaré para que sirven cada una de las reglas que ańadimos a nuestros CSS. En un principio ponemos el código CSS y luego lo voy explicando.

Ejemplo 2. Código CSS

#menu {
  margin-left: 130px;
  margin-top:56px;
} 

#menu div {
  float:left;
  background:url("../img/menu_izq.gif") no-repeat left top;
  padding:0 0 0 9px;
} 

#menu a {
  display:block;
  background:url("../img/menu_der.gif") no-repeat right top;
  padding:5px 15px 4px 6px;
  text-decoration:none;
  font-weight:bold;
  font-family: Arial;
  font-size: 11px;
  color:#000;
}

#menu a:hover {
  color:#333;
} 

#menu #activo {
  background-position:0 -150px;
  border-width:0;
} 

#menu #activo a {
  background-position:100% -150px;
  padding-bottom:5px;
  color:#333;
} 

#menu div:hover, #menu div:hover a {
  background-position:0% -150px;
  color:#333;
} 

#menu div:hover a {
  background-position:100% -150px;
}

Para empezar y entender un poco más el código vamos a dejar varios conceptos claros:

Identificadores: se crean colocando el caracter "#" delante del nombre y sólo se puede utilizar una vez en el documento. Para llamarlo desde un elemento se hace desde el atributo "id".
Selectores de descendecia: son selectores que crean una ruta de elementos padres, hijos, etc. Se crean separando los selectores por espacios. Por ejemplo: #menu a, estas reglas sólo se aplicarán a los enlaces que estén contenidos dentro del selector con id="menu".
Pseudo-clases: define reglas a un elementos según una serie de situaciones dinámicas. Para ellos se coloca detrás del selector el caracter ":" y luego la pseudo-clase. :hover se acciona cuando pasa el ratón por encima del elemento.Por ejemplo: #menu a:hover, estas reglas se aplicarán cuando el ratón pase por encima de los enlaces que se encuentran dentro del elemento con identificador "menu".

Con estos conceptos previos ya podemos entrar a explicar las reglas de los CSS para el menú por solapas. Lo primero vamos a colocar las dos imágenes que vamos a utilizar para poder crear las solapas, que son las siguientes:

Esta imagen nos servirá para colocar la parte izquierda de la solapa. Tenemos qeu fijarnos que la imagen es de 300px de alto, donde en los primeros 150px aparece en azul y luego en blanco. Esto es por que la misma imagen nos va a servir para las solapas normales como para la solapa activa. Ya veremos como.

Esta imagen nos servirá para la parte derecha de nuestra solapa. Al igual que en la parte izquierda tiene en la misma imagen la solapa normal y la activa.

A continuación explicamos las reglas de los CSS:

#menu: aquí coloco el espacio en pixel por arriba y por la izquierda para que el menú aparezca pegado a la línea de abajo de la cabecera. Cambiará según las dimensiones de la cabecera.
#menu div: estas reglas se aplicarán a todos los "div" que se encuentren dentro del menú. Los div son elementos que aplican un retorno de carro, por ejemplo le pondremos la regla "float:left;" así todos los elementos flotarán a la izquierda y aparecerán uno detrás de otro. Después colocamos en el fondo del elemento la solapa izquierda. Hay que tener en cuenta que sólo aparecerá la solapa azul ya que el elemento no es tan grande. Despues ponemos la dimensiones del div.
#menu a: aquí definimos las reglas de los enlace que se encuentran dentro del menú. Hay varias reglas que definen el color del texto y fuentes. También colocamos el fondo derecho para que nuestra solapa quede perfectamente. Para todo vaya bien nuestra solapa tiene que empezar desde la derecha y se hace así "no-repeat right top". Le estamos diciendo que nuestro fondo empezará desde la esquina superior derecha del elemento.
#menu a:hover: aquí definimos las reglas para cuando pasamos con el ratón por encima del enlace que está dentro de los elementos con identificados menu.
#menu #activo: aquí definimos las reglas para el elemento activo. Lo que hacemos es mover el fondo de nuestro elemento hacia arriba para que aparezca la parte blanca de la solapa en lugar de la parte azul. Para ello utilizamos "background-position:0 -150px;", los dos parámetros son, el primero para la posición horizontal y el segundo para la vertical. Así, nuestro fondo subirá 150px en nuestro elemento, siendo la parte blanca la que aparecerá ahora.
#menu #activo a: hacemos exactamente lo mismo para el elemento enlace de elemento activo. Subimos el fondo 150px para que nuestro elemento quede activo.
#menu div:hover, #menu div:hover a: a los dos selectores separados por comas se le aplicarán las mismas reglas. Esto servirá para cuando pasemos por encima de nuestras solapas aparezcan en blanco al igual que el elemento activo. Debemos tener en cuenta que sólo funcionará en Mozilla, ya que en Internet Explorer, sólo se puede utilizar la pseudo-clase ":hover" en los enlace.

Con esto ya tenemos creado y explicado nuestro menú por solapas. Una forma muy sencilla y cómoda de crear menú fácilmente żno creeís?.

Este documento ha sido bajado de la web http://www.javielinux.tk.