Criando um menu drop down com jQuery e 3 linhas!
14/05/2009
Olá pessoal,
semana passada lecionei um curso sobre XHTML, CSS e JavaScript na faculdade para o pessoal do primeiro ano. Como eles não sabem programar ainda, resolvi passar um pouco de jQuery ocultando assim muita lógica.
A primeira parte é o XHTML:
HTML:
O CSS:
CSS:
-
<pre>#menu> ul{
-
margin: 40px 0 0 10px;
-
background: #FFFFFF;
-
width: 150px;
-
padding: 0;
-
}
-
/* mostrando o cursor do mouse como pointeiro */</pre>
-
<pre>#menu h4{
-
cursor: pointer;
-
}
-
/* ocultando o menu */
-
#menu ul li ul{
-
display: none;
-
}</pre>
E o código JS em jQuery:
JAVASCRIPT:
-
$(function(){
-
$("#menu> ul> li> h4").click(function(){
-
$(this).parent().find("ul").toggle("slow");
-
});
-
});
Simples né?
Qualquer dúvida comentem! Forte abraço!
13 Comentários »
RSS feed for comments on this post · URI do TrackBack
Este site é escrito por Tulio Faria, analista de sistemas, apaixonado por web, jogos e por qualquer cacareco tecnológico.
Fábio said,
Maio 19, 2009 @ 11:27
Túlio, tudo bem? Você sabe se existe integração do cakephp com um framework para o padrão DAO? Por exemplo, você já utilizou o outlet junto com o cakephp?
Rick said,
Maio 28, 2009 @ 12:46
Kra não funciono d jeito nenhum.
coloquei o jquery, até testeio para ver c não erra isso..
mas não..
nao tertorna erro no firebug, resumindo não faz nda..
:S
Léo (Scoup) said,
Junho 26, 2009 @ 02:30
Olá, eu to com a mesma dúvida do Fábio. Será que teria como mostrar um exemplo de integração com o cakephp?
Eu vi um exemplo: http://blogs.bigfish.tv/adam/2008/02/12/drag-and-drop-using-ext-js-with-the-cakephp-tree-behavior/
Testei aqui mas achei meio bugado.
Minha curiosidade é como informar ao cake a ordem atual para poder fazer o action
Abraço
Lucas Saliés Brum said,
Junho 29, 2009 @ 08:26
O que faz esse código?
borg said,
Setembro 14, 2009 @ 13:28
já que o autor não teve nem a capacidade de testar o que postou eu coloco o script de forma correta, se aceitar html na mensagem:
obs: caso não apareça o código troquem o '' por '' e no final do código fechem a 'div' com ''. Retirem o '' dos estilos e retirem o '>' também onde aparece, aí funciona.
exemplo corrigido:
$(function(){
$("#menu ul li h4").click(function(){
$(this).parent().find("ul").toggle("slow");
});
});
#menu ul{
margin: 40px 0 0 10px;
background: #FFFFFF;
width: 150px;
padding: 0;
}
#menu h4{cursor: pointer;}
/* ocultando o menu */
#menu ul li ul{
display: none;
}
Navegue pelas lojas:
Livros e Papelaria:
Livros
Livros Importados
Papelaria
CDS, DVDs e Games:
Livros
Livros Importados
Papelaria
borg said,
Setembro 14, 2009 @ 13:30
como expliquei não pegou o html no exemplo, mas copiem a parte do javascript e os estilos css trocando o p por div que vai funcionar, só não esqueçam de fechar a div no final do código html.
Lia said,
Outubro 22, 2009 @ 10:07
rejeitado só pq não tem link de demonstração
Pindureta said,
Março 20, 2010 @ 19:39
Faltou o link de demo.
Hugo said,
Março 29, 2010 @ 14:32
muito bom!
agora eu queria saber se tem como deixar esse menu horizontal?
Bruno Pulis said,
Abril 28, 2010 @ 18:40
Cara eu que apanhei pra fazer menu dropdown na mao, agora vou fazer com JQuery valeu pela dica Túlio. =D
juca said,
Abril 29, 2010 @ 07:32
n00b
chico said,
Agosto 10, 2010 @ 16:53
Nossa, Borg vlw ae, realmente alem de não funcionar, não tem link de demo e ainda é menu totalmente não funcional.
Diogo said,
Agosto 10, 2010 @ 22:47
Olá Túlio,
Será que você poderia me dar uma ajuda. Comecei a desenvolver algumas coisas com jquery e CSS, aproveitei o processo de aprendizado para por a mão na massa. Desenvolvi o site da minha banda.
Estou com uma dúvida, fiz um menu drop-down em linha horizontal, achei bacana o estilo, mas gostaria que os links seguissem o botão do menu, sem alterar o tamanho da barra do menu drop-down. Tem como?
Se quiser dar uma olhada no site: www.darkhound.com.br
Seria muito grato se pudesse ajudar.