Como que se faz esse tipo de efeito???
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
Curtidas 0
Respostas
Bruno Xavier
05/07/2011
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/
GOSTEI 0
Eduardo Oliveira
05/07/2011
Valeu pela ajuda, vou dar uma estudada, consegui algo parecido usando um Menu Arcoddion feito em JQUERY....Muito ObrigADO
GOSTEI 0