0
(0)

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ú de pestañas, 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:

  1. Visualización por defecto (Normal),
  2. Al pasar el mouse (Hover) y
  3. 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:

  1. Tema (o Diseño)
  2. Personalizar (o Diseñador de temas)
  3. Opciones avanzadas
  4. 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 mousetarget=”_blank”>Item 1</a></li>

 

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

Probablemente elijas colocar el código del menú en un gadget de la cabecera, pero si decides por ejemplo colocarlo dentro de una entrada verás algo distinto, tal como se indica a continuación.
  1. Lógicamente, el código del menú primero lo  insertas en modo Vista HTML, pero…
  2. Al editar en modo “Vista de Redacción”, verás que solo aparece como un listado con viñetas. 
  3. 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.

Este código es ideal para insertarlo en sitios creados en Blogger, sea en un widget o el lugar que te convenga.

 

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

 
Mira aquí otros post con Códigos
 

Vicente Ramírez Administrator

Me encantan los blogs y todo lo que se puede aprender con ellos.
Me desempeñé como profesor de sistemas informáticos unos años de mi vida. Estudios de Licenciatura en Publicidad y Marketing. Tnlgo. en Sistemas de Computación, enseñando lo poco o mucho que puedo saber y ahora con gusto lo comparto con ustedes.

follow me
Vicente Ramírez

Soy autor y fundador de este sitio. Me encantan los blogs y todo lo que se puede aprender con ellos.

Unos años de mi vida me desempeñé como técnico en una empresa de telecomunicaciones y otros como profesor de sistemas informáticos, enseñando lo poco o mucho que puedo saber y ahora lo comparto con ustedes.

En casa, no le huyo a preparar recetas de cocina, sobre todo si se trata de compartir la mesa con mis hijos. Me gusta  también ver la vida en el proceso de las plantas y el respeto a los animales.

Tengo estudios formales de Tecnología en Sistemas de Computación y Licenciatura en Publicidad y Marketing.  Aunque sobre varias  temáticas me gusta ser autodidacta y experimentar para obtener resultados que pueda compartir de manera confiable.

Sin embargo, respecto a mi formación, regularmente evito me llamen por título y simplemente soy Vicente Ramírez, un instructor, un papá, un amigo.  Y es que en ocasiones he escuchado cuando a alguien le preguntan por su nombre y responde… Mi nombre es “Ingeniero Juan Pérez” o “Master Ana Piguave”, por lo que me pregunto si sus padres le habrán puesto por nombre “Ingeniero” o “Master” (😃 Je, je, je, una cosa es el nombre, otra cosa es la profesión). 

Realmente me apasiona el emprendimiento combinado con la tecnología, por lo que me he dado impulso para gestionar con mi proyecto web actual, plasmando este blog en el que se incluyen varias temáticas.

Así, esta web nace con la vocación de ser un sitio para compartir y divulgar estos conocimientos combinados con el de otros autores que poco a poco se van integrando.

 

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en una estrella para puntuarlo!

Promedio de puntuación 0 / 5. Recuento de votos: 0

Hasta ahora, ¡no hay votos!. Sé el primero en puntuar este contenido.

Deja una respuesta