Não funciona no IEca

[CiberMix 0]

Olá, seguindo o tutorial do saudosissímo Maujor ->Link para o Tuto, tentei montar um menu usando ele como base, já que atendia minhas espectativas.

 

 

Segui criteriosamente bem, porém nao funciona no IE, no Firefox está 100%.

Testei o dele e funciona..

Se alguem achar o erro ou tiver outra sugestao.. por favor me ajudem!! :joia:

 

 

Link para minha página

[pa_bruno 0]

adiciona esse hack aki:

* html #menu p {margin: 2px 0 2px 0;}

caso ainda naum esteja o suficiente modifique os valores...

[Illidan 0]

Cara, este foi o melhor tutorial sobre menus que eu encontrei:

http://www.tanfa.co.uk/css/examples/css-dropdown-menus.asp

 

Inclusive o menu da página do majour é feito em cima dele... se você olhar, tem os créditos antes do código do menu.

 

[]'s!

[CiberMix 0]

Ainda não funcionou nem com esse hack!

[renanfog 0]

Cara, não funciona no IE pq você mudou a estrutura, então o javascript não ta surtindo o efeito q deveria...

ve o do Maujor:

<!-- REPARA NESSE UL ID="NAV"... ENGLOBA TODO O MENU --><ul id="nav">   <li><a href="#">Home</a></li>   <li><a href="#">About</a>     <ul>       <li><a href="#">History</a></li>       <li><a href="#">Team</a></li>       <li><a href="#">Offices</a></li>     </ul>   </li>   <li><a href="#">Services</a>     <ul>       <li><a href="#">Web Design</a></li>       <li><a href="#">Internet Marketing</a></li>       <li><a href="#">Hosting</a></li>       <li><a href="#">Domain Names</a></li>       <li><a href="#">Broadband</a></li>     </ul>   </li>   <li><a href="#">Contact Us</a>     <ul>       <li><a href="#">United Kingdom</a></li>       <li><a href="#">France</a></li>       <li><a href="#">USA</a></li>       <li><a href="#">Australia</a></li>     </ul>   </li> </ul>

Agora repara no seu...

 

<div id="menu">  <p>Principal</p>  <!-- O UL ID="NAV" SÓ ENGLOBA O PRIMEIRO ITEM DO MENU... E NÃO O GRUPO TODO -->  <ul id="nav">    <li><a href="#">Página Principal</a></li>    <li><a href="#">A ACE</a></li>    <li><a href="#">Diretoria</a></li>    <li><a href="#">Convênios</a></li>    <li><a href="#">Informativos</a></li>    <li><a href="#">Projeto Empreender</a></li>    <li><a href="#">Associe-se</a></li>  </ul>    <ul>    <li><a href="#">Agenda [+]</a>       <ul>        <li><a href="#">Eventos</a></li>        <li><a href="#">Cursos</a></li>        <li><a href="#">Palestras</a></li>      </ul>    </li>  </ul>

Se você ver o javascript q faz o menu funcionar no IEca, tem um codigo q pega todos os childNodes do UL que tenha a ID igual a NAV e adiciona o evento do mouseover e mouseout... o seu dá pau pq não ta executando o script no bloco todo, e sim só no primeiro grupo.....

 

 

 

