Pestaña vertical para usos múltiples

Cada vez veo en más sitios, un botón en forma de pestaña vertical, situado en uno de los lados de la página y que incluye un enlace que abre una ventana emergente. Habitualmente es usado con la leyenda FEEDBACK y lo que se muestra al pincharlo es un formulario de contacto para opinar sobre la página en cuestión. A la derecha podeis ver en esta entrada un ejemplo con la leyenda CONTENIDO, que lleva un enlace para subir a la cabecera del blog.

Además de como alternativa al botón Ir Arriba, se puede usar para para llevar a un enlace concreto, invitar a la suscripción del feed, para mostrar un formulario, una imagen, un aviso, nuestros twitts...

Una de las formas (que no la única) de hacer algo parecido, sería mediante este código. Puede ser copiado dentro de un gadget o incorporarlo directamente a la plantilla antes de </body>.

<style type='text/css'>
#contenedor {
position:fixed;
top:50%;right:0px;
width:38px; height:102px;
background:url(URL_IMAGEN_BOTON) no-repeat transparent 4px 0px;
z-index:10;
}
</style>
<a href='URL_ENLACE'><div id='contenedor' onmouseout='this.style.backgroundPosition=&quot;4px 0px&quot;;' onmouseover='this.style.backgroundPosition=&quot;right bottom&quot;;'/></a>

Este ejemplo está preparado para una imagen de 42x102px, que cuando se muestra "plegada" sólo ocupa 38px de ancho. Las dimensiones de la imagen que useis vosotros, se tienen que indicar cambiando los valores de ancho y alto de #contenedor. La diferencia de pixels de ancho que es la que provoca el efecto del botón moviéndose (pestaña normal - pestaña hover, 4px en este ejemplo), se tienen que ajustar en el BACKGROUND del #contenedor y en el del ONMOUSEUT. Lo marcado en verde es lo que tendreis que personalizar.

Para hacer lo mismo pero en el lado izquierdo, el código sería este otro:

<style type='text/css'>
#contenedor2 {
position:fixed;
top:50%;left:0px;
width:38px; height:102px;
background:url(URL_IMAGEN_BOTON) no-repeat transparent -4px 0px;
z-index:10;
}
</style>
<a href='URL_ENLACE'><div id='contenedor2' onmouseout='this.style.backgroundPosition=&quot;-4px 0px&quot;;' onmouseover='this.style.backgroundPosition=&quot;right bottom&quot;;'/></a>

Podeis comprobar que lo que cambiamos es el posicionamiento, fijándolo en la izquierda (LEFT). También modificamos el desplazamiento de los fondos, que ahora es negativo (-4px) lo que hace que la imagen se "mueva" hacia la izquierda. Evidentemente, la imagen habría que rediseñarla para que quedara cerrada por el lado derecho, al contrario de la que se muestra y que sirve de ejemplo en este post.

Nosotros hemos redactado el ejemplo con un enlace simple, pero si teneis algún script para mostrar ventanas modales (ventana emergente con un contenido que se solapa sobre la página original atenuada...), sólo tendríais que añadir los atributos que vuestro script requiera.

Ejemplo con Lytebox:

...
z-index:10;
}
</style>
<a href='URL_ENLACE' rel='lytebox' ><div id='contenedor' onmouseout='this.style.backgroundPosition=&quot;4px 0px&quot;;' onmouseover='this.style.backgroundPosition=&quot;right bottom&quot;;'/></a>

Ejemplo con Lightwindow:

...
z-index:10;
}
</style>
<a href='URL_ENLACE' class='lightwindow' ><div id='contenedor' onmouseout='this.style.backgroundPosition=&quot;4px 0px&quot;;' onmouseover='this.style.backgroundPosition=&quot;right bottom&quot;;'/></a>

Y si no teneis ningún script de este tipo ni lo quereis instalar, en la próxima entrada os explicaremos cómo hacer una ventana modal casera.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter