3

Estou fazendo este site mas não consigo fazer duas coisas:

  1. o menu tem que se mover para os conteúdos conforme eu clico nas opções

  2. quando a página carregar tem que aparecer centralizado juntamente com o menu onde tem o Instagram.

Procurei vários métodos na net de fazer o menu se mover e percebi que o jeito de fazer isso é por coordenadas x e y só que não achei nenhum exemplo de como fazer.

Já a parte do load eu não achei um código que fizesse tal coisa.

4
  • Não tem nada a ver com a pergunta mas: No post-it que está a música barulho na cama está escrito barAlho na cama* na parte de baixo. Depois q ver eu excluo o comentário.
    – Caputo
    Commented 22/05/2014 às 1:09
  • Achei a pergunta muito interessante, principalmente pelo mecanismo de interação que você está bolando para o site. Uma curiosidade: por acaso o seu projeto considera que grande parte do público utilizará dispositivos móveis com interação por toque (touchscreen)? Pergunto isso porque sob um ponto de vista de usabilidade creio que faltam indicações visuais da continuidade do espaço e, estritamente sob o ponto de vista do ambiente desktop, o "clicar e arrastar" pareceu cansativo. Talvez isso até seja um gancho para uma ou duas outras perguntas... Eu acho que faltam perguntas de UX por aqui. :) Commented 22/05/2014 às 13:54
  • Luiz, o site não foi feito para celular realmente, somenta para desktop, o conceito de arrastar é somente uma opção secundária por quando o site estiver completo ele carregará diretamente no conteúdo central com o menu em cima. E a idéia é que a pessoa veja que tem mais coisas para o lado e clique no menu para vê-las. Se pudesse mudaria algumas coisas mas sabe como é cliente né hehehe
    – user4451
    Commented 22/05/2014 às 18:40
  • 1
    Sim, eu havia entendido essa dinâmica da própria pergunta. Ainda assim, sugiro que você faça umas avaliações com potenciais usuários pra coletar feedback. Dependendo do que ELES falarem, acho que o seu cliente é capaz de ouvir. Commented 22/05/2014 às 19:09

2 Respostas 2

4

Da pra fazer tanto usando JavaScript Puro quanto jQuery pelo que eu vi em seu projeto você já esta utilizando jQuery então montei um exemplo pra você utilizando jQuery pois o código fica mais simples.

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();
    })
})

Link do exemplo no jsfiddle


Tomei a liberdade de olhar o código do seu site e vi que a DIV que recebe o conteúdo é a #ib-main-wrapper seguindo o exemplo que estou postando você terá que substituir o $("body") da animação pela sua div que recebe o conteudo $("#ib-main-wrapper")

Créditos a edição do @LuizVieira pela colaboração na solução.

3
  • @LuizVieira Vamos lá está quase certo agora, eu fui até o main.js e limpei tudo o que não precisava estar ali. Agora o menu se move só acho que não me expressei direito, pois, quando ele se mover ele tem uma direção específica que seria em cima por exemplo de teste e assim também é com os outros. Quanto ao processo de load da página quando carregar pela primeira vez ele tem que carregar por ex: no elemento teste juntamente com o menu em cima dele. Aqui está o link da página atualizada progdesenv.com.br/edermiguel/teste.html
    – user4451
    Commented 23/05/2014 às 21:16
  • @LuizVieira "2) nos links dos itens do menu mantenha apenas o identificador da âncora (sem o endereço completo do seu site). Por exemplo: <li><a href="#contato" class="menu">contato</a></li>" Quanto a essa parte eu verifiquei e não tem nenhum link somente as ancoras
    – user4451
    Commented 23/05/2014 às 21:18
  • @user4451 Colocar o menu sobre o elemento é questão apenas de não usar os valores de scrollTop e scrollLeft, e sim as coordenadas x e y do próprio elemento (que você já tem!). Se você descontar alguns pixels de y, o menu ficará acima do elemento. Commented 23/05/2014 às 21:56
-2

Eu entendi que você precisa que ao clicar em um link do menu, seja direcionado para a div em um efeito de animação horizontal ou vertical. Se for isso, você pode usar este exemplo e modificar a animação para a div do menu. Link do exemplo

1
  • 2
    Acredito que sua resposta não ajuda muito a solução do problema do autor da pergunta, para ter uma ideia de como responder pelo fato de você ser novo no stackoverflow use essa resposta como exemplo Commented 22/05/2014 às 12:30

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .