| Maior acervo de vídeo aulas da web

David CHC
8.810 visitas
23 jun 2009
57 Comentários

Não consegue visualizar a 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:

Você gostou dessa Vídeo Aula, então compartilhe com seus amigos

Comentários

http://www.tudoacho.com Júlio Barros

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

http://www.videoaulasbrasil.com.br David CHC

@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.

http://www.tudoacho.com Júlio Barros

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.

http://www.videoaulasbrasil.com.br David CHC

@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

http://www.tudoacho.com Júlio Barros

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.

http://www.videoaulasbrasil.com.br David CHC

@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.

http://www.tudoacho.com Júlio Barros

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.

http://www.videoaulasbrasil.com.br David CHC

@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/

Gabriel Paludo

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

http://www.videoaulasbrasil.com.br David CHC

@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;
}

Ernani José

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

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

http://www.videoaulasbrasil.com.br David CHC

@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.

Roberto

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.

http://www.videoaulasbrasil.com.br David CHC

@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;
}

João

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.

http://www.videoaulasbrasil.com.br David CHC

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

João

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

http://www.videoaulasbrasil.com.br David CHC

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

João

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

http://www.videoaulasbrasil.com.br David CHC

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

João

Ainda nao deu certo, to ficando sem ideias ja.

http://www.videoaulasbrasil.com.br David CHC

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

João

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

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

http://www.videoaulasbrasil.com.br David CHC

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

João

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.

http://www.videoaulasbrasil.com.br David CHC

Vlw @João pela contribuição.

João

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?

http://www.videoaulasbrasil.com.br David CHC

@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

Marcelo

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.

http://www.videoaulasbrasil.com.br David CHC

@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;

Marcelo

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.
valter rodrigues

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

http://www.videoaulasbrasil.com.br David CHC

@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/

valter rodrigues

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
valter rodrigues

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

http://www.videoaulasbrasil.com.br David CHC

@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.

valter rodrigues

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

http://www.videoaulasbrasil.com.br David CHC

@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

valter rodrigues

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

http://www.videoaulasbrasil.com.br David CHC

@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/

valter rodrigues

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.

http://www.videoaulasbrasil.com.br David CHC

@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.

valter rodrigues

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.
Junior Eberhardt

fala David, muito boa video aula, como sempre…

eu só queria que ao passar o mouse fora do submenu ele subisse novamente, no mouseout ele desse um slideUp(“fast”)…

já tentei um monte aqui mas não tive sucesso.

http://www.videoaulasbrasil.com.br David CHC

@Junior , vc pode utilizar o evento hover, exemplo:

http://jsfiddle.net/vWByn/3/

Anônimo

Olá David,
Excelente video aula.
Estou com um problema no meu menu no IE6 e IE7. Logo abaixo do menu tenho uma outra div que mostra um banner. Quando aparece o sub-menu ele fica debaixo dessa div. Como posso resolver isso. Obrigado

http://davidchc.wordpress.com David CHC

Vc pode colocar um elemento que engloba o menu com position:relative; z-index:0, e o elemento que engloba o conteudo colocar position:relative, z-index : 1
http://davidchc.wordpress.com David CHC

no submenu vc pode colocar z-index:999;

http://davidchc.wordpress.com David CHC

Vc precisa colocar no elemento q engloba o menu, um position relative, e z-index com valor por exemplo de 1 . E no elemento q engloba esse slide, fazer a mesma coisa, só q coloca o valor de 0 no z-index

Ewerton Melo

Fala David.
Bom, seria dessa forma aqui???

DIV que contem a o Slide de imagens que mudam a cada 5 segundos…
#divSlideImage{ background-color: #ffffff; position: relative; z-index:0; top: 180px; left: 150px; width: 480px; height: 270px; border-style: solid; border-top-color: 3px; border-right-color: 3px; border-bottom-color: 3px; border-left-color: 3px; border-color: #ffffff; -moz-border-radius:12px; /* Firefox, etc */ -khtml-border-radius:12px; /* Konqueror, etc */ -webkit-border-radius:12px; /* Safari, Google Chrome, etc */ -opera-border-radius:12px; /* Opera */
}

DIV que contém o Dropdown logo acima da #divSlideImage
ul#menu{ width:590px; margin:0 auto; position:relative; z-index:99;}

A DIV que contém o dropdown fica dentro de outra DIV que posiciona a mesma na tela.
#menuSuperior{ background: -moz-linear-gradient(top, #ffffff, #bfbdbd) repeat-X; background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#bfbdbd)) repeat-X; -ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#bfbdbd)”; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#bfbdbd); position: absolute; top: 105px; left: 0px; width: 760px; height: 30px; border-top-color: 3px; border-right-color: 3px; border-bottom-color: 3px; border-left-color: 3px; border-color: #ffffff;}

http://davidchc.wordpress.com David CHC

Vc precisa colocar o z-index nos elemento q englobal os dois, exemplo:

http://pastebin.com/6b2PMufd

Aqui é no caso do nav e content

Ronaldobak

Achei bem legal. Estou com um problema semelhante ao do pessoal do slide, que o menu fica por baixo, só que no meu problema eu estou usando um banner em flash e não teve jeito. Usei o Z-index e o problema persistiu. Só funciona na plataforma Mac. Como posso corrigir isso?

http://davidchc.wordpress.com David CHC

Vc deve atribuir ao object e o embed um wmode=”transparent”

Marlon

David,
Tenho um menu com 2 niveis de submenu, Exemplo:
Manuais -> Topologias -> SistemaX
nao faço ideia como fazer pro SistemaX aparecer soh qnd o mouse ficar sobre a Topologia do jeito que ta o exemplo que ensinou quado posiciona o mouse no Manuais ja abre todos os filhos inclusive os da Topologia.
Tem como me dar uma luz rs..

Abs e parabens pelo post.