startList = function() {if (document.all&&document.getElementById) {// Pega em navRoot todos os childNodes do elemento que a ID "nav"navRoot = document.getElementById("nav");for (i=0; i<navRoot.childNodes.length; i++) {

qualquer coisa fala ai, abraço

[CiberMix 0]

:assobiando: Valeu pela ajuda Renan.Achei o erro e corrigi.

<ul id="nav"><li><a href="#">Página Principal</a></li><li><a href="#">A ACE</a></li><li><a href="#">Diretoria</a></li><li><a href="#">Convênios</a></li><li><a href="#">Informativos</a></li><li><a href="#">Projeto Empreender</a></li><li><a href="#">Associe-se</a></li><li><a href="#">Agenda [+]</a><ul><li><a href="#">Eventos</a></li><li><a href="#">Cursos</a></li><li><a href="#">Palestras</a></li></ul></li><li><a href="#">Consultas On-line</a></li><li><a href="#">Consultas [+]</a><ul><li><a href="#">SCPC Nacional</a></li><li><a href="#">USE-Cheque</a></li><li><a href="#">Integrada</a></li><li><a href="#">Segam Estadual</a></li><li><a href="#">Segam Nacional</a></li><li><a href="#">USE Fone</a></li><li><a href="#">PACE</a></li><li><a href="#">PACN</a></li><li><a href="#">AC Estadual</a></li><li><a href="#">AC Nacional</a></li></ul></li><li><a href="#">Tempo</a></li><li><a href="#">Consulta DDD</a></li><li><a href="#">Cotação do Dólar</a></li><li><a href="#">Consulta CPF</a></li><li><a href="#">Canais [+]</a><ul><li><a href="#">Diversão</a></li><li><a href="#">Informática</a></li><li><a href="#">Jurídico</a></li></ul></li><li><a href="#">Web Site [+]</a><ul><li><a href="#">Contato</a></li><li><a href="#">Webmaster</a></li></ul></li></ul>

:joia:O porém.. ta funcionando belezinha nos dois agora.. mas o menu ta continuo.Eu queria separar ele agora. Tipo ter os canais Principais, os Serviços e os Conteudos.Embaixo de cada viria o menu deles. Mas quando tentei separar o ele, não deu certo... aff.. se tiver uma dica, poste ela ae..

[pa_bruno 0]

tem uma solução visual ae naum, pra gente basear-se em cima dela e tentar achar uma solução???

 

falow...

[CiberMix 0]

Como visual??Queria mais ou menos assim:\\-------------------------------------------------------------------------Principal- Home- A ACEServiços- Consultas Online- ConsultasCanais- Lazer- Informatica-------------------------------------------------------------------------//Queria separar o menu, como no exemplo acima.

[Alessancost 0]

Tente colocar um <li></li> sem conteúdo... deve aparecer um espaço

[CiberMix 0]

Hum.. vou tentar estilizar melhor.. fiz aki, mas não ficou muito legal não.

[pa_bruno 0]

eh soh você utilizar um titulo pra cada titulo do menu e pra cada conteudo usar uma lista, tipo assim:

<h1>Principal</h1><ul><li>Home</li><li>A ACE</li></ul><h1>Serviços</h1><ul><li>Consultas Online</li><li>Consultas</li></ul><h1>Canais</h1><ul><li>Lazer</li><li>Informatica</li></ul>

ae eh soh você estilizar como quiser, alinhar, etc... a estetica eh com você...

[Alessancost 0]

beleza se você não consequi você pode fazer o seguinte<div><img src="transparente.gif" width="x" height="1"></div>

[pa_bruno 0]

naum naum... isso ae naum... isso eh semanticamente incorreto... utilize o css para fazer isso... com margins, paddings e afins...

[CiberMix 0]

Tentei com o H1, porém no Ieca nao ficou legal. vejam: Link.

 

No firefox ta beleza.

 

Alguma dica galera? Pra arrumar esse bug? Algum hack?

[CiberMix 0]

#up

[renanfog 0]

E ai carinha....

 

Seguinte, fiz rapidinho aqui a mesma coisa q eu tinha feito pra usar esse menu, tive o mesmo problema q você, assim você pode criar as divisões como você tinha pensado, separaro menu por pedaços e colocar o cabeçalho q quiser....

 

troca o javascript por esse e cria qtas listas você quiser, mas sempre coloca o id dos ULs como nav + um numero qualquer ....

 

tipo assim

<ul id="nav1">

<ul id="nav2">

e assim por diante, dai esse script pega todas as uls que tem o seu nome começando por nav... bem bobinho mas deve funcionar...

assim você pode dividir como você quer

// JavaScript DocumentstartList = function() {if (document.all&&document.getElementById) {	elem = document.getElementsByTagName("UL");	for(j=0;j<elem.length;j++){  if (elem[j].id.substring(0,3) == "nav"){  	for (i=0; i<elem[j].childNodes.length; i++) {    node = elem[j].childNodes[i];    if (node.nodeName=="LI") {    	node.onmouseover=function() { this.className+=" over"; }    	node.onmouseout=function() { this.className=this.className.replace(" over", ""); }    }  	}  }	}}}window.onload=startList;

cara, nem tive como testar, se der errado ai avisa q eu tento ver!!

 

falou!!

[CiberMix 0]

Opa, como vai? O Script funcionou q foi uma belezinha.. usei h1 como títulos deles, estilizado.

 

Mas ficou um espeço boooom entre o título e o menu.. alguma dica pra eu rancar ele?

 

To usando uma classe para formatar esse item, ainda não é a definitiva, não curti nada ela.. hehe

 

Mas segue para você dar uma analizada:

 

.itemmenu {	font-family: Verdana, Arial, Helvetica, sans-serif;	font-size: 12px;	font-weight: bold;	color: #000000;	border-top-width: thin;	border-bottom-width: 3px;	border-bottom-style: solid;	border-bottom-color: #006600;	border-left-width: 5px;	border-left-style: solid;	border-left-color: #006600;	border-top-style: solid;	border-top-color: #000000;}

[renanfog 0]

putz, cara...sem ver tudo é complicadotenta jogar um margin-top:0px e margin-bottom:0px.... testa padding-top:0px tb...se não melhorar, posta o trecho inteiro aquifalou!

[CiberMix 0]

Coloquei o margin e funcionou legal.. vlw pela dica.

Queria uma sugestão para estilizar esse h1 legal.. se alguém tiver alguma sugestão!

 

Para ver entra ae:

 

http://www.acecamposdojordao.com.br

[pa_bruno 0]

tenta colocar tudo maiusculo, com o fundo verde, naum taum escuro e com as letras brancas... e coloca algum icone à esquerda, pra naum ficar soh texto... algo simples e pequeno...