10 enero 2012

Cómo crear un Menú muy Colorido

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

menu-colorido

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. Para crear la estructura de los enlaces, usamos una lista en HTML. Luego, agregamos estilos a los enlaces (a la etiqueta llamada "a" y que es la que se encarga de crear enlaces), de ese modo, es clicable. También podrás agregar una descripción corta a cada enlace debajo de éste, y como puedes ver, usaremos colores sólidos de fondo. Funciona en todos los navegadores incluyendo IE6!.

¡Ahora 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, haz click sobre el boton que dice plantilla de formato, 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 para que sea más ligero para tu blog.

Lo que hacemos para que cada enlace tenga diferente color, es que los identificamos o nombramos por medio de una clase (así se le llama en CSS a un selector que sirve para nombrar elementos con el fin de darle estilos) para cada uno, y declaramos o definimos el color de fondo y usamos tambien otras propiedades de CSS para definir la altura, el color de texto, etc.

Voy a poner el CSS necesario para  crear "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>Descripción</p></a></li>
<li><a class="enlace2" href="#">ENLACE2<p>Descripción</p></a></li>
<li><a class="enlace3" href="#">ENLACE3<p>Descripción</p></a></li>
<li><a class="enlace4" href="#">ENLACE4<p>Descripción</p></a></li>
<li><a class="enlace5" href="#">ENLACE5<p>Descripción</p></a></li>
</ul>

Cada linea representa un elemento de la lista que incluye un enlace:

<li><a class="enlace1" href="#">ENLACE1<p>Descripción</p></a></li>

Para empezar a edita el codigo, sigue la linea mencionada, y empieza por poner la direccion web o pagina de tu blog en lugar de la almohadilla (#).
Donde dice (ENLACE1,2,3...) pones el texto que tendrá el enlace.
y donde dice: Descripción, escribes el texto que aparecerá debajo de cada enlace.

Si quieres agregar más enlaces, deberá repetir esta linea antes de: </ul>

<li><a class="enlace5" href="#">ENLACE<p>Descripción</p></a></li>

Y listo ya tienes un menú muy colorido ;)


Variantes

Puedes crear distintos efectos en el evento hover )al poner el puntero del ratón encima), 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 al poner el puntero encima del enlace (: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 (evento hover). Para ello, tendrás que editar el CSS.


Primerodeberá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 evento hover lo pusimos de forma separada en 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!

Artículos recomendados:

Gracias por compartir tu comentario y hacernos saber tu opinión.