Menu utilizando <ul><li>

[Pacato 0]

Fala ae galera, to desenvolvendo um menu utilizando JS, o menu esta funcionando certinho mas me surgiu uma duvida. O principio do menu eh +- assim, a tag <ul>...</ul> define um menu, e caso tenha um menu dentro de uma tag <li>...</li>, indica q o menu eh um submenu deste item.Ex:

<ul>  <li>Item 1</li>  <li>Item 2    <ul>      <li>SubItem 1</li>      <li>SubItem 2</li>      <li>SubItem 3        <ul>          <li>SubSubItem 1</li>          .          .          .        </ul>      </li>    </ul>  </li></ul>

E assim vai. No meu caso, todos os submenus tem no CSS visibility: hidden; e eu indiquei por meio da funcoa do JS onmouseover e onmouseout se o visibility vai ser hidden ou visible. No meu caso, o menu fico assim:

<ul>  <li>Item 1</li>  <li onmouseover="java script: funcao('submenu1','visible');" onmouseout="java script: funcao('submenu1','hidden')">Item 2    <ul id="submenu1">      <li>SubItem 1</li>      <li>SubItem 2</li>      <li onmouseover="java script: funcao('subsubmenu1','visible');" onmouseout="java script: funcao('subsubmenu1','hidden')">SubItem 3        <ul id="subsubmenu1">          <li>SubSubItem 1</li>          .          .          .        </ul>      </li>    </ul>  </li></ul>

Eu gostaria de saber se existe alguma forma mais dinamica de eu fazer esse menu, sem q eu tenho q setar o JS OnMouseOver e OnMouseOut em cada item do menu.Valeu,Túlio.

[Fleury 3]

depende, se todos os <li> tiverem sub-menu, dá sim para fazer um script que põe a ação em todos <li> ao carregar a página. Mas se alguns não tiverem sub-menu, creio que você vai ter q fazer um por um mesmo. A não ser que você faça um array com o numero do <li> e uma estrutura de repetição percorrendo e colocando as ações nos <li> cadastrados.

 

Se você falar se todos ou só alguns vão ter sub-menu eu posso te passar uma base para fazer esse script.

 

Abraços T+ http://forum.imasters.com.br/public/style_emoticons/default/bye1.gif

[Pacato 0]

Po cara valeu pela ajuda, e respondendo a sua pergunta, nem tds os <li> tem sub menus nao, se puder me dar uma ajudinha com isso eu agradecerei bastante!!!Valeu.Túlio.

[Fleury 3]

Rapaiz, tentei fazer o seu script aqui mas encontrei muitas dificuldades :wacko:

Pelo menos da forma que eu estava tentando não dá pq eu estava usando o .onmouseover="...funcao('subsubmenu"+i+"','visible'); }"

 

Acontece que fazendo assim o script não substituiu o valor da variavel i e interpretou como se i também fosse texto.

 

De certa forma, daria quase na mesma fazer manuamente e fazer pelo meu metodo (se funcionasse) porque você teria que anotar em uma variavel array, o numero de cada <li> com sub-menu.

 

Ou seja, daria tanto trabalho quanto o outro.

Acho que vale mais a pena fazer manuamente mesmo.

 

Mas por questão de curiosidade e experiência, se alguem tiver conhecimento de um script para isso, seria muito interessante para aprendermos, não acham?

 

Bom, vou nessa...

 

Abraços T+ http://forum.imasters.com.br/public/style_emoticons/default/bye1.gif

[Pacato 0]

De qualquer maneira eu agradeco a sua atencao cara. Valeu ae, vo fazer o menu colocando os codigos em cada <li> mesmo, e realmente, se alguem tiver algum codigo que realize essa funcao, poste-o por favor.Abração!!! :)

[Millerhbm 0]

pra fazer o popUp geral de todos os LI q tenham um UL dentro é só usar esse código e colocar uma ID=NAV na <ul> principal..

 

coloca os subitens (segundo/terceiro nível/..) com a opção "display: none;"

 

#nav li { display: none; }

aí você cria um código css dessa forma:

 

li:hover ul, li.over ul { /* mostrar segundo nível qndo mouse over*/

display: block;

}

o mozilla e netscape vão interpretar o "li:hover ul" o ie vai interpretar o "li.over ul" q funciona devido ao 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;

vê aí se dá certo... eu sei q até o segundo nível dá certo.. agora com mais níveis eu nunca testei...

 

eu naum sei nada de javascript e tava querendo saber como fazer esse javascript q eu passei funcionar com dois IDs diferentes..

 

eu preciso fazer um site com 2 menus dropdown.. e esse código só funciona se for pra 1 menu... jah tentei de tudo, colocar os 2 com a mesma ID, colocar o mesmo código 2 vezes (cada uma com uma ID diferente..) mas como não sou programador fica difícil..