Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Oi, tudo bem! Bom, Eu consegui fazer um exemplo bem próximo ao que quero, depois de muito procurar e fazer testes.
Funciona da seguinte forma: Clico no link e logo em seguida carrega a página utilizando o método/função "onload", depois aplica um efeito e altera a url da página em questão. Link do exemplo: http://decizie.esy.e.../jquery-onload/.
Segue o código: da index.php
<!doctype html>
<head>
<title>Exemplo de Jquery Onload</title>
<style type="text/css"></style>
<script type='text/javascript' src='jquery-1.9.0.min.js'></script>
<script type="text/javascript">
$(document).ready(function(){
$("#menu a").on('click', function(e) {
e.preventDefault();
var href = $(this).attr('href');
$("#conteudocentral").hide("slow").load( href +" #conteudocentral").show('slow');
// HISTORY.PUSHSTATE
history.pushState('', 'New URL: '+href, href);
e.preventDefault();
});
});
</script>
</head>
<body>
<nav id="menu">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="sobre.php">Sobre</a></li>
<li><a href="contatos.php">Contatos</a></li>
</ul>
</nav>
<div id="conteudocentral">
<h1>Home</h1>
<p>Esta é a página Inicial!</p>
</div>
</body>
</html>1. Gostaria de quando alterar o histórico do navegador e a página alterasse também. Vi algo com o método/função "onpopState", "replaceState", algo com o "history", ou até com o plugin "history.js", mas ainda estou tentando implementar.
2. Sobre o efeito igual o do Site "skitter-slider.net", eu não sei se poderá ser feito, ou seja, o efeito de apresentar a página de acordo com a sequência que quando clica no menu na ordem da esquerda para a direita, a página é carregada da direita para a esquerda e se você voltar ou seja clica da vindo da direita para a esquerda a página é carregada da esquerda para a direita.
Se alguém souber como eu procedo para colocar um efeito da página/conteúdo vindo da direita para a esquerda, seria legal!
3. O conteúdo das outras páginas, no caso do exemplo, a "sobre.php" e "contato.php" eu tenho que colocar de novo a "div" com o "id - conteudocentral" pra poder pegar corretamente, e nos exemplos que vi na net precisaria colocar a div com o id no caso do exemplo "conteudocentral" apenas uma vez na "index.php".
Muito obrigado pela ajuda de todos que compartilharam o conhecimento e me ajudaram e espero contar ainda!
Foi desse site que consegui retirar a função de alterar a url e ele também tem a de history, porém não entendi direito como posso implementa-la no meu código!
Site: http://html5.gingerhost.com
Obrigado!
Carregando comentários...