Sencillo menú con pestañas

Hoy vamos a crear un menú de navegación con pestañas, usando el gadget de lista de enlaces, y vamos a hacer que el enlace seleccionado luzca diferente, igual que pasa con el enlace seleccionado, del gadget de páginas estáticas.

Este menú puedes incluir cualquier enlace, ya sea de páginas estáticas o de las entradas, y solo necesitaremos agregar todos los enlaces manualmente.

DEMOSTRACIÓN

Cómo poner el Menú 



Antes de empezar, necesitamos cambiar el máximo de widgets que se muestran en la cabecera o header, para poder agregar ahi el gadget de "Lista de enlaces" de nuestro menú, ya que si ponemos el menú en la sección del crosscol, puede resultar problemático en la nuevas plantillas, ya que éstas traen algunos estilos para esa sección que puede afectar el resultado.

Entonces necesitamos ir a la edición de HTML de la plantilla, y buscar con la ayuda de "ctrl F", esta linea:

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

Luego, cambias el 1 por: 3,   y no por yes, checas en vista previa, y si todo luce bien, guarda los cambios.

Después, para tener mas precisión en la separación de los widgets del header, usamos este CSS que pegamos en el campo de añadir CSS personalizado, yendo a Diseño ► Diseñador de plantillas ► Avanzado ►Añadir CSS...

#header .widget {

margin: 7px 0; /*el margen de los widgets del header que puedes cambiar si quieres*/

padding: 0;

}

Guardas los cambios en APLICAR AL BLOG. Después de eso, ya se puede poner ahí en la cabecera, el gadget de "Lista de Enlaces" y puedes arrastrarlo para ponerlo debajo de la cabecera o encima de ésta.



Ahora, hagamos nuestro menú con pestañas...



Paso 1: Desde el escritorio, ve a diseño ► Diseñador de Plantillas ► Avanzado ► Añadir CSS

Paso 2: En el campo, pega lo siguiente:

/* Menú de Navegación horizontal con pestañas*/

#LinkList1 {

margin: 0;

padding: 0;

width: 100%;

border-bottom: 9px solid #3bb5d8; /* El borde debajo del menú*/

}

#LinkList1 h2 {

display: none;  /* Ocultamos el título del widget*/

}

#LinkList1 ul{

background: none;

height: 30px;

margin: 0;

padding: 0;

width: 100%;

clear: both;

}

#LinkList1 ul li {

float: left;

margin: 0 3px 0 0;

padding: 0;

border: none; /*para eliminar el borde en ciertas plantillas*/

list-style: none;

font-size: 16px;  /* tamaño de la fuente */

}

#LinkList1 li a {

float: left;

display: block;

height: 30px;

margin: 0;

padding: 0 5px;

background-color: #b0e2f0;/* El color de las pestañas*/ 

text-align: center;

color: #3b3a3a;  /* El color de los enlaces */

line-height: 200%;

text-decoration: none;

/* Esquinas redondeadas en diferentes navegadores, no en IE8 o versiones anteriores, opcional */

-webkit-border-top-left-radius: 6px;

-webkit-border-top-right-radius:  6px;

-moz-border-radius-topleft: 6px;

-moz-border-radius-topright: 6px;

border-top-left-radius:  6px;

border-top-right-radius: 6px;

text-shadow: 1px 1px 0px #fff; /* Efecto texto hundido no en IE y es opcional */

}

#LinkList1 a:hover {  /*El efecto hover*/

background-color: #64d1f0;

}

#LinkList1 li.seleccionado a {

background-color: #3bb5d8; /*El color de las pestaña seleccionada*/

color: #fff; /*El color de la fuente*/

font-weight: bold;

text-shadow: 1px 1px 1px #777;/*sombra en el texto no en IE y es opcional*/

}

Paso 3: Luego, da enter después de una llave de cierre "}", para que sea interpretado lo que pegaste, y después, guarda los cambios en "APLICAR AL BLOG".



