Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

gremio10

[Resolvido] Slide da direita para a esquerda

Recommended Posts

Fala galera, olha só, quero fazer um slide tipo a desse site: Clique aqui nele, quando se clica em alguma opção, ele abre um slide da direita para a esquerda, pediria a ajuda de vocês para me ajudarem :D não estou pedindo código pronto, procurei na net, mas não encontrei o nome certo...

 

Obrigado,

Compartilhar este post


Link para o post
Compartilhar em outros sites

não conheço pronto.

 

mas é bem simples desenvolver.

comece fazendo html + css necessario.

tanto aberto qnto fechado. dai então aplique js.

Compartilhar este post


Link para o post
Compartilhar em outros sites

mas tipo, eu teria de utilizar que função do jquery ? por que, tipo, eu tenho no meu html:

 

<div id="slide">
aqui teste
</div>

#slide{ display:none; position:absolute; right:0}

Compartilhar este post


Link para o post
Compartilhar em outros sites

o jquery mesmo só faz um .show() e .hide() nos outros.

só isso.

 

todo o efeito que você vê ali, é posicionamento com css.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Consegui adaptando este código:

 

<style>
	ul { list-style:outside circle; padding-left:20px; }
	li { cursor: pointer; }
	#bullet { color:#0c0; position:absolute; top:200px; right:0; border:1px solid #000; }
</style>

<ul>
 <li>Click</li>
 <li>Here</li>
 <li>And</li>
 <li>Watch</li>
 <li>The</li>
 <li>Magic</li>
 <li>Happen</li>
</ul>
<div id="bullet">TEste</div>

<script type="text/javascript">
$('li').bind('click', function(e) {
	$("#bullet").css("display", "block" );
	$('#bullet').animate({ right:0, width:350},1000);
});
</script>

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.