Pestañas ocultas que aparecen al pasar el ratón por encima. Programación en Castellano.

Categorías destacadas

Artículo

Inicio Artículo Internet HTML

¡votar!

Pestañas ocultas que aparecen al pasar el ratón por encima

En este tutorial vamos a crear un menú consistente en pestañas que se encuentran ocultas, pero que al pasar el ratón por encima de ellas, aparecen con un texto, definiendo a cada una de ellas. Para conseguir esto vamos a utilizar la librería jQuery.

Lo primero que haremos será crear la estructura HTML que crea las distintas pestañas.

<div class="container">
<ul id="menu">
<li>
<a>
<i class="icon_about"></i>
<span class="title">About</span>
<span class="description">Learn about us and our services</span>
</a>
</li>
<li>
<a>
<i class="icon_work"></i>
<span class="title">Work</span>
<span class="description">See our work and portfolio</span>
</a>
</li>
<li>
<a>
<i class="icon_help"></i>
<span class="title">Help</span>
<span class="description">Talk to our support</span>
</a>
</li>
<li>
<a>
<i class="icon_search"></i>
<span class="title">Search</span>
<span class="description">Search our website</span>
</a>
</li>
</ul>
</div>

Para conseguir el menú, utilizaremos listas con enlaces dentro de ellas. Los enlaces tendrán dentro dos zonas de SPANS, una para indicar el título y otra para indicar la descripción. También tendremos otra zona para añadir el icono de cada pestaña.

Lo siguiente que haremos será añadir el código correspondiente a la hoja de estilos. Lo primero que haremos será definir los estilos para el contenedor del menú, indicandole que deje oculta la parte correspondiente a la descripción, quedándose a la vista solo la parte del título.

.container{
width:900px;
height:130px;
margin:0 auto;
position:relative;
overflow:hidden;
border:3px solid #fff;
background-color:#fff;
-moz-box-shadow:1px 1px 6px #000;
-webkit-box-shadow:1px 1px 6px #000;
-moz-border-radius:0px 0px 20px 20px;
-webkit-border-bottom-left-radius:20px;
-webkit-border-bottom-right-radius:20px;
border-radius:0px 0px 20px 20px;
}

A continuación creamos algunas sombrar y esquinas redondeadas de cada pestaña con propiedades CSS3.

ul#menu{
list-style:none;
position:absolute;
bottom:0px;
left:20px;
font-size:36px;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
color:#999;
letter-spacing:-2px;
}
ul#menu li{
float:left;
margin:0px 10px 0px 0px;
}
ul#menu a{
cursor:pointer;
position:relative;
float:left;
bottom:-95px;
line-height:20px;
width:210px;
}

En el código anterior, mantenemos oculto los enlaces y para conseguir esto, lo que hacemos es darle un valor negativo a la propiedad bottom.

Ahora vamos a ver los estilos correspondiente a los iconos.

.icon_about,
.icon_work,
.icon_help,
.icon_search{
width:64px;
height:64px;
display:block;
left:140px;
top:50px;
position:absolute;
}
.icon_about{
background:transparent url(../images/id_card.png) no-repeat top left;
}
.icon_work{
background:transparent url(../images/globe.png) no-repeat top left;
}
.icon_help{
background:transparent url(../images/help.png) no-repeat top left;
}
.icon_search{
background:transparent url(../images/find.png) no-repeat top left;
}

Los estilos correspondientes a los SPAN del título y descripción, tendrán los siguientes estilos.

ul#menu span.title{
display:block;
height:26px;
text-shadow:1px 1px 1px #000;
color:#B7B7B6;
text-indent:10px;
}
ul#menu span.description{
width:140px;
height:80px;
background-color:#B7B7B6;
border:3px solid #fff;
color:#fff;
display:block;
font-size:24px;
padding:10px;
-moz-box-shadow:1px 1px 6px #000;
-webkit-box-shadow:1px 1px 6px #000;
box-shadow:1px 1px 6px #000;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}

Al pasar el ratón por cada pestaña, además de aparecer toda la pestaña, se producirá un cambio en los colores, por lo que hay que definirlo en la hoja de estilos de la siguiente manera.

ul#menu a:hover span.description{
background-color:#54504F;
}
ul#menu a:hover span.title{
color:#54504F;
}

Por último nos queda el código jQuery que será el que capture los eventos para darle vida al menú.

$(function() {
$('#menu > li').hover(
function () {
var $this = $(this);
$('a',$this).stop(true,true).animate({
'bottom':'-15px'
}, 300);
$('i',$this).stop(true,true).animate({
'top':'-10px'
}, 400);
},
function () {
var $this = $(this);
$('a',$this).stop(true,true).animate({
'bottom':'-95px'
}, 300);
$('i',$this).stop(true,true).animate({
'top':'50px'
}, 400);
}
);
});

El código lo que hace es capturar cuando pasa el ratón por encima de una pestaña, para cambiar sus propiedades para hacerlo visible, y cuando se va el puntero, vuelve a cambiar las propiedades.

Pueden ver un ejemplo en el siguiente enlace.

Vía: tympanus.net