Como que se faz esse tipo de efeito???
05/07/2011
0
Olá amigos Boa Tarde, estou desevolvendo um sistema parecido com os da imagens q vou mandar, gostaria de saber como faço para dar os efeitos q estão na foto a um menu, si é esse nome q ele leva, funciona da seguinte maneira eu clico em cima dele ai ele expandi pra baixo os links das materias quando eu clico nos links das materias, ele expandi novamente me trazendo mais informaçoes, e quando volto a clicar em cima este volta a se fexar....gostaria de saber como pode ser feito isso, ou se existe pronto pra implementa....muito obrigado!!!!
Eduardo Oliveira
Curtir tópico
+ 0
Responder
Posts
14/07/2011
Bruno Xavier
a maneira mais facil é utilizando o efeito SlideToggle do Jquery. Fiz um exemplo rápido:
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#divslide').click(function(){
$('#conteudo').slideToggle('slow');
})
})
</script>
</head>
<body>
<div id="divslide" style="width: 400px;background:orange;border:1px solid #666;cursor:pointer">
Título
</div>
<div id="conteudo" style="display: none;">
<table>
<tr>
<td>Campo 1:<input type="text" id="campo1" name="campo1" /></td>
</tr>
<tr>
<td>Campo 2:<input type="text" id="campo2" name="campo2" /></td>
</tr>
<tr>
<td>Campo 3:<input type="text" id="campo3" name="campo3" /></td>
</tr>
</table>
</div>
</body>
</html>
Para entender melhor dê uma olhada na documentação oficial: http://api.jquery.com/slideToggle/
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#divslide').click(function(){
$('#conteudo').slideToggle('slow');
})
})
</script>
</head>
<body>
<div id="divslide" style="width: 400px;background:orange;border:1px solid #666;cursor:pointer">
Título
</div>
<div id="conteudo" style="display: none;">
<table>
<tr>
<td>Campo 1:<input type="text" id="campo1" name="campo1" /></td>
</tr>
<tr>
<td>Campo 2:<input type="text" id="campo2" name="campo2" /></td>
</tr>
<tr>
<td>Campo 3:<input type="text" id="campo3" name="campo3" /></td>
</tr>
</table>
</div>
</body>
</html>
Para entender melhor dê uma olhada na documentação oficial: http://api.jquery.com/slideToggle/
Responder
15/07/2011
Eduardo Oliveira
Valeu pela ajuda, vou dar uma estudada, consegui algo parecido usando um Menu Arcoddion feito em JQUERY....Muito ObrigADO
Responder
Clique aqui para fazer login e interagir na Comunidade :)
