• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

Knitter

Como raio é que faço um menu horizontal com drop down?

9 mensagens neste tópico

Boas,

Estou farto de seguir tutoriais na net, por mais copy+paste que faça não consigo repetir o comportamento que os ditos tutoriais apregoam!

Queria fazer um menu horizontal tendo algumas opções em menu drop down vertical, já me fartei de dar voltas e não consigo dar com isto. Queria que fosse CSS válido usando o minimo de javascript possível. Alguém conhece algum tutorial bom para fazer isso, ou tem por algum código para o fazer?

Pelo menos a explicação de como funcionam os menus, para que possa perceber o objectivo.

Não sei se a solução vai resultar mas preciso do menu implementado para testar.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Boas. Na Área privada tens lá isso para a outra tal cena....

edit:

vê anexo

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Mas está na vertical :P e tem imenso código que não percebo... tenho de estudar isso melhor, o que me irritou foi mesmo a cena de tantos tutoriais por ai e não consegui replicar nenhum! Devo ter muitas dificuldades a ler instruções :)

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

AAAAA,... tu querias era horizontal... :S .....:P

pois,.... então não sei,... tambem não precebo nada disso....

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Já estou a estudar melhor o que está feito... vou ver como é que me safo...

Bah!! não percebo, não percebo. Vá-se lá saber, não dou para isto :P, para a semana vejo isso com mais calma...

A única coisa que tirei foram as borders mas consegui logo que deixasse de funcionar no IE6...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

vai ao cssplay que tens para lá menus para todos os gostos e feitos practicamente todos só com css e html...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Aqui vai o código:


<html>
<head>
<script type="text/javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
}
}
window.onload=startList;
</script>

<style type="text/css">
UL {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
height: auto;
border-bottom: dotted 1px black;
}

UL LI {
position: relative;
}

LI UL {
position: absolute;
top: 0;
left: 149px;
display: none;
}

UL LI a {
display: block;
text-decoration: none;
color: #000000;
background: white;
padding: 5px;
border: dotted 1px black;
border-bottom: 0;
}

UL LI :hover {
color: white;
background: silver;
}

LI UL LI a {
padding: 2px 5px;
}

LI:hover UL, LI.over UL {
display: block;
}
</style>

<!--[if IE]>

<style type="text/css">

UL {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
border-bottom: dotted 1px black;
}

UL LI {
position: relative;
}

LI UL {
position: absolute;
top: 0;
left: 149px;
display: none;
}

UL LI a {
display: block;
text-decoration: none;
color: #000000;
background: white;
padding: 5px;
border: dotted 1px black;
border-bottom: 0;
}

UL LI :hover {
color: white;
background: silver;
}

LI UL LI a {
padding: 2px 5px;
}

LI:hover UL, LI.over UL {
display: block;
}

UL LI {
height: 1%;
}

UL LI a {
height: 1%;
}

</style>

<![endif]-->

</head>
<body>



<link href="style.css" type="text/css" rel="stylesheet">

<ul id="nav">
<li><a href="#">Blogs</a>
	<ul>
		<li><a href="#">LinTeam Blog</a></li>
		<li><a href="#">DesignTeam Blog</a></li>
	</ul>
</li>
</ul>

</body>
</html>

Depois adaptas o código às tuas necessidades.

Espero ter ajudado :P

Cumps.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora