[css] Menu De Navegação Com Drop E 3 Seções.

little_richard · February 24, 2005

Olá!

Gostaria de saber se alguém aqui saca de menu drop com mais de duas seções.

Obviamente, no FireFox ele funciona super bem. Já no IE 6 ele não tá funcionando corretamente.

Vale lembrar que adicionaei alguns bug fixes encontrados em sites estrangeiros. O bug fix (um javascript + umas declarações css) faz com que o primeiro menu funcione, mas não o segundo.

abaixo segue o meu código com os bug-fixes.

<html>
<title> menu drop</title>
<head>
<script>
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes;
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">
.cu{ font: normal 11px arial; background-image: url("fundo.gif");
}
ul { font: 12px arial;
color: #36b3ed;
margin: 0;
padding: 0;
list-style: none;
width: 170px;
border-bottom: 1px solid #fff;
background: none;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 169px;
top: 0;
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #006699;
background: #d5e6ee;
padding: 5px;
border: 1px solid #fff;
border-bottom: 0;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */
ul li a:hover { font: 11px verdana; color: black; background: #e0f0f0;
} /* Hover Styles */
li ul li a { padding: 5px 5px; font: 12px;
background: #d6e7ef;
list-style: none;
border-bottom: 1px solid #fff;} /* Sub Menu Styles */
li:hover ul, li.over ul {
display: block;
}
li.sub:hover ul, li.over ul {display: block;}
li.sub ul {display: none;}
li.sub ul li {display: block;}
</style>
</head>
<body>
<table align=center>
<tr>
<td>
<ul id="nav" >
<li><a href="#" onclick="return false">Home</a></li>
<li><a class=cu href="#" onclick="return false">Teste</a>
<ul>
<li><a href="#" onclick="return false">Teste</a></li>
<li class=sub><a class=cu href="#" onclick="return false">Dois</a>
<ul>
<li><a href="#" onclick="return false">Teste</a></li>
<li><a href="#" onclick="return false">Teste</a></li>
</ul>
</li>
<li><a href="#" onclick="return false">Teste</a></li>
</ul>
</li>
<li><a href="#" onclick="return false">Teste</a>
<ul>
<li><a href="#" onclick="return false">Teste</a></li>
<li><a href="#" onclick="return false">Teste</a></li>
<li><a href="#" onclick="return false">Teste</a></li>
<li><a href="#" onclick="return false">Teste</a></li>
<li><a href="#" onclick="return false">Teste</a></li>
</ul>
</li>
<li><a href="#" onclick="return false">Teste</a>
<ul>
<li><a href="#" onclick="return false">Teste</a></li>
<li><a href="#" onclick="return false">Teste</a></li>
<li><a href="#" onclick="return false">Teste</a></li>
<li><a href="#" onclick="return false">Teste</a></li>
</ul>
</li>
</ul>
</td>
</tr>
</table>
<input type="text" content=".cu{ font: normal 11px arial; background-image: url("fundo.gif");
}
ul { font: 12px arial;
color: #36b3ed;
margin: 0;
padding: 0;
list-style: none;
width: 170px;
border-bottom: 1px solid #fff;
background: none;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 169px;
top: 0;
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #006699;
background: #d5e6ee;
padding: 5px;
border: 1px solid #fff;
border-bottom: 0;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */
ul li a:hover { font: 11px verdana; color: black; background: #e0f0f0;
} /* Hover Styles */
li ul li a { padding: 5px 5px; font: 12px;
background: #d6e7ef;
list-style: none;
border-bottom: 1px solid #fff;} /* Sub Menu Styles */
li:hover ul, li.over ul {
display: block;
}
li.sub:hover ul, li.over ul {display: block;}
li.sub ul {display: none;}
li.sub ul li {display: block;}" size="15" class="form"></input>
</body>
</html>

Obrigado desde já!

Crystian · February 25, 2005

tu pegou pronto esse menu? tu entende de DHTML? Não tenho o IE aqui por isso não posso testar, mas acredito q seja alguma propriedade usada na function startList...

little_richard · February 25, 2005

a unica coisa pronta que peguei foi o código javascript e os bug fixes para o IE.

O resto, fui eu quem criou.

Se eu entendi o pouco do código, (não sei javascript), ele chama um função de nome "nav".

Já tentei jogar o "nav" nas id´s e nada... : /

EDIT:

tentei modificar algumas variáveis, repetir o script e nada.... :/

acho que minha logica não funcionou 100% (mas não deu erro nenhum pelo menos!

JCMPJ · February 26, 2005

Ola!

Curti o barato. Eu nunca tinha imaginado fazer um menu assim sem scripts.

É realmente uma pena que o tal do Bill não goste muito dessas coisas. Acho que se ele passar a adotar padrões não vai mais vender as tranqueiras da M$. infelizmente o IE ainda é o browser mais utilizado o que nos força a desenvolver páginas compativeis com ele.

Eu não sou um expert em DHTML, mas acho que o IE não entende isto "navRoot.childNodes.length", parece-me que ele só encherga um nivel abaixo.

Vou estudar mais, se descobrir algo posto aqui.

Quem não acreditar que não precisa de script teste no Firefox.

(document.all isto é só para IE)

little_richard · February 27, 2005

Ola!
Curti o barato. Eu nunca tinha imaginado fazer um menu assim sem scripts.
É realmente uma pena que o tal do Bill não goste muito dessas coisas. Acho que se ele passar a adotar padrões não vai mais vender as tranqueiras da M$. infelizmente o IE ainda é o browser mais utilizado o que nos força a desenvolver páginas compativeis com ele.
Eu não sou um expert em DHTML, mas acho que o IE não entende isto "navRoot.childNodes.length", parece-me que ele só encherga um nivel abaixo.
Vou estudar mais, se descobrir algo posto aqui.
Quem não acreditar que não precisa de script teste no Firefox.
(document.all isto é só para IE)

Isso é muito estranho.

Eu não entendo muito de javascript, por tanto, não sei se há como fazer uma função que faça com que o IE reconheça o terceiro menu sem que a ultima lista esteje com "display: block;"

Para vocês testarem, façam o seguinte:

na <li "class=sub"> modifiquem os valores dos links... por exemplo: troque a palavra "Teste" por Um... e assim por diante em todos as li abaixo dela até a UL (abaixo dela) fechar...

Agora, vão na folha de estilo, em li.sub, e deixem todas com valor de display:block.

Salve o arquivo, carregue no IE e no FF.

Depois, alterem o valor de li.sub ul para display: none.

Slavem e carregue o arquivo nos dos navegadores.

Bizarramente, o menu para de ser reconhecido pelo IE.

Já não sei mais o que fazer.

OBS.: se o IE tivesse uma engine como a Gecko, não seria necessário nenhum javascript....

JCMPJ · February 27, 2005

Seguinte:

estou Achando que no IE não vai dar para fazer deste jeito.

Vai ter que brincar com a visibilidade dos carinhas.

Mas ainda tem outro poblema como fazer um script para "pegar" todos os níveis de filhos, do jeito que tá ele acha um abaixo.

little_richard · March 1, 2005

achei uma solução!!

activateMenu = function(nav) {
/* currentStyle restricts the Javascript to IE only */
if (document.all && document.getElementById(nav).currentStyle) {
var navroot = document.getElementById(nav);
/* Get all the list items within the menu */
var lis=navroot.getElementsByTagName("LI");
for (i=0; i<lis.length; i++) {
/* If the LI has another menu level */
if(lis.lastChild.tagName=="UL"){
/* assign the function to the LI */
lis.onmouseover=function() {
/* display the inner menu */
this.lastChild.style.display="block";
}
lis.onmouseout=function() {
this.lastChild.style.display="none";
}
}
}
}
}
/* I do this differently on the test page to fix a problem float container problem in IE5 Mac*/
/*Uncomment the function below*/
window.onload= function(){

activateMenu('vertnav'); //you only need one of these for each menu

}

logico q naofui eu quem descobriu isso, né?

JCMPJ · March 2, 2005

Legal!

Uma gambiarra elegante.

Só uma pergunta alguém sabe dizer onde está as informações sobre estes objetos, suas propriedades e métodos lá no site da tal M$. Eu entrei lá e só achei meia duzia de linhas que não diziam nada.

Será que quem fez isto trabalha pro Bill?

De qualquer forma, tá resolvido e ainda aprendemos um pouco mais.

[]'s

March 2, 2005

Legal!
Uma gambiarra elegante.
Só uma pergunta alguém sabe dizer onde está as informações sobre estes objetos, suas propriedades e métodos lá no site da tal M$. Eu entrei lá e só achei meia duzia de linhas que não diziam nada.
Será que quem fez isto trabalha pro Bill?
De qualquer forma, tá resolvido e ainda aprendemos um pouco mais.
[]'s

Com certeza não!

http://www.csscreator.com/menu/multimenu.php

Na verdade, misteriosamente, depois de ter adicionado um pá de itens e alguns submenus detro desses itens (não passando de tres menus), parou de funcionar no exploited...

Ainda vou estudar isso hoje e te falo se funcionou...

até

March 2, 2005

o código javascript mesmo é esse aqui...

activateMenu = function(nav) {
/* currentStyle restricts the Javascript to IE only */
if (document.all && document.getElementById(nav).currentStyle) {
var navroot = document.getElementById(nav);
/* Get all the list items within the menu */
var lis=navroot.getElementsByTagName("LI");
for (i=0; i<lis.length; i++) {
/* If the LI has another menu level */
if(lis.lastChild.tagName=="UL"){
/* assign the function to the LI */
lis.onmouseover=function() {
/* display the inner menu */
this.lastChild.style.display="block";
}
lis.onmouseout=function() {
this.lastChild.style.display="none";
}
}
}
}
}
/* I do this differently on the test page to fix a problem float container problem in IE5 Mac*/
/*Uncomment the function below*/
/* <-- delete this whole line.
window.onload= function(){

activateMenu('nav'); //you only need one of these for each menu
activateMenu('vertnav');
}
delete this whole line.--> */

é que eu já tinha editado ele...

little_richard · March 2, 2005

ô capeta...

não loguei antes de postar...

mas o código ta funcionando! eu que não tinha fechado uma tag ul...

fui

Sign In

[css] Menu De Navegação Com Drop E 3 Seções.

Question

Link to comment

Share on other sites

10 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Guest Guest

Link to comment

Share on other sites

Guest Guest

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Forum Statistics