Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17720
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Menu com submenus usando jQuery

05-01-2009 20:11

Ai está um script de menu com submenus usando jQuery. Ao clicar em um dos links ele esconde a div atual e mostra a div referente ao link clicado.

* Necessário a blibioteca jQuery, além do DOCTYPE na página que estiver o script.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script src="jquery.js" language="JavaScript"></script> <script type="text/javascript"> function menus(oid) { ref = oid; for(i=1; i < 4; i++) { if(document.getElementById("div"+i).style.display=='block') { $('#div'+i).slideToggle('slow'); } } setTimeout("$('#'+ref).slideToggle()", 500); } </script> </head> <body> <a href="#" onclick="javascript:menus('div1'); ">div1</a> <a href="#" onclick="javascript:menus('div2'); ">div2</a> <a href="#" onclick="javascript:menus('div3'); ">div3</a> <div id="div1" style="display:none; background-color:blue; width:100px; height:100px;"><font color=white>DIV 1</font></div> <div id="div2" style="display:none; background-color:red; width:100px; height:100px;"><font color=white>DIV 2</font></div> <div id="div3" style="display:none; background-color:green; width:100px; height:100px;"><font color=white>DIV 3</font></div> </body> </html>

0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Mensagens: 348
Sexo: Masculino
Localização: Paraná/São Mateus do Sul/Brasil
Contato:

Menu com submenus usando jQuery

24-01-2009 17:17

como fazer este efeito, só que ao clicar novamente esconder a div, com o toggle ela sempre fica visivel!
Obrigado
0
Está precisando de um Website?
Acesse ww.listasms.com/web e faça um orçamento sem compromisso!
Ígor
 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17720
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Menu com submenus usando jQuery

24-01-2009 17:24

O objetivo desse script, é mostrar uma div, ao clicar, esconde a div atual e mostra a nova. Qual efeito esse efeito que está procurando é para uma div só?
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Mensagens: 348
Sexo: Masculino
Localização: Paraná/São Mateus do Sul/Brasil
Contato:

Menu com submenus usando jQuery

24-01-2009 17:34

Não!
ele vai ter mais de uma div
0
Está precisando de um Website?
Acesse ww.listasms.com/web e faça um orçamento sem compromisso!
Ígor
 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17720
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Menu com submenus usando jQuery

24-01-2009 20:26

Veja esse exemplo, usei slideDown e slideUp

JavaScript
$(function() { $(".div").click(function() { var ident = $(this).attr("id"); $("#_"+ident).css("display")=="none" ? $("#_"+ident).slideDown("slow") : $("#_"+ident).slideUp("slow"); }); });

HTML

<a href="#" class="div" id="div1">div1</a> <a href="#" class="div" id="div2">div2</a> <div id="_div1" style="display:none; background-color:blue; width:100px; height:100px;"> <font color=white>DIV 1</font> </div> <div id="_div2" style="display:none; background-color:blue; width:100px; height:100px;"> <font color=white>DIV 2</font> </div>

0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Mensagens: 348
Sexo: Masculino
Localização: Paraná/São Mateus do Sul/Brasil
Contato:

Menu com submenus usando jQuery

25-01-2009 00:58

bacana!
só uma coisa, se eu abrir a div 1, e clicar na div2, ele não irá fechar a div1, é preciso clicar nela pra fechar ela pra abrir a 2, e se eu apertar na 2 irá fechar a 2(essa parte era assim que eu queria)

Obrigado!
0
Está precisando de um Website?
Acesse ww.listasms.com/web e faça um orçamento sem compromisso!
Ígor
 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17720
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Menu com submenus usando jQuery

25-01-2009 07:56

Ah sim, com base no primeiro script do post, usa esse script

function menus(oid) { ref = oid; // aqui está a mudança // é verificado se a div clicada está aberta, se sim, fecha e dá um return false if(document.getElementById(ref).style.display=='block') { $('#'+ref).slideUp('slow'); return false; } for(i=1; i < 4; i++) { if(document.getElementById("div"+i).style.display=='block') { $('#div'+i).slideUp('slow'); } } setTimeout("$('#'+ref).slideDown()", 500); }

0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Mensagens: 348
Sexo: Masculino
Localização: Paraná/São Mateus do Sul/Brasil
Contato:

Menu com submenus usando jQuery

25-01-2009 10:43

Valeu amigo!!!
é isto mesmo!

Muito obrigado =]
0
Está precisando de um Website?
Acesse ww.listasms.com/web e faça um orçamento sem compromisso!
Ígor
 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17720
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Menu com submenus usando jQuery

25-01-2009 11:29

:)
0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado