Cómo hacer un Menú de pestañas para Blogger u otras web

Menú de pestañas

En ocasiones, deseas ofrecer a los visitantes de tu web, accesos a ciertas páginas o enlaces a otros sitios y para eso utilizas vínculos que son solamente de texto.

Por eso, en esta ocasión te traigo un menú que aunque es sencillo, sale del rutinario vinculo textual. Porque un menú de pestañas es otra manera de implementar la navegación en tu sitio web.

Un elemento del menú de pestañas tiene 3 estados:

Visualización por defecto (Normal),
Al pasar el mouse (Hover) y
La pestaña que está activa (Activate)

Por defecto se ha definido el siguiente formato de menú, para que puedas visualizar las diferencias al editar el CSS definiéndolo a tu gusto:

Antes de proceder, recuerda que:

Si deseas insertar el CSS en una plataforma No Blogger, deberás insertarlo antes de la etiqueta </head> y entre las etiquetas <style > y </style>, por ejemplo:

<style type="text/css">
...Aquí pegas código CSS...
</style>
</head>

También puedes hacerlo en Blogger, pero para que no toques las plantilla, el código CSS puedes insertarlo tal como te lo muestro, utilizando las opciones:

Tema (o Diseño)
Personalizar (o Diseñador de temas)
Opciones avanzadas
Agregar CSS (aparece como última opción en el menú desplegable que comienza con texto de la página)

MANOS A LA OBRA.

1. El código CSS para definir el estilo es el siguiente:

/* === Menu de pestañas === */

/* Fuente */
#TabMenu1
{
   text-align: left;
   float: left;
   margin: 0;
   width: 100%;
   font-family: Arial;
   font-weight: normal;
   font-size: 18px;
   list-style-type: none;
   padding: 15px 0px 4px 10px;
   overflow: hidden;
}

#TabMenu1 li
{
   float: left;
}

#TabMenu1 li a.active, #TabMenu1 li a:hover.active
{
   position: relative;
   font-weight: normal;
   text-decoration: none;
   z-index: 2;
}

/* Márgenes, padding, borde, posición de pestañas */
#TabMenu1 li a
{
   padding: 5px 14px 8px 14px;
   margin-right: 3px;
   text-decoration: none;
   border-bottom: none;
   position: relative;
   top: 0;
   -webkit-transition: 200ms all linear;
   -moz-transition: 200ms all linear;
   transition: 200ms all linear;
}

/* Animación... Al pasar el mouse sobre pestaña   */
#TabMenu1 li a:hover
{
   font-weight: normal;
   text-decoration: none;
   top: -4px;
}

/* Línea de base (horizontal inferior) */
#TabMenu1
{
   border-bottom: 3px solid #0000ff;
}

/* Pestaña activa */
#TabMenu1 li a.active, #TabMenu1 li a:hover.active
{
   background-color: #FFFFFF;
   color: #666666;
}

/* Sin pasar mouse (vista normal) */
#TabMenu1 li a
{
   border: 1px solid #C0C0C0;
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
   background-color: #DEB887;
   color:#000000;
}

/* Al pasar el mouse sobre pestaña */
#TabMenu1 li a:hover
{
   background: #ccccff;
   color: #0000ff;
}

1.1 (Si deseas edita el CSS)

Una vez que hayas insertado el código CSS, lo puedes editar a tu gusto, de acuerdo a los colores y fuentes de tu sitio. Después, podrás utilizarlo cada vez que desees implementar un menú, bastando con solo llamarlo por su Id.

2. Ahora debes insertar el siguiente código en el lugar donde deseas que aparezca el menú:

<div style="height: 90px; overflow: hidden; position: absolute; width: 100%; z-index: 0;">
<ul id="TabMenu1">
<li><a href="#" target="_blank" title="Texto al pasar el mouse">Item 1</a></li>
<li><a href="#" target="_blank" title="Texto al pasar el mouse">Item 2</a></li>
<li><a href="#" target="_blank" title="Texto al pasar el mouse">Item 3</a></li>
<li><a href="#" target="_blank" title="Texto al pasar el mouse">Item 4</a></li>
<li><a href="#" target="_blank" title="Texto al pasar el mouse">Item 5</a></li>
</ul>
</div>

En este punto ya podrías pre-visualizar como quedará el menú en su estilo predefinido o según hayas editado el CSS.

Ahora, solo bastará que configures los vínculos (#), los títulos al pasar el mouse sobre las pestañas, los items y si deseas puedes eliminar target="_blank" para que no se abra el enlace en una pestaña nueva.

<li><a href="#" title="Texto al pasar el mouse" target="_blank">Item 1</a></li>

Pero,... ¿Qué sucede si deseas el menú dentro de una entrada?

Probablemente elijas colocarlo en un gadget en la cabecera, pero si decides colocarlo por ejemplo dentro de una entrada, al editar en modo “Redactar”, verás que solo aparece como un listado con viñetas. Sin embargo, eso no quiere decir que al presentarlo (vista previa o publicarlo) no puedas verlo con su forma real de pestañas.

Cómo hacer un Menú de pestañas para Blogger u otras web

Lo mejor de este código es que no necesitas usar librerías guardadas en sitios externos. Así, todo lo puedes tener dentro del sitio y lógicamente puedes crear los menues que requieras basándote en el estilo (CSS) que previamente definas.

Espero que este post te haya sido de utilidad. Déjate tu comentario para saber como te quedó si lo implementaste en tu sitio.