Menu Drop-Down (Fluido) 3 níveis + Imagens

[Henrique Barcelos 290]

E aí galera...

 

Tava a toa aqui hoje, então decidi fazer um menuzinho drop-down e compartilhar com a galera

 

 

aqui é o resultado final:

 

 

 

e aqui os arquivos:

 

http://rapidshare.com/files/225763183/Menu...p-Down.rar.html

 

Dúvidas???

 

Postem aqui...

 

Mas tá bem simples, acredito que todos entenderão

[William Bruno 1501]

Bacana o menu cara.. eu só mudaria algumas coisinhas..

-> O código tá identado.. talvez até de mais.. ^^ entramos na briga entre 'necessário', e 'exagero'.

<li>
									<a href="#">Avançado</a>
								</li>

poderia ser apenas:

<li><a href="#">Avançado</a></li>

Economizaríamos linhas de código, consequentemente o tamanho do arquivo seria menor, por isso mais leve, e não prejudicaria a leitura do código, já que não é necessária toda essa identação..

-> você chama o Javascript pro IE6, afetando todos os LI da página:

var itens = document.getElementsByTagName("li");

Seria bacana, limitar esse JS a apenas os LIs do menu.

 

-> Por que usar .htm no arquivo ??

-> E por que usar class e não id na UL do menu ? ela não vai ser única na página ? taca um ID :lol:

 

Mas ficou bem bacana.. é bom ter esse material aqui no fórum para deixarmos de exemplo e estudo.. volta e meia aparecem essas dúvidas.

Boa iniciativa!

[Thiago Retondar 18]

Cara, ficou muito bom mesmo. Só acho que, como o William disse, não precisa de tanta identação. Demorei um pouco para perceber a "lógica" do código.

 

É bom ter tutoriais como esse, pois sempre aparecem um pessoal pedindo. http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif

 

Abraços.

[Henrique Barcelos 290]

AHSUHAHSAU...

 

Pois é... é assim que o Aptana formata o código, eu mudei no linux, mas como fiz o menu com o windows (por causa do photoshop), nm lembrei, soh dei ctrl+shift+F xD...

 

Vou mudar isso hoje ^^/...

 

Qto ao javascript, o ultimo que eu tinha feito eu limitei ao do menu... falta de atenção dessa vez...

 

é só alterar a linha assim:

 

var itens = document.getElementById("menu").getElementsByTagName("li");

...

 

O .htm to meio sem entende tbm... soh vi agora q você falou... todos os arquivos eu salvo como .html...

 

Mas é isso aí... sugestões são sempre bem-vindas... não existe nada que não possa ser melhorado...

 

Inicialmente eu tinha feito os botões com transparência, mas não consegui fazer aparecer direito no IE6 de jeito nenhum... Tentei varios hacks, expressions e nd =/...

 

Vlw aí as dicas e a força...

 

Eh chato quando a gnt posta algo aqui e ninguém comenta xD...

[Henrique Barcelos 290]

Galera... Resolvi faze a versão 2.0 da coisa xD...

 

http://rapidshare.com/files/225763183/Menu...p-Down.rar.html

 

Menos identação, separação de camadas e adicionei a função de clique... Quando se clica em um item ele muda de estilo...

[William Bruno 1501]

Muuuuito bacana! http://forum.imasters.com.br/public/style_emoticons/default/clap.gif

vou adicionar à lista de tópicos úteis..

[Henrique Barcelos 290]

Legal kra... nem sabia que tinha isso aki... ^_^

[AAninh@ 0]

Legal kra... nem sabia que tinha isso aki... ^_^

Era o que eu estava precisando... muito obrigado pela ajuda!!! http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

 

Abraços

[AAninh@ 0]

Que codigo eu utilizo para aumentar ou diminuir a letra do menu e do sub-menu?

 

Abraços

[Thiago Retondar 18]

Só usar font-size no elemento <a>. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[AAninh@ 0]

Só usar font-size no elemento <a>. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Ok, muito obrigado.

 

Como faço para inserir meu menu CSS no meu site (o site já está todo montado)?

[Thiago Retondar 18]

:blink: :blink: :blink: :blink:

 

Ué! É só colocar o código onde você quer. http://forum.imasters.com.br/public/style_emoticons/default/pinch.gif http://forum.imasters.com.br/public/style_emoticons/default/pinch.gif http://forum.imasters.com.br/public/style_emoticons/default/pinch.gif

[AAninh@ 0]

:blink: :blink: :blink: :blink:

 

Ué! É só colocar o código onde você quer. http://forum.imasters.com.br/public/style_emoticons/default/pinch.gif http://forum.imasters.com.br/public/style_emoticons/default/pinch.gif http://forum.imasters.com.br/public/style_emoticons/default/pinch.gif

seria este o código: <link href=''caminho do css" rel="stylesheet" type="text/css" /> ??

[Thiago Retondar 18]

<link href=''caminho do css" rel="stylesheet" type="text/css" />

É para inserir o CSS. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

É isso que deseja? Colocar o CSS? Então é esse código.

[AAninh@ 0]

é isso mesmo

 

Obrigada

[AAninh@ 0]

eu já coloquei esse código e não deu... http://forum.imasters.com.br/public/style_emoticons/default/cry.gif

[Thiago Retondar 18]

Você já substituiu o "caminho do css" pelo seu o nome do seu arquivo com a extensão .css?

 

Ficaria assim: <link href="estilos.css" rel="stylesheet" type="text/css" />.

 

E fica dentro de <head>. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

Abraços.

[William Bruno 1501]

você precisa colocar o código CSS, e a marcação HTML.. se não não funcionará mesmo.

Não existem 'scripts mágicos'.

 

Tudo oque você vê, tem que está no código.. se você não colocar, não tem como aparecer..

[Henrique Barcelos 290]

Eu tenho q viaja um pokinho e qdo volto meu topico tah "bombando"... ahsuahusahshahuhs

 

seu css fica dentro de alguma pasta????

 

então eh assim:

<link href=''pasta/estilos.css" rel="stylesheet" type="text/css" />

Mas poste isso no forum de duvidas... deixe aki pra postar duvidas sobre o tutorial...

[Henrique Barcelos 290]

Galera, resolvi criar um blog...

 

Nele vou postar sobre diversas coisas, mas acho que a principal será sobre a profissão de Webdesigner e Programador...

 

Coloquei este tópico lá... Visitem

 

Disconnexus