Cómo crear un Menú muy Colorido

¡Hola, qué tal!, en esta ocasión, te mostraré como crear un menú muy colorido, tanto como lo quieras :)

En una siguiente entrada te diré cómo puedes ponerle iconos usando sólo una imagen (técnica sprite) ;)

Es muy fácil, y lo hacemos sólo con CSS, creamos bloques en los enlaces, de ese modo, toda "la cajita" funciona como enlace; también podrás agregar una descripción corta a cada enlace. En el ejemplo usaré colores de fondo. Funciona en todos los navegadores incluyendo IE6.

Ok, pues entonces, ¡veamos cómo hacerlo!.

Que el menú tenga diferentes colores de fondo

Paso 1. Primero tenemos que tener una sección (para agregar un gadget) y poner ahí el HTML del menú, y lo podemos conseguir de dos formas.

Las dos son muy sencillas, pero voy a explicar sólo una, que consiste en cambiar el número de elementos que se muestran en la cabecera del blog. Para ello, vas a la edición de HTML de la plantilla, y con la ayuda de ctrl F, buscas esta linea de código:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Luego, cambias 1 por 2 y no por yes.

Nota: En la entrada donde explico como poner un menú con pestañas, también menciono la forma de crear una sección nueva en la cabecera. Para las nuevas plantillas no usamos la del crosscol (donde generalmente está el menú con páginas estáticas), ya que hay ciertos estilos que pueden afectar los resultados de nuestro menú.

Ojo: Si quieres el menú arriba del título, entonces procura que el gadget quede arriba de éste, y si lo quieres debajo del título, entonces arrástralo cuidando de no ponerlo en la sección del crosscol, ya que esa sección está justo debajo .

Paso 2. Ve a: Plantilla > Personalizar > Avanzado > Añadir CSS, y pones el siguiente CSS, editando los valores según tus gustos y necesidades. Guíate con los comentarios que están entre /*...*/. Al finalizar puedes quitarlos, y/o también si quieres puedes comprimir el CSS.

Lo que hacemos para que cada enlace tenga diferente color, es crear una clase para cada uno, y ponemos el color de fondo.

Voy a poner en el CSS,  los estilos para "cinco enlaces", tú puedes poner los que quieras, y cambiar el nombre de cada clase que resalté de rojo y si lo haces también lo harás en el HTML.

ul#menu {
width:890px;/*ancho del menú*/
height:50px; /*alto del menú*/
margin:0;
padding:0;
list-style:none;
clear:both;
}
/*los estilos de cada elemento*/
#menu li{
float:left;
padding:0;/*la separación de cada elemento*/
margin:0;
}
/*Los estilos que se aplican a todos los enlaces*/
#menu li a{
font-size:16px;
text-align:center;
color:#242424; /*color de fuente*/
white-space:nowrap;
display:block;
height:35px; /*la altura*/
border:1px solid #fff; /*color de borde, cambia el valor por 0 si no quieres borde y que se separe*/
font-weight:bold;
text-decoration:none;
}
/*Estilos de la descripción*/
#menu p{
font-size:11px;  
padding:3px 0 0 0;
margin:0;
line-height:9px;
text-align: center;
font-weight: normal;
}
/*enlace 1*/
a.enlace1{
width:120px; /*ancho*/
padding:11px 5px 5px 7px;
margin:0;
background:#c3e6ee; /*color de fondo*/
}
/*enlace 2*/
a.enlace2{
width:135px; /*ancho*/
padding:7px 7px 5px 5px;
margin:0;
background:#edcc15;  /*color de fondo*/ 
}
/*enlace 3*/
a.enlace3{
width:135px; /*ancho*/
padding:7px 5px 5px 7px;
margin:0;
background:#e3a1ea;  /*color de fondo*/ 
}
/*enlace 4*/
a.enlace4{
width:145px; /*ancho*/
padding:7px 7px 5px 5px;
margin:0;
background:#c1ef85;  /*color de fondo*/ 
}
/*enlace 5*/
a.enlace5{
width:125px;  /*ancho*/ 
padding:7px 5px 5px 7px;
margin:0;
background:#dbecef;  /*color de fondo*/ 
}
/*El efecto hover de los enlaces */
#menu a:hover{
background:#f54edb;/*color de fondo*/}

Luego, guarda lo que agregaste en "Aplicar al blog".


Notas:

• Todo el CSS es totalmente válido.
• Los valores del padding se leen: arriba, derecha, abajo, izquierda.
• Agregamos la descripción usando la etiqueta "p".

Para cambiar los colores usa esta tabla de colores.

Paso 3. Finalmente, lo que nos falta es agregar el HTML, y para ello vas a diseño, y en la sección de la cabecera, agregas un gadget con la opción HTML/Javascript, y dentro pones esto:

<ul id="menu">

<li><a class="enlace1" href="#">ENLACE1<p>Lorum Ipsum</p></a></li>

<li><a class="enlace2" href="#">ENLACE2<p>Lorum Ipsum</p></a></li>

<li><a class="enlace3" href="#">ENLACE3<p>Lorum Ipsum</p></a></li>

<li><a class="enlace4" href="#">ENLACE4<p>Lorum Ipsum</p></a></li>

<li><a class="enlace5" href="#">ENLACE1<p>Lorum Ipsum</p></a></li></ul>

Sustituye la almohadilla (#), por la dirección web o de la página de tu blog, pones el texto de cada enlace (ENLACE1,2,3...) y donde dice: Lorum Ipsum, escribes la descripción de cada enlace. Separé cada linea del enlace para que la identifiques fácilmente. Al terminar de editarlos puedes quitar la separación.

Y listo ya tienes un menú muy colorido ;)

Variantes

Puedes, crear distintos efectos en el hover, por ejemplo agregar padding, para que se desplace cada enlace, y lo haces en #menu a:hover{, sólo pones:

padding-left:20px;/*padding a la izq.*/

ó

padding-right:20px;/*padding a la derecha*/


Que el color diferente sólo se vea en el efecto hover

Puedes hacer que los enlaces del menú tengan un mismo color, y que el color diferente se vea al poner el puntero del ratón sobre el enlace (efecto hover). Para ello, tendrás que editar el CSS.


Primero, deberás especificar qué color tendrá el enlace, en esta parte:
#menu li a{
...
background: #CCC;
...

Luego, quitas el color de fondo de "cada enlace" (Enlace 1, 2, 3 etc...)

a.enlace1{
...
background:#c3e6ee; /*lo eliminas*/
...
}


Después, defines el color de fondo en el hover, para cada enlace:

a.enlace1:hover{
...
background:#c3e6ee;
...
}
a.enlace2:hover{
...
background:#edcc15;
...
}
...

Finalmente, eliminas esta parte, ya que el efecto hover lo escribimos de forma separada para cada enlace, como te decía anteriormente:

/*El efecto hover de los enlaces */
#menu a:hover{
background:#f54edb;/*color de fondo*/}


De ese modo todos los enlaces se verán igual, y el color diferente se verá sólo al poner el puntero encima de la imagen ;)


¡Qué fácil verdad!, ¡a divertirse un rato!