Box Slide

by kompiajaib

HTML

<div class='kasos' id='kasos'>
    <ul>
        <li>
            <a href='https://www.facebook.com/your FB' target='_blank'><div class="fb"><span class="icon"/><span class='text'>Follow via Facebook</span></div></a>
        </li>
        <li>
            <a href='https://twitter.com/your twitter' target='_blank'><div class="tw"><span class="icon"/><span class='text'>Follow via Twitter</span></div></a>
        </li>
        <li>
            <a href='https://plus.google.com/your G+' target='_blank'><div class="gp"><span class="icon"/><span class='text'>Follow via Google Plus</span></div></a>
        </li>
        <li>
            <a href='https://www.youtube.com/user/your ID' target='_blank'><div class="yt"><span class="icon"/><span class='text'>Follow via Youtube</span></div></a>
        </li>
        <li>
            <a href='http://feeds.feedburner.com/your feed' target='_blank'><div class="rss"><span class="icon"/><span class='text'>Follow via RSS</span></div></a>
        </li>
   </ul>
</div>

CSS

.kasos {
	position:fixed;
	right:-180px;
	top:40px;
	margin:0;
	padding:0;
}
.kasos ul{
	margin:0;
	padding:0;
	list-style:none;
}
.kasos ul li{
	width: 200px;
	margin-bottom:5px;
	display:none;
}
.kasos ul li div{
	display: block;
	line-height:40px;
	width: 200px;
	height: 45px;
	background:#333;
    color:#fff;
    font-size:80%;
    font-weight:700;
    font-family:Arial;
    position:relative;
    transition: background-color .4s ease-out;
    padding-left:30px;
}
.icon{
    position:absolute;
    top:3px;
    left:13px;
}
.text{
    margin-left:38px;
}
.kasos ul li div.fb .icon,.kasos ul li div.tw .icon,.kasos ul li div.gp .icon,.kasos ul li div.yt .icon,.kasos ul li div.rss .icon{
	background: url(http://1.bp.blogspot.com/-zt3csy2DqGo/U661h1iTakI/AAAAAAAAAFc/v5tUjZIJDHs/s1600/mas-icons.png) no-repeat top left;
    margin-right:30px
}
.kasos ul li div.fb .icon{
    background-position:0 10px
}
.kasos ul li div.tw .icon{
    background-position:0 -35px
}
.kasos ul li div.gp .icon{
    background-position:0 -127px
}
.kasos ul li div.yt .icon{
    background-position:0 -226px
}
.kasos ul li div.rss .icon{
    background-position:0 -80px
}

.kasos ul li div.fb:hover{
	background:#3B5998;
}
.kasos ul li div.tw:hover{
	background:#62BDB2;
}
.kasos ul li div.gp:hover{
	background:#DB4A39;
}
.kasos ul li div.yt:hover{
	background:#C4302B;
}
.kasos ul li div.rss:hover{
	background:#FF8B0F;
}

JavaScript

$(function() {
				var $list 		= $('#kasos ul');
				var elems_cnt 		= $list.children().length;
				load(200);		
				function load(initial){				$list.find('li').hide().andSelf().find('div').css('margin-left',-initial+'px');
					var loaded	= 0;
					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;
					}
					var d = 200;
					$list.find('li:visible div').each(function(){
						$(this).stop().animate({
							'marginLeft':'-25px'
						},d += 100);
					});
				}	$list.find('li:visible').live('mouseenter',function () {
					$(this).find('div').stop().animate({
						'marginLeft':'-190px'
					},500, 'easeOutBounce');
				}).live('mouseleave',function () {
					$(this).find('div').stop().animate({
						'marginLeft':'-25px'
					},500, 'easeOutBounce');
				});
            });