Link menu for horizontal scrolling(added slide functionality)
HTML
<div id="links"><a id="0" href="javascript:void(0)">home </a> <a id="1" href="javascript:void(0)">about </a> <a id="2" href="javascript:void(0)">contact </a> <a id="3" href="javascript:void(0)">projects </a></div>
<div class="color 1" style="background-color:red;"></div>
<div class="color 2" style="background-color:blue;"></div>
<div class="color 3" style="background-color:green;"></div>
<div class="color 4" style="background-color:orange;"></div>
CSS
html{
width:100%;
height:100%;
overflow-x:hidden;
}
body{
width:100%;
height:100%;
overflow-x:hidden;
}
#links{
position:fixed;
bottom:30px;
right:30px;
z-index:100;
}
#links a{
color:white;
}
#parent{
height: 100%;
overflow: auto;
}
.color{
display:inline-block;
height:100%;
}
JavaScript
var total=$(window).width()*4;
$('.color').css({'width':''+$(window).width()+''});
$('.1').css({'position':'absolute','left':'0px'});
$('.2').css({'position':'absolute','left':''+$(window).width()+'px'});
$('.3').css({'position':'absolute','left':''+$(window).width()*2+'px'});
$('.4').css({'position':'absolute','left':''+$(window).width()*3+'px'});
$('a').click(function(){
var num=$(this).attr('id');
$('html').animate({'scrollLeft':''+$(window).width()*num+''});//For mozilla
$('body').animate({'scrollLeft':''+$(window).width()*num+''});//For other browsers
});
var downX;
$('body').mousedown(function(event){
downX=event.clientX;
});
$('body').mouseup(function(event){
var s=$('html').scrollLeft();
var p=$('body').scrollLeft();
var upX=event.clientX;
var diff=downX-upX;
if(diff<0)
{
$('html').animate({'scrollLeft':''+s-$(window).width()+''});//For mozilla
$('body').animate({'scrollLeft':''+p-$(window).width()+''});//For other browsers
}
if(diff>0)
{
var g=s+$(window).width();
var k=p+$(window).width();
$('html').animate({'scrollLeft':''+g+''});//For mozilla
$('body').animate({'scrollLeft':''+k+''});//For other browsers
}
});