Blog do Adriano Meira - Uma ajudinha para desenvolvedores e web designers. Uma ajudinha para desenvolvedores e web designers.

Navegação desilizante com jQuery – Navegação com Ancora

Olá Pessoal depois de algum tempo estamos de volta e em breve irei trazer mais novidades aproveitando as férias, bom vamos ao trabalho né.

Neste fim de semestre auxiliei um amigo meu a fazer seu trabalho de TCC (Trabalho de conclusão de curso) que era um site onde ele propôs uma navegação não muito convencional, onde cada link escorregaria para o conteúdo tanto na horizontal como na vertical. Até aqui procuramos alguns plugins que ajudaram mas não eram de fácil aplicação e instalação como este jQuery ScrollTo resolvi fazer algo mais simples que resolveria o problema, veja ai como ficou e logo abaixo o que eu fiz.

A primeira coisa foi definir o tamanho do site bem como o que teria dentro dele, veja no esquema abaixo como isso isso funcionou

Observe que o body vai variar de acordo com o seu monitor mas o que vamos estudar aqui é a rolagem do .site-palcoGeral e como ele vai ser visto dentro do .conteudo-geral ai você pode esconder  ou não as “laterais”, veja o CSS do esquema acima.

 

body{ margin:0px; padding:0px;width:100%; height:100%; overflow:hidden; border:1px solid #339900; }
.conteudo-geral{
	width:980px;
	height:600px;
	/*overflow:hidden;*/
	margin:auto;
	position:relative;
	border:1px solid #FF0000;
}
.site-palcoGeral{
	position:absolute;
	top:-2716px;
	left:-2374px;
	border:1px solid #FF0;
	width:6060px;
	height:3400px;
	border:1px solid #F0F0F0;
}
.site-palco{
	width:6060px;
	height:3100px;
	position:relative;
}
.site-geral{
	width:900px;
	height:520px;
	padding:40px;
	position:absolute;
	left:0px;
	top:0px;
	z-index:1;
	border:1px solid #000000;
}
.site-home{left:2374px;top:2716px;}
.site-001{left:3344px; top:2716px;}
.site-002{left:2374px; top:1748px;}
.site-003{left:2373px;top:932px;}

/* Menu */
.conteudo-menu{
    position: absolute;
	left:0px;
	top:0px;
	z-index:10;
	padding:10px;
}
.conteudo-menu{
	position:relative;
}

E agora veja o HTML

<div class="site-palcoGeral">
    <div class="site-palco">
        <div class="site-geral site-home"><a name="item1" id="item1"></a>Home</div>
        <div class="site-geral site-001"><a name="item2" id="item2"></a>001</div>
        <div class="site-geral site-002"><a name="item3" id="item3"></a>002</div>
        <div class="site-geral site-003"><a name="item4" id="item4"></a>003</div>
    </div>
</div>

<div class="data-menu">
    <div class="conteudo-menu">
        <a href="#" class="linkHome">Home</a>
        <a href="#" class="link001">Link 001</a>
        <a href="#" class="link001">Link 002</a>
        <a href="#" class="link002">Link 003</a>
    </div>
</div>

Aqui o menu fica por fora para que você possa ver como funciona e por fim o jQuery, não se esqueça de chamar a biblioteca, aqui está referenciando da biblioteca do google

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
    	$(function(){
			$('.linkHome').click(function(){
				$('.site-palcoGeral').animate({top:'-2716px', left:'-2374px'});
				return false;
			});

			$('.link001').click(function(){
				$('.site-palcoGeral').animate({top:'-2716px', left:'-3344px'});
				return false;
			});

			$('.link002').click(function(){
				$('.site-palcoGeral').animate({top:'-1748px', left:'-2374px'});
				return false;
			});

			$('.link003').click(function(){
				$('.site-palcoGeral').animate({top:'-932px', left:'-2373px'});
				return false;
			});
		});

    </script>

Veja como funciona, ao clicar no item do menu, aqui chamado pela classe que ele representa eu uso o Animate que muda a posição do “.site-palcoGeral”  para encaixar o conteúdo em seus respetivos pontos, veja no desenho abaixo a representação.


Bom é isso aí qualquer dúvida poste ai, es e quiser sugerir acesse o link aqui e poste alguma duvida que tenha e na medida que eu puder responder postarei aqui no blog, até mais!

 




Adriano Meira é o criador do blog, trabalha desde 2012 como Webdesigner e hoje formado em design gráfico trabalho para a Brasil na Web e como free-lancer nas áreas de Design para Web (Webdesigner), Design Gráfico, Impressos e criação de marcas.

Comente este artigo você também!

Comentários (9)

  • Leandro disse:

    Muito bom! Você pode explicar um pouco melhor como aplicar esse efeito em um site?

    É possivel mexer somente DIVS e deixar o background estatico?

  • Adriano Meira disse:

    Olá Leandro

    Fico feliz que tenha gostado, sobre colocar o fundo fixo é possível sim, basta colocar no CSS body{} como a imagem e no .conteudo-geral{} não colocar nada.

  • Alex disse:

    Exemplo simples e direto, muito bom!

  • Claudio disse:

    Oi Adriano, muito legal o seu exemplo – funcionou bem aqui. Agora, tenho uma dúvida, você teria alguma dica para quem deseja acrescentar mais páginas? Por exemplo, qual seria a melhor maneira de calcular as distâncias e as dimensões entre css e javascript? abraços!

  • Adriano Meira disse:

    Olá Cláudio, para podermos calcular de forma dinâmica temos que fazer com que o site seja em uma única direção, por exemplo ao clicar nos links ele ande somente para o lado ou para cima. Assim podemos colocar uma função chamada “each()” do jquery para pegar o loop do menu e acrescentar um valor fixo para cada clique que leva ao conteúdo. Por exemplo:

    var larguraCotneudoGeral = 980;
    $(".menu a").each(function(){
    var paraOndeIR = larguraCotneudoGeral+980;
    $(this).attr('rel',paraOndeIR)
    });

    Com isso quando em cada elemento do menu no atributo REL o valor do próximo elemento, logo recupero este valor para mandar o conteúdo para lá.

    $('.menu a').click(function(){
    var paraLA = $(this).attr('rel')
    $('.site-palcoGeral').animate({top:paraLA});
    return false;
    });

  • Edson disse:

    Adriano,

    bom dia.
    Pesquisando na internet eu achei seu blog, acredito que possa me ajudar com o que preciso, parecido com o que você fez, estou fazendo um site com webacappella e estou usando ancoras, queria que as ancoras fossem suave de um ponto ou outro, que plugin preciso?
    Por favor, pode me ajudar?

    Att.
    Edson

  • Adriano Meira disse:

    Olá Edson

    Você pode adicionar a biblioteca ease do jQeury (http://gsgd.co.uk/sandbox/jquery/easing/) com ela vocÊ tem vários efeitos de suavização ou aceleração, neste link http://easings.net/pt-br fica mais claro como é o comportamento de cada uma, ai basta usar na função animate passando o parâmetro de cada uma das opções de animação.

    Até mais!

  • Dener disse:

    E como centralizo o menu?
    Abraço

  • Adriano Meira disse:

    Olá Dener

    Para centralizar um menu depende da sua estrutura de HTML e do seu CSS a forma mais simples é que os elementos estejam com display:inline-block.

    Até mais!

Publicidade e outros

Marcadores de Página Magnético

 

Leia e Liberte pelo BookCrossing.com ...