I'm doing this site but I can not do two things:
The menu has to move to the contents as I click the options
When the page load has to appear centralized along with the menu where Instagram has.
I tried several methods on the net to make the menu move and I realized that the way to do this is by x and y coordinates, but I did not find any examples of how to do it.
You can do as much using pure JavaScript as jQuery from what I saw in your project you are already using jQuery so I set up an example for you using jQuery as the code becomes simpler.
HTML
<div id="menu" class='source'>
<ul>
<li><a href="#contato" class='menu'>contato</a></li>
<li><a href="#quemsomos" class='menu'>quemsomos</a></li>
<li><a href="#redessociais" class='menu'>redessociais</a></li>
<li><a href="#teste" class='menu'>Teste</a></li>
</ul>
</div>
<div id="contato" class='source'><h2>contato</h2></div>
<div id="quemsomos" class='source'><h2>quemsomos</h2></div>
<div id="redessociais" class='source'><h2>redessociais<h2></div>
<div id="teste" class='source'><h2>Teste<h2></div>
CSS
.source{
position:absolute;
width:150px;
height:150px;
}
#contato{
left:50px;
top:300px;
background:#f00;
}
#quemsomos{
left:1500px;
top:500px;
background:#0f0;
}
#redessociais{
left:600px;
top:2000px;
background:#00f;
}
#teste{
left:500px;
top:700px;
background:#cccccc;
}
JavaScript
$(document).ready(function(){
$(".menu").on("click",function(e){
// Pega as dimensões da janela
var W = $(window).width();
var H = $(window).height();
// Pega as coordenadas e dimensões do elemento
var elem = $($(this).attr("href"));
var x = elem.position().left;
var y = elem.position().top;
var h = elem.height();
var w = elem.width();
// Calcula as coordenadas que a tela tem que ser rolada para centralizar o elemento
x -= W/2 - w/2;
y -= H/2 - h/2;
$("body").animate({scrollTop:y,scrollLeft:x},400,"swing",function() {
var x = $("body").scrollLeft();
var y = $("body").scrollTop();
$("#menu").css({top:y,left:x});
});
e.preventDefault();
})
})
I took the liberty of looking at the code on your site and I saw that DIV that receives content is #ib-main-wrapper following the example I'm posting you will have to replace the $("body") of the animation with your div that receives the content $("#ib-main-wrapper")
Credits editing @LuizVieira for collaboration on the solution.
I understand that you need to click on a link in the menu to be directed to the div in a horizontal or vertical animation effect. If so, you can use this example and modify the animation for the menu div. Example Link