Opa pessoal, desculpe o sumiço. Em breve posto os ótimos resultados que tive no meu pedido de ajuda. Muita gente mesmo. Valeus povo.
Agora um tutorialzinho rápido pra saberem que tô vivo e usando JQuery. Convertam-se também! Amém.
Tutorial de como fazer um accordion menu (menu sanfona) rapidamente e de forma não obstrusiva, crossbrowser (IE, FF, OP) e com pouca digitação de código.
Pergunta: "a tradução seria 'menu acordeão' ?!?".
Clique aqui pra ver uma página de demonstração do accordion menu .
Este tutorial foi postado inicialmente no fórum iEvolution. Cadastre-se, contribua, encha de perguntas lá. Vou ficar esperando.
O tuto foi adaptado de uma videoaula do site do oficial do JQuery.
Came to work soldier:
1) Você tem sua página com sua lista dt-dd-dl normal:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<title>DL Demo</title>
<style>
body { font-family: Arial; font-size: 16px; }
dl { width: 300px; }
dl,dd { margin: 0; }
dt { background: #F39; font-size: 18px; padding: 5px; margin: 2px; }
dt a { color: #FFF; }
dd a { color: #000; }
ul { list-style: none; padding: 5px; }
</style>
</head>
<body>
<dl>
<dt><a href="/">jQuery</a></dt>
<dd>
<ul>
<li><a href="/src/">Download</a></li>
<li><a href="/docs/">Documentation</a></li>
<li><a href="/blog/">Blog</a></li>
</ul>
</dd>
<dt><a href="/discuss/">Community</a></dt>
<dd>
<ul>
<li><a href="/discuss/">Mailing List</a></li>
<li><a href="/tutorials/">Tutorials</a></li>
<li><a href="/demos/">Demos</a></li>
<li><a href="/plugins/">Plugins</a></li>
</ul>
</dd>
<dt><a href="/dev/">Development</a></dt>
<dd>
<ul>
<li><a href="/src/">Source Code</a></li>
<li><a href="/dev/bugs/">Bug Tracking</a></li>
<li><a href="/dev/recent/">Recent Changes</a></li>
</ul>
</dd>
</dl>
</body>
</html>
2) Você baixa o jquery.
3) Você inclui o arquivo externo do jquery no seu documento.
<script type="text/javascript" src="jquery.js"></script>
4) Adiciona este script ao head da sua página:
<script>
$(document).ready(function(){
$("dd:not(:first)").hide();
$("dt a").click(function(){
$("dd:visible").slideUp("slow");
$(this).parent().next().slideDown("slow");
return false;
});
});
</script>
5) Prontim. Totalmente não obstrusivo, limpo, rápido, bonito, etc etc blábláblá.
Aposto que se interessou pela JQuery heim? Veja uma introdução sobre o bixo aqui também (link pedido descaradamente pelo meu 'padrinho' no jquery Vitor Prado heuaeh - mas o site do cara é bom mesmo pra aprender. Passeia lá).
Dúvidas? Manda pro fórum que agente gosta de responder. Somos doidos. Eu não respondo por email :-)
Gostou da dica acima? Então clica nos botões de compartilhamento abaixo e me ajude a dica a subir no Google.
Bom artigo! jQuery ajuda mt mesmo!
ResponderExcluirTava vendo as estatísticas do meu site pessoal, tem mais de 50 cliques do seu blog para meu site! =D
Abraços!
A jQuery anda fazendo um sucesso imenso, até estou pensando em adotar. Não cheguei a ver o exemplo, mas o código parece muuuito menor do que imaginava. Vamos testar em casa.
ResponderExcluirAê Micox, fiel amado da jquery rsrsrrs...
ResponderExcluirÓtimo post...
mas bem que cê podia colocar a referência de iniciação com Jquery para meu post né?
http://www.vitorprado.com/iniciando_com_a_jquery/
Hum... A sagrada jquery vai te castigar se você não for um bom evangelista , rsrs...
abraços...
Fuiz...
@william, juliogreff
ResponderExcluirUsem a JQuery meus fiéis, usem e não se arrependerão! Vocês serão recompensados no dia da codificação final.
Amém.
@vitor
Tá lá. heheh
hauhauhahuahuhauha
ResponderExcluir"link pedido descaradamente"
Esta foi ótima...
risos..
Tenhas certeza que se enviares este post http://www.vitorprado.com/iniciando_com_a_jquery/
para mais 50 pessoas, você receberá em seu email o sagrado framework da Jquery.
Ele é capaz de lêr seus pensamentos e já ir digitando, e os problemas que seu cérebro não conseguir entender, tenhas certeza servo fiel, a Jquery vai revolver para você.
Ai meu velho manero esse lance ai
ResponderExcluirdo jquery aonde e departamento de sugestao de materias ????
henrique
@vitor_prado
ResponderExcluirhahehaehe, vc me mata de rir velho. hauhae
@kakaroto
Sugestão de matérias?
Ué, pode ser aqui, no meu email, ou no do rapaz maluco aí de cima (vitor prado) se for sobre a jquery.
Puxa!!!
ResponderExcluirLegal
Parabêns aí MICOX.
Não conhecia o jQuery!!!
Ele é bom mesmo.
poxaaa legal a jQuery
ResponderExcluirmai estou tendo problemas com acentuação ...vc sabe como resolver???
Problema de acentuação????
ResponderExcluirNão tem nada a ver com Accordion Menu ou com jQuery.
Vê se sua codificação tá correta.
Pode ser via tag META charset OU via linguagem server-side.
Acho melhor vc perguntar sobre isto no fórum iEvolution.
Show de bola micox!
ResponderExcluirTu podia explicar o que é esses :visible :not (:first)
seria pseudo-classes do seletor css2 ?
Opa, são pseudo-seletores muito loucos do jquery. Ele une x-path e CSS.
ResponderExcluirA origem deles não sei não, sei que um indica os elementos visíveis e o outro indica os elementos que NÃO forem o primeiro da lista.
Mais aqui: http://docs.jquery.com/DOM/Traversing/Selectors
:)
Este comentário foi removido pelo autor.
ResponderExcluirA partir de seu artigo acessei o site da JQuery e baixei o plugin Accordion que encontrei por lá, e, claro, a própria biblioteca.
ResponderExcluirO resultado do que fiz com ambos pode ser visto na barra lateral do Viche, e, diga-se de passagem, foi bem tranquilo.
Hello Micox!
ResponderExcluirComo faço para que o menu permaneça fechado, só sendo aberto quando clicado?
No modelo, o primeiro "nível" já fica aberto.
Valeu
Opa anonimo, beleza?
ResponderExcluirÉ só mudar esta linha:
$("dd:not(:first)").hide();
Para isto:
$("dd").hide();
Veja que antes eu escondia todas MENOS a primeira.
Depois eu escondo todas mesmo.
Micox,
ResponderExcluirPrimeiro parabéns. Agora vem o meu pedido de ajuda.
Ta tudo funcionando perfeito, só que eu queria que quando o user clicar novamente no menu que está aberto, ele ao invés de subir e descer, subisse e ficasse fechado. Ele tá fechando e abrindo, entendeu? Tem como resolver?
pode responder para seraficoneto@gmail.com
Não é só com você não Valentim.
ResponderExcluirÉ bug do hide/show do jquery.
Bem legal, esse tutorial seu será muito util no meu novo projeto, ja utilizava o Jquery antes, com o plugin masketinput e rouded corners....
ResponderExcluirVlw, grande abraco
Como ficaria o código para mouseover \ mouseout ?
ResponderExcluireracton@gmail.com
vlw!
Esse post eu já tinha visto do original, é um script muito legal e limpo, eu nem conhecia dl, dt, dd, achei uma estrutura muito boa!! a diferença de ul/ol li é que, além de vc não ter bullets, é q vc pode definir títulos.
ResponderExcluirOlha só a treta desse accordion é que quando clicamos, ele dá uma subidinha de leve no anterior... acho isso mal... fica um efeito visual legal emboa com uma "estranheza"...
Se desse pra alinhar isso e quando clicasse em um não subisse os outros, seria perfeito!!
é possivel qdo vc clike no link, na pag fike aberto o submenu clikado?
ResponderExcluirse sim, como ?
Galera, e se o meu menu, não for todo com sub itens?
ResponderExcluirExplico, por exemplo, eu tenho vários itens (principais) e apenas 3 deles teem sub-itens, até ae tudo bem, soh estes abrem e fecham. O problema, é que ao menos aqui, não consegui fazer com que os outros itens funcionem como links normais. Eles ficam sem função. Apenas fecham o menu aberto, mas não fazem o link com outras páginas.
Olá Felipe, sua solução está aqui: http://forum.ievolutionweb.com/index.php?showtopic=17800
ResponderExcluire como faria para ao clicar pela segunda vez o menu se fechasse novamente.
ResponderExcluir@Osmair F
ResponderExcluirSua resposta está nesse link:
http://forum.webly.com.br/index.php?showtopic=25659
RESPOSTAS !
ResponderExcluirEu vi que não só eu como mais pessoas precisaram fazer ele abrir e fechar clicando 2 vezes.
E fazer um link sem sub-menus.
Como as respostas estão em links separados e muitos tem preguiça de ler vou facilitar quem precisar dos 2 juntos o código fica assim:
$(document).ready(function(){
$("dd:not(#dd_open)").hide();
$("dt a").click(function(){
$("dd:visible").slideUp("slow");
var prox = $(this).parent().next()
if(prox[0].nodeName=='DD'){
$(this).parent().next().not(':visible').slideDown("fast");
return false;
}
var back = $(this).parent().back()
if(prox[0].nodeName=='DD'){
$(this).parent().back().slideUp("slow");
return false;
}
});
});
Show de bola Micox parabéns pelotuto, me desculpe se não prestei a atenção nos posts anteriores mas eu tenho a mesma duvida do SAMUEL, como faço para deixar o menu e o sub menu aberto na pagina que estou navegando?
ResponderExcluirOlá,
ResponderExcluirshow esse menu sanfona!
seguinte: ao abrir no FF ele fica todo alinhado a esquerda, mas quando abre no IE os sub-itens ficam alinhados como se tivesse uma margin-left... como corrigir isso?
Opa! valeu galera!
ResponderExcluirsó uma coisa, onde eu coloco essa li nha de referência ao arquivo externo no meu código? Ele não tá reconhecendo o Jquery, to rodando o .html numa pasta onde tbm tem o arquivo do jquery, e colocuqie a linha de referÇencia dentro do body, do head ou até mesmo antes dele, nada funciona...
Se estiver rodando localmente E no IE não vai funcionar por causa do bloqueio do IE. Tenta colocar online ou então testar no firefox.
ResponderExcluirAlguém sabe resolver aqle problema, q ao fechar o menu no IE, ele da aqla 'piscada'? :S
ResponderExcluirMuito bom, queria saber se tem como eu manter uma das listas abertas quando abre a página?
ResponderExcluirhttp://joaopedrorosa.blogspot.com
When i click "My computer" only apple iphone pictures show up and not the hardrive itself. I have the latest itunes and updates for my phone, but it's not recognizing the hardrive. What can i do to make my computer recognize the iphone 3g hardrive? I know you can because i did it on my other computer simply by plugging it in, but this one doesn't work.
ResponderExcluir________________
[url=http://unlockiphone22.com]unlock iphone[/url]
I want to quote your post in my blog. It can?
ResponderExcluirAnd you et an account on Twitter?
Olá!
ResponderExcluirEu criei o menu e funcionou, ficou muito legal!
Só que não estou conseguindo fazer com que abra uma página quando clico no ítem que abre os subitens, ele apenas exibe o subitens na forma de acordeon. Será que expliquei bem?
Os subitens estão abrindo as páginas normalmente. O item que não abre página, apenas ativa o efeito.
abç
Ola pessoal, eu tentei mudar para mouseover, e da certo porem ele fica se mexendo automatico, e as vezes para, o codigo do script que eu usei foi esse mesmo, porem troquei o click por mouseover.
ResponderExcluirSe alguem souber, obrigado!
xeroxoito@yahoo.com.br