Artículo

---

1 ¡votar!

Menú lateral para mostrar enlaces a otras noticias de forma elegante

La idea es mostrar una lista fija al lado derecha de la pantalla con una miniatura. Cuando pasemos el ratón sobre estas miniaturas, la imagen se desplazará mostrando el título y dos enlaces, uno para ir al artículo y otro para ir a la demostración.

Lo primero que hacemos es crear toda la estructura HTML. Para ello utilizaremos listas. Veamos como quedaría esta estructura. Solo ponemos la de una miniatura. El resto serían iguales.

<div id="rp_list" class="rp_list">
<ul>
<li>
<div>
<img src="images/1.jpg" alt=""/>
<span class="rp_title">Post Title</span>
<span class="rp_links">
<a target="_blank" href="#">Article</a>
<a target="_blank" href="#">Demo</a>
</span>
</div>
</li>
...
</ul>
<span id="rp_shuffle" class="rp_shuffle"></span>
</div>

En los tag “a”, debemos de poner los enlaces hacia donde queremos que enlace al pulsar.

Vamos a pasar ahora a ver el tema de la hoja de estilo. Empezamos con los atributos generales de la lista.

.rp_list {
font-family:Verdana, Helvetica, sans-serif;
position:fixed;
right:-220px;
top:40px;
margin:0;
padding:0;
}

Como podemos ver, la lista tendrá una posición fija. A la propiedad derecha le damos valor negativo para que oculte las opciones de la lista y solo muestre la miniatura.

Lo siguiente que hacemos es darle los estilos a la etiqueta “span” que tiene el id “rp_shuffle”.

span.rp_shuffle{
background:#222 url(../images/shuffle.png) no-repeat 10px 50%;
width:28px;
height:14px;
display:block;
margin:10px 0px 0px 20px;
cursor:pointer;
padding:4px;
border:1px solid #000;
-moz-border-radius:5px 0px 0px 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}

La lista tendrá los siguientes estilos:

.rp_list ul{
margin:0;
padding:0;
list-style:none;
}

Los elementos de la lista no serán mostrados inicialmente:

.rp_list ul li{
width: 240px;
margin-bottom:5px;
display:none;
}

Los estilos de los elementos principales serán los siguientes:

.rp_list ul li div{
display: block;
line-height:15px;
width: 240px;
height: 80px;
background:#333;
border:1px solid #000;
-moz-border-radius:5px 0px 0px 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}

Las miniaturas tendrán un tamaño de 70 x 70 pixel y le añadiremos una sombra a la caja:

.rp_list ul li div img{
width:70px;
border:none;
float:left;
margin:4px 10px 0px 4px;
border:1px solid #111;
-moz-box-shadow:1px 1px 3px #000;
-webkit-box-shadow:1px 1px 3px #000;
box-shadow:1px 1px 3px #000;
}

El estilo para la clase rp_title es el siguiente:

span.rp_title{
font-size:11px;
color:#ddd;
height:46px;
margin:4px 0px 0px 20px;
display:block;
text-shadow:1px 1px 1px #000;
padding-top:3px;
background:#222;
-moz-box-shadow:0px 0px 5px #000 inset;
-webkit-box-shadow:0px 0px 5px #000 inset;
box-shadow:0px 0px 5px #000 inset;
}

El siguiente código corresponde al estilo de los links y los botones:

span.rp_links{
width:195px;
height:8px;
padding-top:2px;
display:block;
margin-left:42px;
}
span.rp_links a{
background: #222 url(../images/bgbutton.png) repeat-x;
padding: 2px 18px;
font-size:10px;
color: #fff;
text-decoration: none;
line-height: 1;
-moz-box-shadow: 0 1px 3px #000;
-webkit-box-shadow: 0 1px 3px #000;
box-shadow:0 1px 3px #000;
text-shadow: 0 -1px 1px #222;
cursor: pointer;
outline:none;
}
span.rp_links a:hover{
background-color:#000;
color:#fff;
}

Con esto terminamos el tema de los estilos, y nos ponemos ahora con el código JavaScript que le dará funcionalidad a nuestro menú latera.

La idea del código es que los elementos del menú solo muestren las miniaturas, y que al pasar por ellos, se desplacen mostrando completamente el elemento, junto con los enlaces y el botón.

Las función de shuffle, nos mostrará de forma aleatoria los post.

El código jQuery correspondiente es el siguiente:

$(function() {
/**
* the list of posts
*/
var $list 		= $('#rp_list ul');
/**
* number of related posts
*/
var elems_cnt 		= $list.children().length;
/**
* show the first set of posts.
* 200 is the initial left margin for the list elements
*/
load(200);
function load(initial){
$list.find('li').hide().andSelf().find('div').css('margin-left',-initial+'px');
var loaded	= 0;
//show 5 random posts from all the ones in the list.
//Make sure not to repeat
while(loaded < 5){
var r 		= Math.floor(Math.random()*elems_cnt);
var $elem	= $list.find('li:nth-child('+ (r+1) +')');
if($elem.is(':visible'))
continue;
else
$elem.show();
++loaded;
}
//animate them
var d = 200;
$list.find('li:visible div').each(function(){
$(this).stop().animate({
'marginLeft':'-50px'
},d += 100);
});
}
/**
* hovering over the list elements makes them slide out
*/
$list.find('li:visible').live('mouseenter',function () {
$(this).find('div').stop().animate({
'marginLeft':'-220px'
},200);
}).live('mouseleave',function () {
$(this).find('div').stop().animate({
'marginLeft':'-50px'
},200);
});
/**
* when clicking the shuffle button,
* show 5 random posts
*/
$('#rp_shuffle').unbind('click')
.bind('click',shuffle)
.stop()
.animate({'margin-left':'-18px'},700);
function shuffle(){
$list.find('li:visible div').stop().animate({
'marginLeft':'60px'
},200,function(){
load(-60);
});
}
});

Vía: Tympanus.net
Demo

Publicado por: angel carrero

Recomendar a un amigo

Compartir en redes

Email  

Comentarios