Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

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

Compartilhar este post


Link para o post
Compartilhar em outros 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!

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Compartilhar este post


Link para o post
Compartilhar em outros 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...

Compartilhar este post


Link para o post
Compartilhar em outros 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...

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

 

Abraços

Compartilhar este post


Link para o post
Compartilhar em outros 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

Compartilhar este post


Link para o post
Compartilhar em outros 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" /> ??

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Compartilhar este post


Link para o post
Compartilhar em outros 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..

Compartilhar este post


Link para o post
Compartilhar em outros 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...

Compartilhar este post


Link para o post
Compartilhar em outros 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

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.