Ir para o conteúdo
Knitter

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

Mensagens Recomendadas

Knitter    101
Knitter

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.

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
Knitter    101
Knitter

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 :)

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
David Pintassilgo    5
David Pintassilgo

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

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

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
Knitter    101
Knitter

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

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
LuPereira    0
LuPereira

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.

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


×

Aviso Sobre Cookies

Ao usar este site você aceita os nossos Termos de Uso e Política de Privacidade