Crear una pestaña lateral con contenido inicialmente oculto

Compartir

Google+

 

Twitter

 

Pinterest

 

Facebook

 

Linkedin

Seguimos con las cosas facilitas, que el calor del verano derrite las neuronas y hay que conservarlas en el mejor estado posible.

En esta ocasión veremos cómo añadir un contenido en una pestaña lateral, fuera del contenido principal del blog, de manera que al pasar el puntero por encima de dicha pestaña ese contenido aparezca. Además, como usaremos position: fixed para situarlo dónde queremos, el contenido permanecerá fijo aunque hagamos scroll en la página.

La idea la vi hace unos días en Tutorial blog for stylish Blogger, aunque le he introducido unas pequeñas variaciones para que se pueda meter un contenido distinto a una lista, que es como viene en el ejemplo de BebenKoben y sobre todo para darle un aspecto distinto a la pestaña.

Mis contenedores están ahí, a la derecha. Son esas pestañas de color ocre. Pasad el puntero por encima y veréis un bloque que aparece con una lista de enlaces a modo de menú y otro con un vídeo dentro.

No requiere de JavaScript porque todo se hace con CSS. El HTML sería este, simplemente una caja con una clase creada para este fin que hará de contenedor general y dentro de ella, una segunda que hará de pestaña y el propio contenido. Este último lo marcaremos de manera genérica con una etiqueta de párrafo.

Lo más cómodo es ponerlo en un gadget, pues al estar posicionado con fixed, el sitio dónde se coloque el HTML es indiferente.

<div class="hiddencon">
<div class="hiddencon-label">&#9679;</div>
<p>CONTENIDO OCULTO</p>
</div>

Como es habitual en estas ocasiones, la magia la hace la parte CSS que es esta otra. También como siempre, hay que incluirlo en la hoja de estilo (entre las etiquetas skin en la plantilla Blogger), aunque también podría ir antes o después del anterior HTML si se mete entre etiquetas <style>.

/* Contenedor general contenido */
.hiddencon {
margin: 0;
padding: 0;
width: 410px;
z-index:99999;
position: fixed;
/* Desplazamiento para ocultar hacia la derecha
todo el ancho del bloque menos el borde */
right: -402px;
top: 10px;
opacity: .9;
}
.hiddencon2 {
top: auto;
bottom: 10px;
}
/* Contenido visible al hacer hover */
.hiddencon:hover {
right: 0;
}
/* Pestaña para desplegar */
.hiddencon-label {
margin-top: -17px;
margin-left: -30px;
padding: 10px;
position: absolute;
top: 50%;
display: inline-block;
color: white;
background: #BE901B;
font-size: 14px;
-moz-border-radius: 20px 0 0 20px;
-webkit-border-radius: 20px 0 0 20px;
border-radius: 20px 0 0 20px;
}
.hiddencon, .hiddencon-label {
/* Desplegado suave con transiciones */
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
/* El contenido incluida variante para listas */
.hiddencon p, .hiddencon ul {
margin: 0;
padding: 0;
border: 8px solid #BE901B;
border-right: 0;
color: #fff;
background-color: #000;
text-align:center;
vertical-align: center;
-moz-border-radius: 10px 0 0 10px;
-webkit-border-radius: 10px 0 0 10px;
border-radius: 10px 0 0 10px;
}
/* Estilo para listas */
.hiddencon ul {
margin:0;
overflow:auto;
}
.hiddencon li {
display: block;
}
.hiddencon li a {
display: block;
padding: 10px;
border-bottom: 1px solid #333;
color: #ddd;
-moz-transition: all 0.4s linear;
-webkit-transition: all 0.4s linear;
transition: all 0.4s linear;
}
.hiddencon li:last-child a{
border-bottom: 0;
}
.hiddencon li a:hover {
background-color: #333;
text-decoration: none;
}

---

Para meter una lista en lugar de texto, un vídeo, imágenes, etc. sólo habría que quitar la etiqueta <p> del HTML:

<div class="hiddencon">
<div class="hiddencon-label">
&#9679;</div>
<ul><li><a href="javascript:void();">Enlace 1</a></li>
<li><a href="javascript:void();">Enlace 2</a></li>
<li><a href="javascript:void();">Enlace 3</a></li>
<li><a href="javascript:void();">Enlace 4</a></li>
<li><a href="javascript:void();">Enlace 5</a></li></ul></div>

Si la lista es muy larga y sobrepasa el alto de la ventana del navegador, mejor usáis directamente el código de Tutorial blog for stylish Blogger.