Pestaña vertical para usos múltiples | Oloblogger 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...

11 de diciembre de 2009

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
Copy URL

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

follow us in feedly

21 comentarios :

  1. Parece que cuando algo se pone de moda, todo el mundo a ponerlo (esto es como el vestir). Lo empezaron poniendo para enlazar a facebook o cualquier otra red social y ahora se ve en muchos blogs.
    Al final empiezas a poner código y más código en la plantilla, y como no seas un poco ordenado, después no sabes donde meter la mano.
    Saludos.

    ResponderEliminar
  2. Oye, Oloman, que por más que le doy al botón "contenido" que has puesto como ejemplo en este post pegadito a la barra espaciadora, sólo observo que dicho botón se desplaza unos pocos milimetros a la izquierda. ¿Dónde está el enlace que dices que lleva a la cabecera? No lo veo por ninguna parte. :O

    Saludos.

    ResponderEliminar
  3. Flores Rojas, aunque luego lo modifiqué, precisamente empecé a redactar este post hablando de que era una moda. No me gusta seguir la idem, pero por la temática de este blog, estoy casi obligado a hablar de "lo que se lleva ahora". De todas formas, este cacharrito en particular sí me gusta. Además se pueden poner varios a modo de menú y eso también parece interesante.

    Chacien, siempre estás al quite. Puse mal el nombre del marcador y llevaba a un sitio inexistente. Por tanto, no se movía. Ya lo he arreglado. Gracias.

    Mercier, no lo pongas :D. Lo digo porque sé que te cuesta trabajo no probar cosas y al final se te quedan todas instaladas.

    ResponderEliminar
  4. Estupenda herramienta, la utilizaremos en algun blog casi seguro, no solo es que este de moda, la verdad es que es realmente practica bien para ordenar enlaces o para llamar la atencion sobre ellos.

    Bueno, yo tengo un par de preguntas mas. Cual es el codigo que has utilizado para que la pestaña solo se vea en este post, imagino que sera un condicional, pero al llevar el codigo css ya no se muy bien como o donde ponerlo ya que creo que solo se puede utilizar en html no?

    Y la otra pregunta es si ya habia explicado como conseguir el efecto de desplegable que tienes en la sidebar ciber-cafe, he buscado dentro del sitio pero creo que lo que he visto no era lo mismo.

    Gracias, un saludo.

    BloPupil

    ResponderEliminar
  5. Hola
    La forma de poner cualquier cosa en un solo post, es poniendo ese código como parte de la entrada. Sólo hay que eliminar los saltos de línea que ese código contenga para que funcione bien.

    Sobre los desplegables, supongo que has encontrado este, pero lo que buscas es el efecto más suave. Además de ahí, en este otro enlace lo tienes explicado también para aplicar a gadgets.

    ResponderEliminar
  6. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  7. Hola Oloman,

    ¿Es posible canviar la posición? Es decir, que no sea fija, que se quede en una parte del blog y de allí no se mueva?

    Grácias

    ResponderEliminar
  8. Tendrías que quitar el atributo
    position:fixed;
    Con eso creo que ya es suficiente.

    Perdón por la corrección porque supongo que lo que te lía es estudiar varios idiomas Pau canvi<>cambio.

    ResponderEliminar
  9. Ostres és veritat

    ( anda es verdad )

    Todo sea para mejorar, a ver si luego me ponen un excelente en castellano :)

    Grácias

    ResponderEliminar
  10. Ahora me doy cuenta que seguramente no te llegue con quitar el position:fixed;
    Si no me equivoco de nuevo, tienes que poner en su lugar position:relative; para que funcione como quieres.
    Saludos

    ResponderEliminar
  11. Mi visita de hoy tiene 2 motivos: Felicitarte por esos 2 premios bien merecidos y desearte una FELIZ NAVIDAD...en mayúscula y como gritado, para que pueda atravesar el atlántico y ser escuchado. Saludos.

    ResponderEliminar
  12. Felices Fiestas y una corrección, Luis. No me he llevado dos premios ¡fueron tres!

    ResponderEliminar
  13. Entonces, mi alegría es triple. Un Abrazo.

    ResponderEliminar
  14. Hola Oloman...

    No me funciona :( Lo he puesto antes de lo de /body pero no me aparece nada... También ajusté el tamaño del icono al mío y nada de nada... ¿sabes lo que podría pasar? El blog es http://www.laloliplanet.com

    Gracias por todo!

    ResponderEliminar
  15. Utilizaste la versión para el lado izquierdo ¿verdad? :D
    Es que he visto que había un fallo. Faltaba el 2 en id='contenedor'. Ya está corregido.

    ResponderEliminar
  16. Muchas gracias, Oloman. Efectivamente ahora sí aparece :)

    ResponderEliminar
  17. Hola una pregunta, se pueden poner dos botones al mismo tiempo que te lleven a dos direcciones web distintas?? lo he intentado, copio y pego dos veces antes de body, a uno le pongo 70% y al otro 40% para que no se sobrepongan, y nada solo sale uno, si alguien sabe como hacerle para que aparezcan lod dos se lo agradeceré.

    saludos

    ResponderEliminar
  18. En lugar de usar un %, utiliza una medida en px. Esto suponiendo que al segundo contenedor le pones otro nombre y que a su vez, en el segundo ID, utilizas ese otro... ;) De otra manera se superponen totalmente :D

    ResponderEliminar
  19. Hola Oloman,
    he intentado hacer lo mismo que decia Edgar (un comentario atrás) pero sólo se ve una solapa; a pesar que le cambie el nombre al segundo contenedor y utilicé valores en px.

    Weno, saludos
    Esta es la página editada:
    http://diariomijd.com.ar

    ResponderEliminar
  20. Manu, utiliza el primer código de esta entrada y una réplica del mismo en la que tienes que cambiar todas las referencias a 'contenedor' por 'contenedor2'.

    Ahora, el TOP de 'contenedor' lo cambias de '50%' a '290px' y luego el de 'contenedor2' a '490px'.

    Una vez que te funcione, simplemente cambia la imagen de fondo y ajusta las alturas a las que te gusten.

    ResponderEliminar