Jump to content
Henrique Barcelos

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

Recommended Posts

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:

 

Imagem Postada

 

 

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

  • +1 1

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

 

Abraços

Share this post


Link to post
Share on other sites

: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

Share this post


Link to post
Share on other sites

: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" /> ??

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.