28/04/2009 - 14:11 > 35.211 Visualizações > 167 comentários
Tableless – 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:
Posts relacionados
David CHC
Trabalha como free-lance em desenvolvimentos de sites,desde o projeto completo à parte do projeto. Tem conhecimentos em Padrões Web( xhtml, css), javascript( jquery), php, mysql , (iniciando no python e ruby também), photoshop, fireworks, corel draw, enfim, um eterno aprendiz...
Siga o autor
Comentários / Deixe seu Comentário
167 respostas para 'Tableless – Menu dropDown(Submenu)'
Deixe seu Comentário
Publicidade
Nossos cursos
-
Curso Sony Vegas 8 PRO
por R$ 34,90
Comprar -
Criando um site completo V.2
por R$ 39,90
Comprar -
Curso de ActionScript
por R$ 89,00
Comprar -
Wordpress V2 – criando portais
por R$ 39,90
Comprar -
Curso de Efeitos Digitais
por R$ 39,90
Comprar -
Curso Pacotão MX
por R$ 24,90
Comprar -
PHP e Mysql com Dreamweaver
por R$ 65,00
Comprar -
Wordpress V1
por R$ 39,90
Comprar -
Curso de Flash CS4
por R$ 45,00
Comprar -
Curso de CorelDraw X4
por R$ 79,90
Comprar -
Curso de Indesign CS4
por R$ 55,00
Comprar -
Curso de Fireworks CS4
por R$ 39,90
Comprar -
Curso de Dreamweaver CS4 Completo
por R$ 99,00
Comprar -
Curso de Photoshop CS4
por R$ 39,90
Comprar -
Curso completo de PHP
por R$ 99,00
Comprar -
Tableless – Padrões web
por R$ 39,90
Comprar -
Criando e gerenciando lojas virtuais com magento E-commerce
por R$ 80,00
Comprar -
Dreamweaver CS4 avançado com PHP e Mysql
por R$ 80,00
Comprar -
Curso de lógica de programação
por R$ 75,00
Comprar
Últimas atualizações
-
/CSS3
Utilizando Fontes estilizadas com CSS
-
Iluminação de Três Pontos com 3D Max – Parte 2
-
Curso de Magento lançado com promoção de 50%
-
/Java
Java para Web – Criando um CRUD – parte 4
-
/Java
Java para Web – Criando um CRUD – parte 3
-
Iluminação de Três Pontos com 3D Max – Parte 1
-
/PHP
Criando Newsletter – parte 3
-
/Java
Java para Web – Criando um CRUD – parte 2
28/04/09 às 14:13
NEm vi ainda mas ti amo!! to indo ver
28/04/09 às 14:45
Oi Blz
nao sei se e problema do meu pc, se e do video mas nao esto conseguindo ver o video
No meiu do video aparece ums quadrados com os outro videos feitos no passado
Assim que conseguir visualisar o video, comentarei
Abracos
28/04/09 às 15:39
valeu aí David
show de bola essa vídeo aula…
bem explicado, e o legal é que apesar de não ser fácil lidar com o IE 6, sempre existem algumas soluções…
nunca pensei que fosse tão simples, fazer desaparecer e aparecer um determinado elemento…
outra é o comentário condicional, muito legal essa parada…
faço votos que continue nos brindando com seus conhecimentos
28/04/09 às 15:40
Paulo Jorge, aqui tá aparecendo normal, tente esvaziar o cache do seu navegador, aperte CTRL + F5, ou tente visualizar em outro navegador.
28/04/09 às 15:51
Parabéns, muito legal a vídeo aula, eu sempre achei esse menu com sub-menu muito interessante.
28/04/09 às 17:42
Yahoooo!!
David quanto tu colocou a primeira video pensei que ia demorar mais pra postar outra mais pode continuar assim que a gente agradece ah pelo que tu falou loco em cima do posto a aula prometa vou baixar e assim que sobrar um tempo vejo ela e comento denovo aki
flw
(@_+) – ochii
28/04/09 às 18:40
E ai David tudo bem , parábens pela video aula e continue assim.
28/04/09 às 18:44
Show de bola essa aula.. Gostei bem.
Parabéns
28/04/09 às 18:49
Legal cara… valeU!
28/04/09 às 21:07
Excelente…
Mais uma vez, parabéns. Gostaria de ver algumas vídeo aulas sobre Criação de Layout em Tableless.
Abraço.
28/04/09 às 21:24
David CHC, por favor nunca mais deixe de fazer video-aulas, vc tem o dom cara, parabens!!!
28/04/09 às 21:28
valeu pela aula num sabia com fazia isso
28/04/09 às 21:49
Daniel, beleza?
Temos algumas aulas já prontas na categoria Tableless. Já deu uma conferida?
[]´s
28/04/09 às 23:49
David blz
obrigado pela dica, mas ja volto ao normal
deve ter acontecido algo com o meu navegador
obrigado mais uma vez e parabens pela video aula muinto showww
espero ver mais video aulas de voce
parabens e obrigado pela dica
Abracos a todos
29/04/09 às 1:27
vídeo aula sensacional show de bola…ahhhhhhhh Felipe quando é que vamos ter um novo desafio igual aquele de 1 ano do MX MASTERS ? aquele desafio acho que vocês descobriram novos talentos hein..t+++++
29/04/09 às 1:47
Aeww felipe add eu no msn querido faz tempo q add vc … joaocarlos.web@hotmail.com, o curso de wordepress show de bola, monta um de dreamweaver flash ou de illustrator, e aproveito tbm agradcer o david !! show de boal a aual tu tem uma paciencia rapaiz eu nao tenho nao hauhauhauha abração a todos e q Deus abençoe muito suas vidas !!!
29/04/09 às 5:49
Muito bom… Valew, David CHC.
29/04/09 às 9:27
Obrigado por todos os comentários, elogios, dicas. Como o Felipe Cardoso já disse, os comentários mostram se estamos conseguindo ensinar algo , e tbm motiva a gente fazer mais video aula, pq as vezes é complicado fazer devido ao tempo, mas sabendo q estamos indo pelo caminho certo, conseguimos sempre um jeitinho, rs.
29/04/09 às 11:31
Valew David….
Embora eu apanhe demais com css ta ai mais uma ferramenta que eu não conhecia… fera mesmo! valew
29/04/09 às 13:08
Mais uma aula show, adorei, parabéns, e cada vez mais tenho uma certeza, quanto mais eu aprendo mais eu percebo o quanto há para aprender.
Valeu Equipe MX.
29/04/09 às 16:28
Show de bola hein =]
Essa eu nao conhecia
Parabéns
Vlw
29/04/09 às 22:21
Muito boa video aula a um tempo atrás eu estava procurando como fazer sub menus eu aprendi a fazer com spry que fica com efeito muito bacana mais tambem e muito bom saber assim pois dar para ter noçao dos codigo e aprender mais hehe boa video aula
29/04/09 às 23:08
Fala David blz…
Show essainformação, mas fiquei boinando nos sites que vc indica, se puder informar o link ficarei grato.
Obs: Gostaria de saber se quando vc vai validar o codigo, vc utiliza algum software ou é algum site tbem, se for site indique o link.
Abraços
30/04/09 às 1:38
show de bola a aula o cara to fazendo um site aqui e ja estava pensando em como fazer um menu bacana mas sem usar imagem so com css mesmo e voce ja deu uma solução valeu mano obrigadão espero que voce continue sempre com video-aulas bacanas assim foi show objetivo e bem explicado ^^v
30/04/09 às 14:36
Nossa! Dessa maneira fica muito mais pratico…
David ficou simples e bem feito, da ate pra fazer algumas combinações
Parabéns!!
30/04/09 às 18:40
Sergio Araujo, realmente eu esqueci de falar sobre eles, para validar o CSS: http://jigsaw.w3.org/css-validator/ e para validar o HTML http://validator.w3.org/ . Eu utilizo um plugin do firefox chamado Web Develeper, tem varias funcionalidades, uma delas q ele link direto com o validadores.
Andre , Leonardo™ realmente, com CSS sua imaginação é o limite (fora os bugs do ie6, rs).
30/04/09 às 20:13
*o nome do plugin: Web Developer
30/04/09 às 20:34
muito bom!!!!!!!
!!!!!!!!!!!!!!!!!!
1/05/09 às 1:05
Meu..OO ótima video aula.. =]
Parabéns… tirou muitas dúvidas que eu tinha..
Abraço.
1/05/09 às 2:40
Vou dar uma olhada em todas as video-aulas de Tableless, fazer uma maratona sem tabelas, ahahahha.
Abraços!
1/05/09 às 18:20
oi adorei a video aula, porem eu sou novo e so consegui a 1 parte na hora de zerar o html ele fez porem quando eu aperto o f12 aparece como eu escrevi o codigos .. quero aprender a fazer esses menus..
2/05/09 às 11:08
Simplesmente perfeito!
Principalmente esse teste que resolve o bug
do ie 6. Aplausos de pé para o David
Abs
2/05/09 às 21:48
Show!!!
2/05/09 às 22:46
Muito bom mesmo acabei de testar aqui funcionou blz. grande abraço e continuem assim.
4/05/09 às 23:56
Mais uma vez galera do MXmasters parabéns esse código me salvou em uma dúvida com wordpress. Funciona perfeitamente…
12/05/09 às 10:20
Excelente tutorial, estou apredendo e muito…
só tive um problema o efeito não está funcionando do Firefox, já tentei de tudo procurei no google algo a respeito e ainda não consegui solucionar…
estou com esse problema em outro projeto que estou criando no IE tudo certinho quando mando para o FF já fica tudo zuado…
se puderem me ajudar serei muito grato.
12/05/09 às 12:30
Tava a procura disso, mas os tutoriais q achei sempre usava javascript. Apesar dos problemas no ie 6, desse jeito é mais prático, e o resultado mto bom.
Excelente video aula.
14/05/09 às 10:10
Alex, dá uma olhada no codigo q postei no forum, assim vc pode analisar melhor:
http://www.mxmasters.com.br/comunidade/viewtopic.php?f=51&t=1546
15/05/09 às 18:47
Olá… gostaria de parabenizar novamente toda a equipe ai do mxmasters… principalmente o felipe cardozo q eh muito atencioso com todas nossas duvidas aki da comunidade e tbem ao david ai com mais essa video aula super importante pra kem ta afim de desenvolver algo em css.
Gostaria tbem de sugerir para falar um pouco mais sobre ul li, pois eu sinceramente estou um pouco confuso sobre elas…
principalmente quando se usa uma nova ul dentro da li (no caso os sub menus), achei um pouco cansativo, então fica ai uma dica
Vlw ai galera
\\JP
20/05/09 às 9:42
‘ show de bola o site de vocês, sinceramente o melhor! ajuda dmais! parabens pelo tuto ae brother!
=]
20/05/09 às 11:47
aff cara eu tava seguindo td blz dai na metad do video +/- dá como se ele tivesse acabado ‘-’.
na hr q vc ia falar como faz pra passa o mouse e os itens aparecerem –’
21/05/09 às 8:51
Joao Sousa limpar o cache do navegador, apertando CTRL + F5, e depois tente assistir a video aula
24/05/09 às 1:02
muito bom esse tutorial
tem uns 4 meses que eu estou atrás de um tutorial desses que explica passo a passo como faz o menu
25/05/09 às 6:58
David aqui ok, mas quando clico no link a:visited me aparece umas borda serrilada não consigo tirar parabens pela video aula
25/05/09 às 12:49
Otima aula, ainda por cima q eu to começando a aprender agora……
kkkkkkkkkkkkk
Cara eu só gostaria de uma informação onde vc conseguiu o ie teste?
Pq isso é muito util pra gente né…….
kkkkkkkkkkkkkkk
Espeero a sua resposta e agradeço antes de mais nada……
kkkkkkkkkkkkkk
25/05/09 às 19:48
Ricardo Politi, para remover esse pontilhado vc colocar assim:
a{
outline:0;
}
Luiz Cezar, aqui tá o link do programa
http://www.my-debugbar.com/wiki/IETester/HomePage
Vc pode tbm baixar do Baixaki, basta pesquisar por IETESTER
27/05/09 às 8:19
Ai David vc é bom mesmo aqui ok sem serrilhado obrigado e sucesso
30/05/09 às 10:41
Além do menu você você resolveu os problemas de compatibilidade o que ajuda em vários casos…melhor impossível…
Parabéns à você e ao MX Masters!!
2/06/09 às 12:37
Cara valeu mesmo to baixando agora mesmo, valeu pela atenção………….
2/06/09 às 15:52
como colocar o menu e sub menu no site no lugar que eu quiser como faço isso!
2/06/09 às 16:06
David muito obrigado pela vídeo-aula muito boa,vc está de parabéns!! Mas no meu caso eu nao consegui fazer com que o meu menu ficasse com a altura(Parte da cor) igual o seu menu, queria aprender deixar ele arrendodadinho e com outros efeitos, se vc puder enviar um email onde eu posso resolver o meu problema, agradeceria muitaooo, vlew!
2/06/09 às 19:28
jackson, esse menu é na horizontal, o ideal é vc construir um site em tableless, veja as video aulas do Felipe Cardoso, mini-curso, caso vc ainda tenha dificuldade a como criar um site em tableless. Assim vc saberá posicionar.
Bruno, eu postei o codigo do menu lá no forum, clique na descrição da postagem – Download dos arquivos utilizados.
Sobre os efeitos, depende q efeitos q vc quer fazer, qualquer coisa posta lá no forum em tableless, e se possivel colocar uma imagem pra ficar mais facil de entender.
3/06/09 às 8:59
Muito legal sabia do uso o * mais nao que dava pra colocar na frente ul*{} e pegar todos os filhos muito boa a dica, muito boa da didatica da aula vlw mesmo
7/06/09 às 11:54
ond tem para baixar esse programa IE Teste
8/06/09 às 21:07
Michel, eu postei alguns comentarios acima onde baixar o IETESTER, mas tá o link : http://www.my-debugbar.com/wiki/IETester/HomePage
16/06/09 às 10:40
Não apareceu nada eu não sei o que eu fiz de errado, conferi os códigos e tudo.
16/06/09 às 22:40
E ai cara, blz. Sou daqui de São Paulo e desde já que te dar os parabéns pelos videos “show de bola”. Cara não to conseguindo fazer os efeitos que estão na video-aula. O que será que acontece? Como faz pouco tempo que comecei a estudar web, não tenho muita experiência. Estou utilizando o bloco de notas.
Me de algumas dica se possivel….
Valeu
17/06/09 às 15:11
Claúdia, seria interessante vc postar o seu codigo, coloque lá no forum q poderei ver o q aconteceu. Na maioria dos casos q tá dando errado, é na hora de criar o xhtml, tem q ver o submenu tem q tá dentro de uma li. Mas pode lá no forum, q poderei ver o q pode tá ocorrendo
Fábinho, dá uma olhada no xhtml , na hora de criar a estrutura, pq na maioria dos casos q vejo com duvidas em relação a video aula é nesse requisito. Vc tá fazendo da melhor maneira pra aprender html, é com bloco de notas, mas aconselho vc usar o Notepad++, pq o codigo fica colorido, e mais facil de vc identificar. Qualquer coisa, posta o seu codigo lá no Forum. E veja tbm o código q postei no forum, o link tá na descrição da video aula.
18/06/09 às 10:40
Cara ótima video aula, mas estou querendo um menu desse só que vertical, como faço?
E outra esse menu ai ser um sub-menu na página como uso a id atribuida à ele para o estilo só susrtir resultado sobre esse sub-menu.
Obrigado, grande abraço.
João.
22/06/09 às 0:03
O vídeo está com problemas.
22/06/09 às 8:54
João Marcelo, seria a mesma coisa na vertical, o q iria mudar é a largura definida na ul#menu, e no ul#menu li ul => no top vc colocaria 0, e no left a largura q vc definiu para ul#menu
Para vc estilizar apenas o submenu, é bem facil, vc não precisa atribuir um id, vc vai fazer assim:
ul#menu li ul => ataca a ul
ul#menu li ul li => ataca a li
ul#menu li ul li a => ataca o a (links)
Dessa maneira vc pode atacar os elementos do submenu
3/07/09 às 11:48
Opá! Muiito boa a aula…
Mais o menu rola para baixo tem como ser feito e rolar para cima?
Quem pode me dar uma mão?
3/07/09 às 18:44
@Fabricio Azor, basta no top do #menu li ul, colocar um valor negativo
7/07/09 às 12:07
Para eu colocar o menu mais para baixo numa pagina e seria so acrescentar no css na
ul {
height:100px;
}
algo assim??
e que tipo coloquei e nao ta rolando ….
Obrigado..
Excelente video aula… obrigado.
7/07/09 às 12:14
@Fernando, basta colocar assim:
ul#menu{
margin-top:15px;
}
7/07/09 às 13:17
Olá David CHC!
Sou novo no fórum e estou adorando as video aulas de tableless pois estou estudando muito.
Com a presente video aula, surgiu um dúvida que não estou conseguindo resolver. Primeiro: do jeito que você fez esse submenu vertical, daria pra fazê-lo na horizontal? Algo como o menu e o submenu na horizontal? Segundo: Se sim, daria pra me dar uma luz ai porque não estou conseguindo fazer.
Desde já, agradeço.
Abraço!
7/07/09 às 13:35
@Eder Gasparassi, é possivel sim, basta vc em vez de colocar position:relative na li e colocar na ul#menu, depois remover clear:both e float:none colocados para ele ficar na vertical.
7/07/09 às 14:29
David, obrigado mais acho que eu não me espressei direito. Eu queria, se possível, criar um menu parecido com o rapidshare (me desculpem se estou quebrando alguma regra), com o menu e o submenu na horizontal.
Abraço!
7/07/09 às 14:34
@Eder Gasparassi, para fazer dessa maneira, basta apenas acrescentar uma largura maior a ul do subitem, e colocar float:left na li , na li a, no subitem
28/07/09 às 0:00
Como que centraliza esse menu no meu layout?
tenho no meu layout
28/07/09 às 8:29
@sl, utilize margin:0 auto; ul#menu, mas tem q definir uma largura
31/07/09 às 1:39
Muito bom este tutorial, aposto que ajudou muita gente.
Bom, eu gostaria de saber como fazes este mesmo efeito só que em botões de imagens no Dreamweaver.
Crei um layout e um menu na horizontatal no Fireworks, adicionei um hover em cada opção do menu no próprio Fireworks. Fatie o layout, exportei, e logo importei para o Dramweaver.
Bom, agora eu gostaria de fazer submenus nas opções existente no menu, mas não sei como, pois os mesmos são imagens.
Se pudesse me ajudar de alguma forma eu agradeceria muito!
Muito grato galera do MXMASTERS!
André
31/07/09 às 16:30
Bacana cara, parabéns!
A habilidade que vc tem com o CSS é bem legal!
Continue publicando mais videoaulas!
Abs
31/07/09 às 21:18
@André, vc pode definir um class para os itens principais, e assim colocar a imagem via css para da item.
1/08/09 às 17:51
Muito obrigado pela Dica David CHC, mas já segui outro tutorial de vocês, sobre Behaviors (comportamentos) trabalhando com Layers e deu certo.
Mas ainda irei querer aprender a trabalhar desse maneira com CSS.
Abraço!
Muito grato!
André
4/08/09 às 9:47
opa, daew,
seguinte, fiz o menu como no exemplo e customizei as cores. Na parte logo abaixo do menu vem o conteudo do site que fica dentro de outra div. O que acontece é que quando coloco esta div abaixo, os subitens do menu ficam doidos. Eles até descem só que o background deles some e quando vou colocar o mouse em cima deles no “hover” eles desaparecem.
Alguem pode me ajudar.?
Grato,
Daniel
4/08/09 às 10:12
@Daniel AV, coloque nessa div depois do menu, clear:both;
4/08/09 às 10:59
Ok vou tentar,
obrigado
13/08/09 às 11:28
Olá Davi. tenho uma questã para discutirmos..
O emnu funciona quase 100% comigo, pq?
Quando passo o Mouse em cima do link principal e o mesmo rola as opções, elas ficam meio “malucas” quando vou clicá-las… elas aparecem e desaparecem algumas vezes até eu conseguir que elas fique estáticas..
Como faço para resolver esse problema??
13/08/09 às 12:37
@Flavio, isso ocorre quando vc dá uma espaçamento do submenu (top), uma pouco maior, tente diminuir um pouco top e veja se isso resolve.
19/08/09 às 12:07
Muito show estava mesmo precisando
de uma video aula assim, vlw parabéns
26/08/09 às 18:10
como é que eu faço um menu desse na vertical, é que toda vez que eu vou fazer ele na vertical da erro no ie 7, e já tentei todas as dicas do vídeo ai e outros que procurei na net e não consegui, será que vc podia me ajudar David CHC?
há e a vídeo aula é muito show cara!
26/08/09 às 18:29
@josenildo, qual o erro q tá dando?
27/08/09 às 21:32
David CHC, ta dando erro no menu e sub menu quando passo o mouse em cima, o cursor só funcio na 100% qundo está em cima do texto e isso tmb no sub menu e eu declarei o display como block, e no sub menu tmb acontece que só funciona o primeiro link do sub menu quando passo o mouse em cima dos outros o sub menu simplesmente some, no firefox funciona 100% mas no ie7 é isso que eu falei ai.É meio ruin de explicar o que ta acontecendo mas vc pode me ajudar?
28/08/09 às 9:20
@josenildo, no menu vertical, coloque no left do submenu sempre a largura da ul#menu – 1, exemplo, se for 150px, o left vc coloca 149px;
28/08/09 às 13:48
David CHC, eu ja tinha feito isso,estou enviando o código css pra vc ver como ele ta ai.
ul{margin:0; padding:0; list-style:none; width:150px;}
ul li{position:relative;}
li ul{position:absolute; left:149px; top:0; display:none;}
ul li a{display:block; text-decoration:none; background-color:#009999; margin-bottom:2px; padding:5px; color:#FFFFFF;}
li:hover ul{display:block;}
eu não fiz dentro de uma div ta tudo em lista msm.
6/09/09 às 3:58
Primeiramente show sua video aula… O bom de fazer isso q o cara aprende mesmo…
Eu queria saber se daria para fazer esse menu (css) com um menu q fiz no photoshop. Pois eu queria aproveitar o efeito q o css dá…
Obrigado ae…
9/09/09 às 9:25
@Neo*, vc pode usar imagens tbm, basta declarar no css. Se usas imagens são diferentes para da link, vc pode declarar um id ou class para esses links, e ai atribuir a imagem no css
14/09/09 às 14:04
Meus parabens David, ficou show de bola e eu consegui fazer direitinho xD
Mas eu queria saber como poderia fazer para criar um sub-menu do submenu, tipo tenho uma categoria Produtos, que tem uma sub-categoria minerais, que é dividido em linha amarela e linha verde!
Ai como poderia ser feito para quando eu passaceo mause sobre o sub-menu minerais abrisse do lado direito as duas linhas??
Abraços
15/09/09 às 10:43
Bom dia David CHC.
Estou desenvolvendo um menu com a ajuda dessa tua vídeo aula mas estou com um problema que talvez você possa me dar alguma dica de como resolver.
Vou postar o código css, o html e o exemplo hospedado para você dar uma olhada.
Código html:
Untitled Document
MENU 1
MENU 2
SUBMENU 2
SUBMENU 2
MENU 3
SUBMENU 3
MENU 4
SUBMENU 4
MENU 5
SUBMENU 5
SUBMENU 5
SUBMENU 5
MENU 6
Código CSS:
*{margin:0; padding:0;}
body {
margin:0;
padding:0;
background: #333333;
font: 0.75em “Trebuchet MS”, Arial, Helvetica, sans-serif;
color:#ccc;
line-height: 1.4em;
}
.content {
background: #FFFFFF;
color:#808080;
margin: 0 auto;
padding: 0;
width: 800px;
border-left:6px solid #000;
border-right:6px solid #000;
border-bottom:#f00;
}
.menu {
height:65px;
background:transparent;
position:relative;
font-size:14px;
z-index:100;
margin:0;
padding:0;
}
.menu .table {
display:table;
margin:0 auto;
}
.menu .select,
.menu .current {
margin:0;
padding:0;
list-style:none;
display:table-cell;
}
.menu li {
margin:0;
padding:0 2px 0 2px;
height:auto;
float:left;
}
.menu .select a {
display:block;
height:30px;
float:left;
font-weight:bold;
background:transparent;
padding:0 5px 0 5px;
text-decoration:none;
line-height:30px;
white-space:nowrap;
color:#000;
border-bottom: 4px solid #40cb25;
border-left: 2px solid #ffffff;
border-right: 2px solid #ffffff;
}
.menu .select a:hover,
.menu li:hover a {
color:#999;
text-decoration:none;
border-bottom: 4px solid #4fb6e5;
}
.menu .select a b{
font-weight:bold;
}
.menu .select_sub {
display:none;
}
.menu .sub {
display:table;
margin:0 auto;
padding:0;
list-style:none;
}
.menu .sub_active .current_sub a,
.nav .sub_active a:hover
{
background:#f00;
color:#2b3238;
}
.menu .select :hover .select_sub,
.menu .current .show
{
display:block;
position:absolute;
width:100%;
top:30px;
background:transparent;
padding:0;
z-index:100;
left:0;
text-align:center;
}
.menu .current .show {
z-index:10;
}
.menu .select :hover .sub li a,
.menu .current .show .sub li a {
display:block;
float:left;
background:transparent;
padding:5px 5px 0 5px;
margin:0;
white-space:nowrap;
border:0;
color:#0061C1;
font-size:13px;
font-weight:bold;
}
.menu .select .sub li a {
font-weight:normal;
color:#000000;
}
.menu .select :hover .sub li a:hover,
.menu .current .sub li a:hover{
visibility:visible;
color:#4fb6e5;
text-decoration:underline;
}
/* Micox Pseudo-class-css2 to IE (MXPC). Activate .hover and .first-child in IE 6 */
* html * { color: expression( (function(who){ if(!who.MXPC){
who.MXPC = ‘1′;
if(who.nodeName != ‘A’){
who.onmouseenter=function(){ who.className += ‘ hover’};
who.onmouseleave=function(){ who.className = who.className.replace(‘ hover’,”)}; }
(who==who.parentNode.firstChild) ? who.className += ‘ first-child’ : ” ;
} } )(this) , ‘auto’) }
Endereço do exmplo:
http://caic.site40.net/index.html
Abraço a todos.
15/09/09 às 10:49
Desculpe, esqueci de falar do problema: é que no firefox e no ie8 fica centralizado como eu quero e na ie7 e não consigo centraliza-lo.
Abraço.
17/09/09 às 15:17
Fiz esse submenu e coloquei logo a baixo uma div que seria o corpo, so que o submenu nao aparece é como se o submenu aparece-se em baixo da div.
18/09/09 às 11:50
@Rafael Pessoa, na hora de construir o html ele será a mesma coisa, isso significa q vc quiser colocar mais um subitem, vc terá q colocar dentro da li do subitem.
HTML (lembrando q troquei o sinal de maior e menor pelos colchetes para não ser interpretado no wordpress)
[ul id="menu"]
[li][a href="#"]Home[/a][/li]
[li][a href="#"]Produtos[/a]
[ul]
[li][a href="#"]Informática[/a]
[ul]
[li][a href="#"]Item 1[/a][/li]
[li][a href="#"]Item 1[/a][/li]
[/ul]
[/li]
[li][a href="#"]Eletronica[/a]
[ul]
[li][a href="#"]Item3[/a][/li]
[li][a href="#"]Item4[/a][/li]
[/ul]
[/li]
[/ul]
[/li]
[li][a href="#"]Servicos[/a][/li]
[li][a href="#"]Contato[/a] [/li]
[/ul]
Agora vou posta o CSS, de um menu em vertical, pq fiz aqui rapidinho
ul{list-style:none; margin:0; padding:0}
#menu{width:140px; background:#f5f5f5; }
#menu li{
position:relative;
border-bottom:1px solid #ccc;
}
#menu li a{display:block;}
#menu li ul,
#menu li ul ul,
#menu li:hover ul ul,
#menu li.hover ul ul{
display:none}
#menu li ul{
position:absolute;
top:0;
left:139px;
width:140px;
background:#f5f5f5;
}
#menu li:hover ul,
#menu li li:hover ul{
display:block;
}
O q terá a mais é no sentido quando passar o mouse na primeira li, pq se vc terá q fazer o subsub menu não aparecer .(Lembrando q o script só testei no Firefox, pra ao IE6, tem q usar a solução q coloquei na video aula)
Só uma aviso para que for Comentar.
No Mxmasters não está tendo atualização de video aulas, isso pq temos o Video Aulas Brasil onde as video aulas estão sendo publicadas, está tendo uma variedade enorme de temas no Video Aulas Brasil, q tenho certeza irá agradar a todos. Então, caso for perguntar alguma coisa sobre as video aulas, peço que façam no Video Aulas Brasil (http://www.videoaulasbrasil.com.br), pq o tempo de resposta será menor. Eu darei prioridade apenas os comentários do Video Aulas Brasil, pq vai fica mais fácil e rápido de responder.
Agradeço a Compreensão de Todos
David CHC – Administrador do Video Aulas Brasil
18/09/09 às 12:10
@Eder Gasparassi , para centraliza-lo , nesse caso, vc vai ter q definir uma largura para ul q engloba o todo o menu, e colocar margin:0 auto; pra centralizá-lo.
18/09/09 às 12:46
@Rubens, se vc estiver usando uma div apos, declarado algum position, vc tera q declarar o submenu q está o position:absolute, um z-index:999; (coloquei alto mesmo pra não ter problemas com outros elementos)
18/09/09 às 12:55
Só uma aviso para que for Comentar.
No Mxmasters não está tendo atualização de video aulas, isso pq temos o Video Aulas Brasil onde as video aulas estão sendo publicadas, está tendo uma variedade enorme de temas no Video Aulas Brasil, q tenho certeza irá agradar a todos. Então, caso for perguntar alguma coisa sobre as video aulas, peço que façam no Video Aulas Brasil (http://www.videoaulasbrasil.com.br), pq o tempo de resposta será menor. Eu darei prioridade apenas os comentários do Video Aulas Brasil, pq vai fica mais fácil e rápido de responder.
Agradeço a Compreensão de Todos
David CHC – Administrador do Video Aulas Brasil
18/09/09 às 13:13
aew cara valeu mesmo vei
brigadão
Abraços…………….
5/10/09 às 21:13
Para que se dar tanto trabalho para fazer funfar o css em um navegador defasado!?
Esse povo que se vire..
Firefox FTW! xD
5/10/09 às 21:43
@Qone, isso seria ótimo se fosse realidade, mas quando trabalha onde os clientes de seu cliente ainda tendem a usar, vc não pode descartar. E ainda o IE6 é bastante usada por grandes empresas em sua intranet, infelizmente, então sempre é bom saber contornar essas deficiencias do IE6.
18/10/09 às 19:38
por favor me ajude. fiz uma lista em css. Mas como faço para adicionar mais menus dentro deles? Se precisar eu te mando o arquivo ou codigo html. Valew!!!!
18/10/09 às 19:48
@Daniel, aqui postei um exemplo como pode ser feito com sub-sub-menu (2 subniveis). O codigo tá comentado.
http://pastebin.com/f61e12d9
5/11/09 às 19:38
Bom aula bem explicativa e muito ótima também estar de parabéns….
Tenho uma dica também de video aula : tipo no topo da pagina quando se passa o mouse nas figuras e elas vem para frente voces poderia montar uma aula de como se faz isso e se este mesmo efeito tem jeito de aplicar ao menu e submenu.
5/11/09 às 19:48
@Reginaldo, com a opção de menu é bem tranquilo, mas com submenu nunca tentei, mas agora vc me deixou curioso, e vou tentar , rs.
14/12/09 às 20:57
Aiiii meu deusooo … eu estava atrás disso a um tempão ..vlw pelo videotu e até breve!
31/12/09 às 1:00
Muito bom esse menu, gostei. Valeu David pela aula.
31/12/09 às 18:16
olá, muito obrigado por mais uma excelente aula, sempre acompanho as aulas no portal, parabens pelo novo portal também.
sobre a aula do submenu, consegui fazer funcionar no meu pc. agora como seria para inserir um item a um submenu:
tipo:
produtos (tiulo)
> sites (sub menu)
. dinamicos (item do submenu – como inserir?)
. em flash (item do submenu – como inserir?)
> cartoes (sub menu)
> panfletos (sub menu)
ps. no html eu consegui, mas nao fazer o css funcionar ao passar o mouse sobre o submenu mostrar o item do submenu, se puderem ajudar agradeço bastante estou a um tempão querendo descobrir isto.
31/12/09 às 18:26
@cidicley, eu fiz um tutorial para o site ogordo.com sobre colocar mais um nivel, vc pode dá uma olhada, q vai te ajudar:
http://ogordo.com/sub-menu-com-3-niveis-com-css/
15/01/10 às 10:44
Olá, Bom dia!
Gostaria de tirar uma dúvida:
O fato de o meu dreamweaver ser mx faz diferença na visualização?
Porque copiei exatamente como o seu, mas não consegui visualizar da mesma forma.
15/01/10 às 11:01
@Debbie, se você visualizar no modo Design, ele terá diferenças, mas nunca faça isso, visualize sempre no navegador, e nunca pelo Dreamweaver, não importando a versão, assim você saberá o realmente comportamento do código.
17/01/10 às 19:29
Olha o meu não ta sendo validado não sei por que. olha isso, vou postar aqui o download para ver:
http://www.4shared.com/file/199744445/3da172d3/index.html
/\Index.
\/CSS.
http://www.4shared.com/file/199744967/e941e22e/css.html
img> http://www.4shared.com/file/199747092/3d79e0f/img.html
Qualquer coisa manda resposta pelo meu e-mail.
17/01/10 às 19:41
@ReykAlencar, me informe a mensagem de erro, é mais rápido.
3/02/10 às 17:37
Olá,
parabens pela video aula, muito bacana!!
Gostaria de saber como fazer o submenu abrir para a esquerda e não a direita…Tem como??
Abraçao
3/02/10 às 18:29
@Anderson coloque o valor do left negativo, exemplo:
left:-150px;
6/02/10 às 10:53
@David
Valeu a dica, só vi seu recado agora… Vou testar!!
Abraço
15/02/10 às 12:12
ola, muito boa a video aula gostei msm e aprendir. eu quero saber de uma coisa: é verdade se eu anuciar meu site no adsense eu posso ganhar dindi por cada pessoa que clicar? prq vem pedindo numero de conta do banco e outros? e eu queria saber se é verdade. vlw
15/02/10 às 12:46
@Nightwolf, é verdade, a cada click no seu anuncio no seu site, vc recebe , não sei valor. Quando vc completar o valor estipulado, e ai vc recebe o dinheiro. Mas pra vc receber algo, seu sites tem q ter muitas visitas.
15/02/10 às 14:43
Muito boa a vídeo aula. Parabéns! Para não perder o costume, me dá uma ajudinha extra? Como faço para que a cor do menu pai fique diferente (mantenha-se marcada) quando estou em um sub-menu?
15/02/10 às 15:55
@Fabiano, definir qualquer nivel, basta especificar, exemplo:
Defino por padrão os links com cores de cinza
ul#menu li a{background:#ccc}
defino os links do submneu como preto.
ul#menu ul li a{background:#000;}
19/02/10 às 12:50
Olá David sou novato em css , não intendo quase nada eu assisti sua video aula mas não consegui entender as parte que você pula para outras linhas ” tipo aperta enter quando abre {
} desse geito eu não entendi quase nada disso eu gostaria que você fazia uma aula de css para iniciante :/ obrigado se puder me responder
19/02/10 às 13:09
@Rodolfo, vá na seção tableless, q existe video aula básicas, vc terá terá uma noção melhor pra acompanhar outras aulas.
20/02/10 às 15:51
Ótima vídeo aula, muito bem explicada e datalhada. Me animuo a comprar o curso de tableless oferido pela MXMasters. Parabens!!!
20/02/10 às 16:25
Obrigado @Douglas
23/02/10 às 13:14
otima video aula.
apenas um detalhe: se vc arrumar o menu para ie 6
ele ficara com um bug no chrome.
23/02/10 às 14:34
@jony, quando fiz a video aula, eu testei ela no chrome tbm, e tava ok.
26/02/10 às 8:42
David,
Show de bola a video aula.
Mas tive um probleminha no display:none ao esconder os submenus, ele não aceita.
O que poderia estar acontecendo?
Desde já agradeço.
26/02/10 às 8:46
@Diego, provavelmente deve ser na construção do html, a nova lista ( o submenu), tem q esta dentro da li
26/02/10 às 9:06
David,
Estou fazendo os mesmos passos da tua video aula.
A única coisa que fiz diferente foi colocar submenu apenas no primeiro link do menu.
Isso não deveria interferir em nada certo?
26/02/10 às 9:16
@Diego, coloca o codigo HTML e o CSS aqui : http://www.pastebin.com/, e depois me manda o link
26/02/10 às 9:21
David,
Segue o link: http://pastebin.com/ZQuTbeqk
Agradeço a tua atenção.
26/02/10 às 9:23
David,
Esqueci de mencionar outras alterações como background-image que coloquei no menu e a largura de 729px.
Mas acredito que nada disso tenha influenciado para que não aceitasse o display:none
26/02/10 às 9:25
@Diego, seu HTML está errado, como falei anteriormente, o certo seria assim:
http://pastebin.com/TgvNjWkQ
26/02/10 às 9:36
David,
Falta de atenção a minha.
Valeu pela atenção e parabéns pela video aula.
Grande abraço.
26/02/10 às 9:49
David,
Desculpa encomodar denovo, estou começando no CSS.
Queria que minha imagem de fundo do menu repetisse 729px.
Onde eu insiro o repeat-x ?
26/02/10 às 10:07
@Diego, vc pode inserir tanto na propriedade no background, exemplo:
background:#fff url(../imagens/imagem.jpg) repeat-x center top;
OU vc pode declarar separadamente
background-repeat: repeat-x;
26/02/10 às 10:15
David,
Não funcionou, continua no mesmo tamanho porém o fundo desaparece.
26/02/10 às 12:22
@Diego, para repetir na horizontal, a propriedade é background-repeat.
8/03/10 às 18:59
Eu queria saber como eu faria p/ menu ficar na vertical com o submenu aparecendo no lado?
Eu tentei so que, n consigo colocar o submenu do lado e quando abre o sub menu ele desloca toda a parte de baixo.
Se possível queria saber como solucionar este erro.
8/03/10 às 19:24
@Péricles, define uma largura para ul#menu, e retire o float:left e display:inline. No Submenu, no top coloque 0, e no left a largura q vc definiu no ul#menu,
8/03/10 às 19:46
o sub menu ainda n esta aparecendo do lado
http://pastebin.com/P7YfJBvB
8/03/10 às 20:08
@Péricles http://pastebin.com/bycgHwU7
27/04/10 às 11:12
[...] LINK: http://www.mxmasters.com.br/tableless-css/tableless-menu-dropdownsubmenu/ [...]
7/05/10 às 1:47
Puxa vida meu amigo, pode me dar uma dica ?
Pois bem…
Como faço pra fazer esse efeito aqui, de passsar o mouse em cima e mudar ?
http://www.dolcegabbana.com/
Eu pensei que fosse só sobrepor uma imagem na outra, fiz isso lá no fireworks mas quando vou passar pro css, pronto, não vai.
Tendeu ?
Pergunto se dá pra fazer com o “a:hover” porque repara no site, que basta passarmos o mouse em cima que muda a imagem..o fundo, e coisa e tal…
Valew, espero resposta..
free classified
7/05/10 às 10:15
@Pedro Lúcio, é utilizando CSS Sprite, q consiste em ter 2 estados diferente na mesma imagem, dai só mudando posicionamento dela. E para fazre o efeito, ele utiliza o jQuery. Olhando no código fonte vc consegue ver mais ou menos como foi feito.
Veja uma imagem:
http://www.dolcegabbana.com/img/bannerDG.jpg
29/05/10 às 9:25
Achei muito bom o tutorial, mas gostaria de saber como fazer um submenu, DENTRO de um submenu.
29/05/10 às 10:07
@Giovana, pensando nisso eu fiz um tutorial como criar com 3 niveis. Dá uma olhada:
http://ogordo.com/sub-menu-com-3-niveis-com-css/
29/05/10 às 12:56
David, achei seu outro tutorial muito bom. Mas o que eu quis dizer, é, por exemplo, eu criei um submenu, e criei um outro submenu dentro dele, mas eu só quero que esse submenu apareça quando eu passo o mouse em cima. Há algum jeito?
29/05/10 às 13:02
@Giovana, então no tutorial q te passei, está nesse formato:
- Menu
– SubMenu
-Sub-Sub-Menu
Você vai querer que tenha mais niveis?
Esse é o resultado final:
http://www.ogordo.com/exemplos/menu-nivel/
29/05/10 às 17:42
@David, consegui fazer o que eu queria com aquele outro tutorial. Mas como deixo o menu vertical, na horizontal?
29/05/10 às 18:18
@Giovana, vc vai fazer a mesma coisa dessa video aula, vai dá um float na li e no a . E nos subitens, definir uma largura para ul.
Caso queira na horizontal e vertical, tem um tutorial do meu amigo Thiago Retondar, que está no site ogordo.
http://ogordo.com/menu-com-submenus/
12/06/10 às 0:35
Fantástica video aula, parabéns
1/07/10 às 6:35
Excelente VA!
Gostaria de perguntar e sugerir:
é possível configurar através de css para que o menu apareça em cascata gradativamente, estilo o menu usado na barra abaixo do topo aqui do MXMasters?
eu ja via um menu em flash que fica no meio da tela (corpo) em que o usuário passa o mouse em cima da aba e esse menu abre ocupando uma boa parte do corpo do site, exibindo uma apresentação (uma imagem por exemplo)e só fecha quando o usuário passa o cursor sobre outra aba do menu, as abas ficam na vertical, como livros em uma prateleira, mas recentemente vi isso no site da nasa http://www.nasa.gov/ , só que na horizontal, gera um efeito incrível e pode ser usado de diferentes maneiras, olhei o código fonte e imagino que seja feito em js. há alguma maneira de se fazer usando css?
no site da nasa tb tem um exemplo do menu em cascata estilizado.
se puderem me passar as referências específicas para eu poder estudar essa técnica sem ser em java (sou iniciante e estou focado em HTML, CSS e PHP de início), agradeço.
fica aí tb dicas para vídeo aulas.
abraço!
1/07/10 às 6:45
quanto aos bugs do IE6, realmente, acabei de instalar aqui o IETester (recomendo a todos que ainda não o tem), e descobri que no IE o menu ficou excelente, sem problemas, mas o box com formulário de login tava todo bixado, e em cada versão o erro aparecia de uma forma diferente. Eu estava usando até agora somente o Opera e Chrome e estava uma beleza, o triste é saber que a maioria dos usuários ainda estão viciados nessa naba que é o IE. espero que essa próxima versão tenha mudanças significativas.
1/07/10 às 13:28
@jean, no caso seria criando um formulário de contato, q estaria dando diferença? NO caso do menu, para criar esse efeito só usando Javascript, veja a seção AJAX tem aula sobre efeito acordion, q seria esse efeito q vc quer.
2/07/10 às 21:11
se refere ao erro que relatei? não não, é na alocação do espaço em tela pra área onde fica a validação de email e senha pra área restrita, eu copiei o “box” todo de uma outra página e coloquei nessa, acabou dando conflito entre a folha de estilo usada no menu e a do sistema de login (creio eu), mas não é nada com o que foi passado aqui e sim a minha tentativa de gambiarra. vou refazer detalhe por detalhe. mas obrigado.
aproveitando a conversa, gostaria de saber sua opinião de quais são os sites que, na atualidade representam o “supra sumo” do desenvolvimento no mundo.
vou conferir a sessão de AJAX, obrigado!
3/07/10 às 15:38
@jean, ah tá. Dá uma olhada na video aula sobre criar um formulário de contato, pq pode te ajudar no formulário de login. Sobre os sites sobre desenvolvimento, acho que qualquer resposta que eu der vai ser falha. Pq cada site tem uma proposta diferente, uns vão para o foco de ensino passo-passo, outros vão para o conceitual, e outros para dicas, e assim vai. E fora os assuntos abordados. Eu posso falar alguns sites q gosto de ler e pesquisar:
http://www.tableless.com.br
http://www.maujor.com
http://www.pinceladasdaweb.com.br/blog/
http://www.imasters.com.br
http://www.devshed.com
http://www.smashingmagazine.com (esse tem sempre novidades)
Vou puxar sardinha pra nosso lado, rs.
http://www.mxmasters.com.br
http://www.videoaulasbrasil.com.br
Lembrando q não estou afirmando o melhor, apenas q eu acesso, e q meio veio a mente agora, existem muitos outros q não me lembrei. Mas o q mais te ajudará no seu aprendizado será esse:
http://www.google.com.br
3/07/10 às 16:45
DAVID CHC, valeu as dicas, acho mesmo que o site de vocês é muito bom, tenho acompanhado as vídeo aulas daqui, do VA Brasil e do site imasters, e sempre olho o site do pessoal que eventualmente posta uma VA aqui, comecei há cerca de 15 dias, e posso dizer que graça ao espírito altruísta e educador de vocês tenho aprendido muito de forma fácil. creio que assim como eu muitos tem mais facilidade em aprender de forma “visual” em detrimento do modo estático dos livros (embora esses sejam um complemento fundamental, assim como o google rs).
o site do Majour eu já acompanho e tb acho muito bom (meu favoritos tá colando no relógio já rs).
não quero parecer abusado, mas me expressei mal, quis que você me sugerisse sites desenvolvidos, que usem a linguagem e aplicações mais atuais, entende? como comecei agora a pesquisar essa área (sou estudante de engenharia mecatrônica, na minha área eu recomendaria meus conceitos como método básico de aprendizado e os desenvolvimentos da nasa e do MIT como o método aplicado ideal) não faço idéia do que é considerado bom, gostaria de ter referências para poder desenvolver minhas próprias idéias baseadas nos conceitos que vocês tão gentilmente fornecem a todos nós, tangenciando meu percurso pelas vias do ideal, e sabendo a potencialidade do aprendizado.
mas conversar contigo é sempre produtivo, mais uma vez obrigado pela atenção, e sucesso na tua peleia.
3/07/10 às 17:22
@jean, ah tá, acho q entendi. Vou dizer na área de desenvolvimento o q vc deve pesquisar, e a tendencia na desenvolvimento site.
Padrões Web ( webStandards) – Talvez o q indicaria estudar, é ter conhecimentos solidos de HTML e CSS, pq apesar de muitos dizerem q sabem, não conseguem conciliar a teoria com pratica. Ter uma boa base sintaxe, e semantica ao desenvolver o seu codigo. A sintaxe seria no sentido de organização das tags. Elementos aninhados. E semantica seria o conteudo nela expressa, se vou usar um paragrafo, utilizo a tag de paragrafo, assim sucessivamente. Quando digo HTML, eu aconselho usar as regras do XHTML, q algo mais rigido em relação a isso. Então seria XHTML e CSS.
No caso dos Padrões, o conceito de separar por Conteudo, Apresentação e Comportamento é sempre valido. O conteudo seria o HTML, apresentação o CSS, e comportamento Javascript.
A W3c.br tem algumas apresentações em pdf, audio e video q são interessante pra ver esses conceitos:
http://www.w3c.br
Web Semantica – Alguns dizem q seria a Web 3.0 ( a 2.0 seria a convergencia em q o usuario realiza o seu proprio conteudo, exemplo, midias sociais). NO caso essa web semantica seria o conceito de apenas apresentar dados, e sim interpretá-lo ( no link da w3c q passei acima fala mais sobre isso)
HTML5 – Essa nova versão do HTML, q uma das coisas interessantes é tentar se independentes de ferramentas externas, um exemplo, flash. Ele tras tbm um valor semantico maior, q significa q o conteudo será representado por um valor especifico, no caso uma tag. Entre outras coisas.
Esses são sites q apple e google lançaram para ver novas funcionalidade do HTML5
http://www.apple.com/html5/
http://www.html5rocks.com/
CSS3 – Nirvana do desenvolvimento web, rs. No caso vc com codigo CSS, vc teria realmente separa em Conteudo, apresentação e Comportamento. NO caso o CSS é a parte da apresentação. E com ele o desenvolver teria uma liberdade maior, com apenas linhas de codigo. Exemplos:
http://www.css3.info/
Seria interessante vc pesquisar sobre gallery css, q são sites feitos com o CSS ( lá fora eles usam mais esse termo, site em CSS do WebStandards, como aqui utilizamos tableless)
Resumindo:
Aprenda HTML e CSS, tendo como diretriz os Padrões Web. Isso te ajudará bastante.
Veja tbm HTML5 e CSS3, apesar do IE ser um atraso, os outros navegadores já estão implementando varios recursos.
Gallery CSS, isso é interessante pra ter noção de pode ser feitos com CSS nos site.
E claro, temos javascript. O q está mais em volga, seria a utilização de um frameworks, no caso indico o jQuery q é simples e facil de usar.
Acho q seria mais ou menos isso. Acho q vc indo atras de WebStandards, vc consegue trilhar um caminho “correto”, evitando aprender coisas “erradas” no meu do caminho. ( Coloquei em aspas “correto” e “errado” pq é algo muito abstrato no mundo web.) Espero ter te ajudado.
12/07/10 às 4:52
é possivel incluir som no menu pela tableless , a um bom tempo venho pesquisando a possibilidade que add som no menu feito no dreamweaver , tenho o cs3/cs4/cs5 e nem um deles ainda nao descobrir , bom pelo flash eu sei , so que nao sei faze-lo drop down com submenus , entende , nao somente um submenu , exatamente o menu com submenu e um sub no submenu , isso no flash , no qual sei add som ao mesmo , so que no dreamweaver eu faço os menus com os subs conforme eu quero mais nao consigo add som aos menus , tendei pelo html e pelo css , e da erro nos menus , me orienta awe faz fovor , no do mais ,o mx master é show , e kda um de v6 estão de parabéns estas videos aulas , são nada mais que uma inclusão social de infortatização , isso que é cidadania .. e na benção de Deus viram muito sucesso para o site e a v6 q fazem o site existir , abraço a moçada da mx master .. obrigado . see ya guys
12/07/10 às 8:12
@rodrigo, não é possivel colocar som menu em tableless, só em flash mesmo.
21/07/10 às 10:13
Parabêns cara, resolvi meu problema com apenas uma linha da sua video aula.
Abraço!!!
25/07/10 às 21:18
Muito bom!
MXMASTER é 10, acaba com a concorrência sempre!
30/07/10 às 12:55
Fala ai David, muito bom, mais tentei acessar o link Elmicox, mais tá quebrado, depo ver isso. Um abraço…
30/07/10 às 13:38
@Luiz, ajeitei o link, dá uma conferida agora. abrs
4/08/10 às 20:02
Excelente aula.. esta de parabéns! Testando este menu, me deparei com um problema… e nao consegui soluciona-lo… quando coloco este menu em uma página que tenha algum material logo abaixo do menu, este material fica por cima dos sub-menus fazendo com que eles nao apareçam… como se ele ficasse em segundo plano abrindo por tras do conteudo da pagina… sabe como solucionar este problema?
4/08/10 às 20:07
@Bruno Figueiredo,tente colocar no submenu, z-index com o valor alto:
#menu li ul{ position:absolute; top:25px; left:0; z-index:9999; display:none; }4/08/10 às 20:41
Funcionou beleza cara… so nao funcionou quando o conteudo em questao é uma apresentação de slides flash… ai ele nao aparece… mas com o restante da pagina ficou fino….
4/08/10 às 20:44
@Bruno Figueiredo, para o conteudo em flash, vc deve declarar wmode como transparent:
Se tbm usa embed