Ir para conteúdo
Fórum Script Brasil
  • 0

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

little_richard

Perguntado por little_richard,

 Share

Pergunta

little_richard

little_richard

Postado
Postado

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 para o comentário
Compartilhar em outros sites

10 respostass a esta questão

Posts Recomendados

  • 0
little_richard

little_richard

Postado
  • Autor
Postado

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 para o comentário
Compartilhar em outros sites
  • 0
JCMPJ

JCMPJ

Postado
Postado

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 para o comentário
Compartilhar em outros sites
  • 0
little_richard

little_richard

Postado
  • Autor
Postado
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 para o comentário
Compartilhar em outros sites
  • 0
little_richard

little_richard

Postado
  • Autor
Postado

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 para o comentário
Compartilhar em outros sites
  • 0
JCMPJ

JCMPJ

Postado
Postado

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 para o comentário
Compartilhar em outros sites
  • 0
Guest Guest

Guest Guest

Postado
Postado
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 para o comentário
Compartilhar em outros sites
  • 0
Guest Guest

Guest Guest

Postado
Postado

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 para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,6k
×
×
  • Criar Novo...