Nota: Puedes eliminar los comentarios agregados en el código CSS, es decir, aquellos que están entre /*....*/, de ese modo haces más ligero el código.



Paso 4: Ahora, vamos a los "Elementos de la página", o "Diseño" en la nueva interfaz, y agregamos todos los enlaces que queramos, usando el gadget de "Lista de enlaces":

En la configuración, podemos incluir "Inicio", agregando la URL de nuestro blog, así como también podemos cambiar el orden de los enlaces...

Paso 5: Ya que terminemos de agregar los enlaces, movemos o arrastramos el gadget, hacia la cabecera, y lo ponemos debajo de esta:

Paso 6: Ahora necesitamos, cambiar un poco el código del gadget, para que funcione el estilo "diferente" de el enlace seleccionado, y para ello, vamos a la Edición de HTML de la plantilla, expandimos plantilla de artilugios, y con la ayuda de "ctrl f", buscamos el título que le pusimos al gadget, y un poco más abajo veremos esto:



<ul>

     <b:loop values='data:links' var='link'>

       <li><a expr:href='data:link.target'><data:link.name/></a></li>

     </b:loop>

   </ul>



Cambiamos lo que esta marcado de rojo, por lo siguiente;  nótese que quedará dentro de <ul>....</ul>:

   <b:loop values='data:links' var='link'> <b:if cond='data:blog.url == data:link.target'><li class='seleccionado'><a expr:href='data:link.target'><data:link.name/></a></li><b:else/> <li><a expr:href='data:link.target'><data:link.name/></a></li></b:if></b:loop>

Paso 7: Checa en vista previa, y si todo luce bien, GUARDA LOS CAMBIOS.



Hecho lo anterior, el link seleccionado se verá "diferente", y se identificará como enlace seleccionado, al igual que pasa con el enlace seleccionado, del gadget de páginas estáticas.



Otras opciones para poner el Menú



Podemos crear una sección nueva en la cabecera, y que quedará, entre la sección del header (donde dice cabecera, en los elementos de la página) y el crosscol, y para ello, necesitamos ir a la edición de HTML de la plantilla, y luego, con la ayuda de ctrl F, buscamos: </header>, inmediatamente después, pegamos el siguiente código:

<div id='contenedor-menu'>  <b:section class='sec-menu' id='sec-menu' maxwidgets='1' showaddelement='yes'/></div>

...y el CSS básico, que pegamos en el campo de añadir CSS personalizado, yendo a Diseño ► Diseñador de plantillas ► Avanzado ►Añadir CSS...

/* Sección para el Menú de Navegación*/

#contenedor-menu {

width: 980px; /*el ancho de la sección*/

height: 40px; /*altura*/

margin: 10px 0;  

padding: 0;overflow: hidden;

clear: both; 

}

#sec-menu{ 

width: 100%;

margin: 0;

padding: 0;

}

También, si la queremos en el top (antes del título) entonces pueden probar ponerlo, antes de: <header>. Otra opción, es arrastrarlo y ponerlo arriba del main o columna principal (arriba de las entradas).

Notas:

• La ventaja de hacer el menú con el gadget de lista de enlaces, es que podemos editar los enlaces o poner otros cuando necesitemos, sin ingresar de nuevo a la edición de HTML de la plantilla.


• Puedes cambiar los colores a tu gusto y necesidad, cuidando  que el borde de #LinkList1 coincida con el color del enlace seleccionado: #LinkList1 li.seleccionado a , para que este tenga sentido.


• En las plantillas de terceros, habrá que tener cuidado en donde ponerlo, pues dependerá del diseño que se adapte facilmente.


• Todo es CSS válido, excepto por algunas las lineas de CSS3.

Conclusiones:

Un menú facilita la navegación, y por lo tanto le da usabilidad a nuestro sitio, no importa si es vertical u horizontal, lo importante es que sea visible y se encuentre fácil,  para que nuestros usuarios puedan navegar en nuestro sitio de una manera cómoda e intuitiva.



*Editado