Jump to content
Fórum Script Brasil
  • 0

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


little_richard

Question

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á! cool.gif

Link to comment
Share on other sites

10 answers to this question

Recommended Posts

  • 0

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! biggrin.gif

Link to comment
Share on other sites

  • 0

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)

Link to comment
Share on other sites

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

ph34r.gif

Link to comment
Share on other sites

  • 0

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.

wink.gif

Link to comment
Share on other sites

  • 0

achei uma solução!!

laugh.gif

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

     

}

ph34r.gifph34r.gifph34r.gifph34r.gif

logico q naofui eu quem descobriu isso, né?

Link to comment
Share on other sites

  • 0

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

wink.gif

Link to comment
Share on other sites

  • 0
Guest Guest
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

wink.gif

Com certeza não!

tongue.gif

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

dry.gif

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

até

Link to comment
Share on other sites

  • 0
Guest Guest

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

unsure.gif

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



  • Forum Statistics

    • Total Topics
      152.2k
    • Total Posts
      651.8k
×
×
  • Create New...