Silici0 :: Blog

Show/Hide (Abrir/Fechar) do JQuery para Menus

Junho 13, 2007 on 11:15 am | In Informatica, Trabalho, php, JavaScript, JQuery |

Vou screver esse tutorial com base no MORE Showing, MORE hiding, do site Learning JQuery, no qual é recomendadissimo a leitura para quem entende de inglês e quer aprender mais sobre Jquery, site cheio de dicas e tutoriais...

Se você está perdido aqui e nunca viu nada sobre Jquery, você pode começar com o tutorial original Traduzido.

Para os elementos do Abrir e Fechar do Menu vamos usar somente HTML e complementos de CSS para ficar 'bonito'.

PLAIN TEXT

HTML:

<div class="try">
<h3>Musicas</h3>
<div>
<span class="interno">Offscpring </span>
<span class="interno">Insonic </span>
<span class="interno">Killer Buds </span>
<span class="interno">DJ SKILLO </span>
<span class="interno">DJ PASSA MAL </span>
<span class="interno">DJ silici0 </span></div>
<h3>Videos</h3>
<div>
<span class="interno">Malabares </span>
<span class="interno">Clips</span>
<span class="interno">Musica</span>
<span class="interno">Filmes</span></div>
<h3>XXX</h3>
<div>
<span class="interno">Blonde</span>
<span class="interno">Branca</span>
<span class="interno">Verde</span>
<span class="interno">Amarelo</span></div>
</div>

Vamos ao CSS para melhorar o visual:

PLAIN TEXT

CSS:

body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.try{
font-style:normal;
font-family:Arial;
font-size:14px;
padding-left:20px;
}
.try h3 {
margin: 0;
padding: .25em;
background: #99FFCC;
border-top: 1px solid #999966;
border-bottom: 1px solid #999966;
}
.interno{
margin: 0;
padding: .25em;
padding-left:15px;
}

Essa opção permite que cada sessão possa ser aberta e fechada independente de outras. Esse é o modo mais fácil de fazer o menu de árvore.

O método que iremos usar é .slidetoggle(), é um elemento que escorrega para baixo o menu quando for abrir e escorrega para cima quando for fechar.

Primeiramente vamos esconder todos itens do sub-menu e também vamos conectar cada click para cada h3.

PLAIN TEXT

JAVASCRIPT:

$(document).ready(function() {
$('div.try:eq(0)> div').hide();
$('div.try:eq(0)> h3').click(function() {
});
});

Usamos :eq() que é um seletor que passa por todos DIV e H3, dando HIDE e então criando opção do click.

Então colocaremos o método .slidetoggle() dentro do método click. Como sabemos que cada DIV que queremos mudar a opção para Mostrar/Esconder é a próxima tag de cada H3, podemos usar o metodo .next():

PLAIN TEXT

JAVASCRIPT:

$(document).ready(function() {
$('div.try:eq(0)> div').hide();
$('div.try:eq(0)> h3').click(function() {
$(this).next().slideToggle('fast');
});
});

Nesta ultima linha que adicionamos nos dizemos que para o H3 clicado nos referimos o metodo .slidetoggle() para a próxima TAG.

Supersimples não é mesmo? Você pode ver o código de outros modos nesse exemple que eu fiz: Exemplo. Dúvidas? Sugestões? So comentar... abraços

9 Comments »

RSS feed for comments on this post. TrackBack URI

Cara ficou legal essa parada heim... hehehe...

Comment by Aguinelo Pedroso — Junho 13, 2007 #
Poxa, da para fazer umas coisas muito legais com essa idéia básica... é a falta de tempo para melhorias do design e idéias..

Falta tempo até para arrumar a data aqui do comentário. hehehe

Abraços

Comment by silici0 — Junho 13, 2007 #
e se além disso, eu quisesse fechar a div que estava aberta quando o usuario clicase em outra div.

Exemplo:

'Videos' jah aparece aberto.. ao clicar em Musicas, fecha 'Videos' e abre 'Musicas'.

Como ficaria isso?
se puder me ajudar.. muito obrigado.

=)

Comment by adcortes — Setembro 17, 2007 #
Eu não entendi, visto que respondi o email, fico no aguardo de novidades.

Abraços

Comment by silici0 — Setembro 18, 2007 #
Como ficaria para que no primeiro exemplo ali
Ao invés de deixar um aberto de inicio, deixar todos fechados, como no segundo exemplo.

Abraço.

Comment by Carlo — Maio 6, 2008 #
Eu não entendi !!!

Comment by silici0 — Maio 6, 2008 #
Troquei a ordem, desculpe.

Veja o exemplo:
http://rafaelcunha.com/testes/hideshow/hideshow.php

No segundo exemplo ali.

Já tem o menu: Músicas aberto
Como que faz para deixar ele fechado de inicio e não aberto?

Entende? Abraços.

Comment by Carlo — Maio 6, 2008 #
$('div.try:eq(0)> div').hide();

Abraços

Comment by silici0 — Maio 6, 2008 #
[...] http://www.rafaelcunha.com/2007/06/13/showhide-abrirfechar-do-jquery-para-menus/ [...]

Pingback by Jquery - Funções show() e hide() « Neyvo — Julho 11, 2008 #