Vídeo Aulas Brasil

Vídeo aula

Menu dropDown(Submenu)

Salve amigos do MX masters, David CHC com mais uma vídeo aula, só que agora é CSS. Irei ensinar como fazer um menu com submenu utilizando o CSS, fazendo funcionar também no problemático IE6 e ainda validando o CSS e XHTML.

Abaixo terá o link do site para o script para solução citada na video aula.

Até uma próxima, e boa video-aula:

, , , ,

Comentários

Deixar um comentário

Nome

E-mail

Site

Comentário

Comentários (45 Comentários)
  1. valter rodrigues : 04.07.10 às 20:34

    Opa, muito bom mesmo esse site, e o livro PHP -programando com orientação a objetos, vo ve se encontro pra compra, vlw a ajuda e as dicas.
    abc.

  2. David CHC : 04.07.10 às 18:33

    @valter, eu podendo te ajudar, não tem problema algum, pode perguntar a vontade. Livros, eu indico do Maujor , q é do site http://www.maujor.com . E PHP, tem PHP Programando com Orientação a Objetos. Q é um ótimo livro.

  3. valter rodrigues : 04.07.10 às 17:46

    ah tah entendi. bom eu tenho q da uma lida nessa documentacao.
    to atras de livros sobre desenvolvimento web, php, javascript, jquery…

    alguma dica?
    abc e deu de te enche, agora eh serio rs.

  4. David CHC : 04.07.10 às 13:15

    @valter , ele vai servir para testar uma condição, no caso ele verifica se o elemento q indicamos, no caso ul, se está visivel, se tiver, no caso do menu, ele faz subir, caso contrario, ele mostrar. Mais sobre .is, tem no site do jQuery

    http://api.jquery.com/is/

  5. valter rodrigues : 04.07.10 às 12:45

    cara, era isso mesmo, concegui aqui, brigadao ai, eu ate ta indo na logica certa mas falta conhecimento de como aplicar os if’s para verificar se estava ou nao visivel, agora eu sei como hehe, muito obrigado msm,

    misturei o codigo q me passasse no outro post aki com esse do link ali, fico bem simples

    $(“#menuLat ul li a”).click(function(){
    var ulToggle = $(this).parent().find(“ul”);
    if(ulToggle.length > 0){
    $(“#menuLat ul li ul:visible”).slideUp(“slow”);
    if(ulToggle.is(“:visible”))
    ulToggle.slideUp(“slow”);
    else
    ulToggle.slideDown(“slow”);
    }
    });

    agora uma outra perguntinha besta.
    esse .is(“:visible”). o .is serve para verificar o estado em q se encontra? se tem alguma propriedade? como funciona a “logica” dele?
    abc e vo para de te enche um poquinho hehe

  6. David CHC : 04.07.10 às 11:01

    @valter, na verdade a video aula aplica o mesmo efeito q esse exemplo. Só q vc quer, pelo menos o q entendi, se tiver aberto, e clicar ele fecha, e se tiver fechado e clicar ele abre. NO caso desse exemplo q vc postou, vai ter sempre um aberto, e vc não quer isso. Veja se seria esse efeito desejado.

    http://pastebin.com/2F2ztf9V

  7. valter rodrigues : 04.07.10 às 10:41

    na verdade oq eu preciso eh do seguinte.

    achei na net um exemplo desse tipo de menu,
    espero q possa por aqui, se nao puder pode deletar o comentario.

    aki o link pro exemplo do menu

    http://jquery.com/files/demo/dl-done.html,

    ve que qnd clica no item principal do menu, se os sub itens ja estao visiveis, os sub itens sobem mas em seguida descem de novo?
    tem como fazer com q eles apenas subam?
    espero q possa ter entendido eu so muito ruim explicando as coisas rs.

    abc

  8. David CHC : 03.07.10 às 20:33

    @valter rodrigues, ah tá, rs.

    O q vc pode verifica para realizar o efeito, se o elemento clicado tem filhos, exemplo:


    $(“li a”).click(function(){
    var pegaUl = $(this).parent().find(‘ul:first’);
    if(pegaUl.length > 0){
    pegaUl.slideToogle();
    }
    })

    Essa linha:

    $(this).parent().find(‘ul:first’);

    Ele vai contar se existe elementos ul, quer dizer se te algum submenu, se tiver só assim ele ativa ao clicar o elemento. Veja se seria isso q vc queria fazer.

  9. valter rodrigues : 03.07.10 às 20:20

    Bom, eu troquei o primeiro link(o da li principal) por um button e resolvel o problema dos sub itens, mas agora eu to querendo, que qnd os sub itens ja estejam visiveis, (ou seja, ja cliquei no button e o slidDown se ativo), e eu clico de novo no button, os sub itens desaparecam, porq oq ta acontecendo aqui, eh deles subirem mas logo em seguida descerem de novo. tem como fazer?
    abc

  10. valter rodrigues : 03.07.10 às 19:30

    bahh, pois entao era bem dessa video aula q eu tava falando, s errei de video aula pra comenta burro eu eim hauhas,

    eu segui a video aula mas ao clicar em algum link na lista de sub itens o sliUp eh ativado, :S

  11. David CHC : 02.07.10 às 17:19

    @valter, não com apenas CSS, vc terá q usa javascript. Tem uma video aula q pode te ajudar, no caso é o efeito sanfona:

    http://www.videoaulasbrasil.com.br/ajax/criando-um-menu-safona-com-jquery/

  12. valter rodrigues : 02.07.10 às 17:16

    Cara, primeiro parabens pelo trabalho q vem feito e obrigado por ajudar ;D.
    agora, eu to com um problema, fiz td certinho aki mas qnd eu tento acessar o link q ta na lista de sub itens, o efeito slideUp eh acionado e esconde akela secao de subitens, tem como clicar no link e a lista permanecer visivel? fazer o slideUp so ser acionado ao se clicar no link q ta na primeira li?
    abc

  13. Marcelo : 22.06.10 às 1:23

    eu tinha feito isso e não havia dado certo, ae perguntei, e ae vc informou que era desta forma, fui novamente fazer e não deu certo, baixei então o código que vc fez na video-aula, e alterei de left para right e deu certo, ou seja, algo errado no meu css, vou verifica-lo… valeu + uma vez.

    Abraço.

  14. David CHC : 21.06.10 às 21:05

    @Marcelo, sim, basta vc definir o left do submenu right:0, ou left:150px. ou o tamanho da largura q vc definiu;

    top:30px;
    right:0;

  15. Marcelo : 21.06.10 às 21:00

    Olá David?
    tudo certin??

    Seguinte… tentei e não consegui, então resolvi perguntar…
    Os submenus ficam alinhados a partir da “borda” esquerda do link do menu, teria como fazer para ficar alinhado a “borda” direita?

    Desde já agradeço e parabéns por mais essa vídeo-aula.

  16. David CHC : 28.05.10 às 18:56

    @João, veja o codigo-fonte da pagina, e veja se está inserido algum caracter, assim vc saberá se está incluindo algo além do q vc determinou

  17. João : 26.05.10 às 13:07

    David eu to com uma duvida aq q num tem nada a ve com essa video aula mas eu num sabia onde posta entao postei aq msm qualquer coisa deleta meu comentario, e que eu to fazendo meu site e adicionei um include no meu site acima do html entao depois disso a primeira div do meu site ta tipo saltando uma linha e ja porcurei em todo lugar e num encontrei como resolve isso, vc sabe oq eu posso fazer para resolver esse problema?

  18. David CHC : 24.05.10 às 18:51

    Vlw @João pela contribuição.

  19. João : 24.05.10 às 16:41

    Davi eu usei um z-index:-1 na div do slide e funcionou em todos navegadores, postei aq so pq talves alguem tenha tido esse problema tambem.

  20. David CHC : 01.05.10 às 13:00

    @João, não pude nem olhar, pq estou resolvendo problemas no Video Aulas Brasil, mas vou dá uma olhada sim.

  21. João : 01.05.10 às 0:12

    David ja deu pra vc da uma olhada ou ainda não teve tempo?

  22. João : 28.04.10 às 18:57

    Ta ae da uma olhada http://rapidshare.com/files/381329061/site.rar.html

  23. David CHC : 28.04.10 às 11:08

    @João, tem como publicar o site pra eu dá uma olhada?

  24. João : 28.04.10 às 10:56

    Ainda nao deu certo, to ficando sem ideias ja.

  25. David CHC : 28.04.10 às 9:27

    @João, então tente colocar na div do slide um position:relative. com z-index:0;

  26. João : 27.04.10 às 23:03

    Não o problema ta em todos os IE 6,7 e 8, no firefox no chome, no safari ta dando tudo certo.

  27. David CHC : 27.04.10 às 20:29

    @João, o problema é no IE6, seria isso?

  28. João : 27.04.10 às 18:36

    continua nao dando certo ja tentei ate numeros maiores que esses, c vc tiver mais alguma dica me fala ae vlw.

  29. David CHC : 27.04.10 às 14:52

    @João, tenta colocar um valor bem auto no z-index, tipo: 999999

  30. João : 27.04.10 às 11:08

    David eu fiz esse seu menu aq no meu site e deu tudo certinho ate q eu resolvi criar um slide show em jQuery abaixo do menu ae comesou os problemas o meu menu ta ficando por baixo do slide então eu coloquei um z-index no menu e funcionou em todos os navegadores menos no maldito IE, vc poderia me ajuda a resolve isso, olha so uma foto http://img30.imageshack.us/img30/7897/bugqv.png c vc ver bem na no menu opções ele esta ficando por baixo, c de pra vc me ajuda eu agradeço.

  31. David CHC : 17.03.10 às 20:10

    @Roberto, isso vc vai criar um imagem degradê, vai recortar um filete, e vai atribuir no link ( elemento a) como background, e mandando repetir na horizontal:


    ul#menu li a{
    display:block;
    height:25px;
    background:url(../imagem/bg-link.jpg) repeat-x center top;
    }

  32. Roberto : 17.03.10 às 19:31

    Como que eu faço um menu igual a do vab ? eu queria fazer esse tom meio branco em cima, da para fazer com css ?

    Obrigado.

  33. David CHC : 18.11.09 às 7:29

    @Jessica, vc pode usar o jquery pra fazer esse efeito, exemplo:

    $(“#menu li”).hover(function(){
    $(this).find(‘ul’).fadeIn(‘slow’);
    }, function(){
    $(this).find(‘ul’).fadeOut(‘slow’);
    });

    Veja a video aula sobre menu sanfonas, e outras aulas do jquery, q irão te ajudar a entender melhor.

  34. Jessica Sampaio : 17.11.09 às 21:54

    Oi David tudo bem, adorei a sua aula, aprendi muito eu gostaria de te fazer uma pergunta, eu gostaria de fazer um menu igual a esse mais quero que ao passar o mouse sobre um botao ele aparece mais não de uma vez mais como se estive surgindo dissolvendo na tela e o mesmo com o aparecimento do submenu tipo o efeito fade.

    Obrigada

  35. Ernani José : 09.11.09 às 16:24

    Gostei muito da sua video-aula, bem explicada bacana mesmo abraços e esperando mais video-aulas

  36. David CHC : 08.08.09 às 20:40

    @Gabriel Paludo, a tag span é utilizada para agrupar elementos em linha. Ele é indicado quando vc quer estilizar um trecho de um texto, exemplo (usuario os colchetes me vez do sinal de maior e menor pq senão o wordpress interpreta e não vai mostrar):

    [p]Esse é um exemplo de um parágrafo utilizando [span]a tag span[/span].[/p]

    No css:

    p span{
    color:#069;
    font-style:italic;
    }

  37. Gabriel Paludo : 08.08.09 às 20:29

    Cara, estou com uma dúvida não presente na vídeo aula. Mas se pudessem me responder, para que serve a tag SPAN?

  38. David CHC : 29.06.09 às 11:25

    @Júlio Barros , veja video aula do Michel de banner com flash, q pode te ajudar a resolver esse problema:

    http://www.videoaulasbrasil.com.br/flash/trabalhando-com-expandable-banner-no-flash/

  39. Júlio Barros : 29.06.09 às 11:14

    David, obrigado pela dica, olha eu ñ tinha testado o meu site no Firefox ainda, e me surpreendi com a quantidade de falhas que encontrei, olha, ñ sei se vc notou, mas no parte superior esquerda do site tem uma abinha como aquelas do msn, e para deixar transparente coloquei a tag wmode=”transparent” no embed, e funcionou normalmente, mas no firefox, fica transparente porem ñ consigo clicar no que tem atras dele, vc tem como me ajudar emquanto a isso.

  40. David CHC : 29.06.09 às 10:44

    @Júlio Barros, você pode diminuir a última imagem do topo pra ver se encaixa. Ou vc pode tbm deixar o topo inteiro, em vez de fatiado, e colocar como background via css.

  41. Júlio Barros : 29.06.09 às 10:14

    davi, realmente funciona. ñ tinha reparado que este erro estava acontecendo, pois criei este menu baseado na video aula e como tinha fincuinado no ie7 achei que tava tudo certo, valeu pela dica.
    po cara vc pode me responder mais uma dúvida, o topo do meu site no IE7 está normal mas no firefox a ultima parte dele cai para baixo, talvez este ñ seja o local mais indicado para discutir isto, mas se vc puder me dar uma luz, eu agradeço.

    obs: este topo foi baseado numa aula do Felipe Cardozo, ja faz um tempo, coloquei o topo lá por meio de uma tabela.

  42. David CHC : 29.06.09 às 9:57

    @Júlio Barros, como tinha falado, o problema é o html, a ul do submenu tem q está dentro da li. Veja o codigo q publiquei no forum do mxmasters, assim vc pode conferir com o seu

  43. Júlio Barros : 29.06.09 às 9:40

    David, acho que o problem não é no html, pois funciona em outros navegadores, da uma olhada no site e testa no IE7 e no Mozilla/Firefox, pra vc ver a diferença, o site é o http://www.tudoacho.com . no IE6 o problema foi o contrário, o menu ñ se abria, então eu coloquei um “behavior: url(csshover2.htc);” no css para o body que eu vi em um tutorial não lembro onde e passol a funcionar normalmente no IE6, será que existe algum arquivo semelhante para o firefox.

  44. David CHC : 29.06.09 às 8:48

    @Júlio Barros, o principio é mesma coisa pra fazer na vertical. Veja se o html está correto, pq esse é uma dos principais erros. A outro a modificação é remover o float na tag #menu li, #menu li a . De tbm modifica #menu li ul, colando top:0 e o left do tamanho da largura q vc definiu pra o menu.

  45. Júlio Barros : 29.06.09 às 7:24

    Eu ja tinha assistido essa video aula no mx masters, e montei um menu parecido, sendo que na vertical, o problema é que ele ñ funciona no firefox e no IE 8, ele fica todo aberto, se alguem souber como me ajudar eu agradeço.
    Gostaria tambem de parabenizar à todos vocês por esta site, que esta me ajudando muito nas minhas criações

Informações

Informações

Copyright 2009 - VAB - Vídeo Aulas Brasil - Todos os direitos reservados - Hospedado por: Hostnet - Hospedagem de sites