Publicado em 14 de abr.

Site horizontal, só que com urls diferentes para cada link

Falae galera.

Estou desenvolvendo um site horizontal, ou seja, todo o conteúdo vem aberto só que as telas separadas na horizontal.

O fato é, quando eu clicar em um link e rolar o scroll, gostaria de mudar a url sem precisar trocar de página, isso por motivos de SEO.

Alguém sabe como fazer?

Discussão (4)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Thiago Retondar· 14 de abr.

Weverton,

você pode fazer assim:

No menu fica assim:

<ul>
	<li><a href="#home">Home</a></li>
	<li><a href="#sobre">Sobre nós</a></li>
	<li><a href="#contato">Contato</a></li>
</ul>

O tralha - # - é quem faz a mágica.

Então em cada página vai existir uma <div> que engloba tudo, certo? O ID dela tem que ser o mesmo do menu, porém sem o #.

Aqui tem um tutorial que possui um efeito em jQuery.

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif http://www.screencaster.com.br/jquery-smoo...rolls-animados/

Abraços.

----

Edit

----

Fiz um exemplo, porém na vertical, só para entender como funciona.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<div id="home">
<ul>
	<li><a href="#home">Home</a></li>
	<li><a href="#sobre">Sobre nós</a></li>
	<li><a href="#contato">Contato</a></li>
</ul>
<h1>HOME</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

<div id="sobre">
<ul>
	<li><a href="#home">Home</a></li>
	<li><a href="#sobre">Sobre nós</a></li>
	<li><a href="#contato">Contato</a></li>
</ul>
<h1>SOBRE NÓS</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

<div id="contato">
<ul>
	<li><a href="#home">Home</a></li>
	<li><a href="#sobre">Sobre nós</a></li>
	<li><a href="#contato">Contato</a></li>
</ul>
<h1>CONTATO</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</body>
</html>

Weverton N· 14 de abr.

Vlw pela ajuda amigo, mas será que não tem como fazer assim:

www.meusite.com.br/empresa/

www.meusite.com.br/produtos/

www.meusite.com.br/produtos/cortinas/

www.meusite.com.br/contato/

???

Weverton N· 14 de abr.

Seria algo assim:

http://www.alexbuga.com

Thiago Retondar· 14 de abr.

Nesse caso é utilizado uma parte do site com o efeito em jQuery e ao clicar em "Januery 25" é aberto um janela modal - lightbox.

Caso queira fazer a janela modal, tem esse screencast:

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif http://www.screencaster.com.br/criando-jan...cript-e-jquery/

Como eu não sei jQuery a lógica seria basicamente essa:

 [http://forum.imasters.com.br/public/style_emoticons/](http://forum.imasters.com.br/public/style_emoticons/)default/seta.gif ao clicar no **>**, adicionaria mais cinco elementos;

 [http://forum.imasters.com.br/public/style_emoticons/](http://forum.imasters.com.br/public/style_emoticons/)default/seta.gif se clicar em **<**, diminuiria cinco elementos;

 [http://forum.imasters.com.br/public/style_emoticons/](http://forum.imasters.com.br/public/style_emoticons/)default/seta.gif ao cliclar em um elemento, abriria uma janela Lightbox e mostraria o conteúdo.

Abraços.