Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Raoni

menu nao funciona no IE

Por , em Desenvolvimento frontend

Recommended Posts

Raoni    0

Raoni
Postado

boa tarde pessoal!!!

 

Estou tendo um probleminha que nao tenho certeza se é js, css ou html.

Tenho uma lista de menu e quando duplico ela, a segunda nao funciona. pq sera? Estou duplicando pois este menu ser criado dinamicamente, nao sera um nem dois.. e sim 'n' menu´s.

 

o codigo em html é esse: 

<ul id="quebras">	 <li class="menuparent"><a href="#">nome filial</a>	 <ul>		  <li  class="menuparent"><a href="#" onclick="selectMenu('$me');">Filial</a></li>	 </ul>	 </li></ul>

em js :

 

function IEHoverPseudo() {	var navItems = document.getElementById("quebras").getElementsByTagName("li");	for (var i=0; i<navItems.length; i++) {		if(navItems[i].className == "menuparent") {			navItems[i].onmouseover=function() { this.className += " over"; }			navItems[i].onmouseout=function() { this.className = "menuparent"; }		}	}	var navItems1 = document.getElementById("quebras1").getElementsByTagName("li");	for (var i1=0; i1<navItems1.length; i1++) {		if(navItems1[i1].className == "menuparent") {			navItems1[i1].onmouseover=function() { this.className += " over"; }			navItems1[i1].onmouseout=function() { this.className = "menuparent"; }		}	}}window.onload = IEHoverPseudo;

por favor... alguem pode me ajudar???

 

abraços

Compartilhar este post

Link para o post
Compartilhar em outros sites

RoXbY    3

RoXbY
Postado

na verdade não sei te explicar como..posta em js que a solução é fácil..tens que definir uma variável pro js, nomear a id e cada id tem um nome diferente..hmmm... :/

Compartilhar este post

Link para o post
Compartilhar em outros sites

webflex    0

webflex
Postado

Olá,Como você vao duplicar seu menu, em principio estará a duplicar o id e isso não pode acontecer porque o valor do id tem que ser unico.Cumps \o/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Raoni    0

Raoni
Postado

Olá,Como você vao duplicar seu menu, em principio estará a duplicar o id e isso não pode acontecer porque o valor do id tem que ser unico.Cumps \o/

Pessoal, resolvi meu problema.Como estou criando dinamicamente as '<ul' entao concatenei dentro do loop uma variavel a mais, e para controla-las no js, fiz assim:
funtion carrega(){	for (var j = 0;; j ++){		var nomes = "quebras"+j;		 var navItems = document.getElementById(nomes).getElementsByTagName("li");		 if (navItems != null){			for (var i=0; i<navItems.length; i++) {				if(navItems[i].className == "menuparent") {					navItems[i].onmouseover=function() { this.className += " over"; }					navItems[i].onmouseout=function() { this.className = "menuparent"; }				}			}		}		else			break;	}}
agora estou com um outro problema. como esta sendo criado varios menus, tem hora, por causa da sua posicao, o menu1 (quando passo o mouse) seus filhos ficam por baixo do menu2 (q esta logo a baixo). Teria como eu deixar que ele fique por cima e nao por baixo???obrigado

Compartilhar este post

Link para o post
Compartilhar em outros sites

Raoni    0

Raoni
Postado

Olhe o css desse menu que postei aqui: http://forum.imasters.com.br/index.php?showtopic=235582Talvez te ajude.

Ola 'hunternh' ,Entao.. esse link me ajudaria para usar somente um menu, até aí tudo bem, mas como estou criando dinamicamente, dentro da tabela priciso que a cada celula da tabela, é um menu novo, pois preciso de sub menus diferentes. Consegui criar perfeito, tudo funcionando. Mas agora estou com outro problema, este é de html (eu acho), tipo assim: como estou usando 'nowrap' nas celulas para nao quebrar linhas, os '<ul' passam por cima do mesmo jeito, teria alguma ideia de como arrumar isso??? para que a primeira linha do menu nao ultrapassar o limite da celula.segue os codigos.html:
<html><head><title>Horizontal Drop Down Menus</title><script type="text/javascript" src="drop_down.js"></script><style type="text/css">	 @import "style.css";</style></head><body bgcolor='#F4F4F4'> <table border = 1> <tr> <td nowrap><ul id="quebras1">		   <li class="menuparent"><a href="#">nome filial</a>		   <ul>				<li  class="menuparent"><a href="#" onclick="selectMenu('$me');">Filial</a></li>		<li  class="menuparent"><a href="#" onclick="selectMenu('$me');">Filial</a></li>		<li  class="menuparent"><a href="#" onclick="selectMenu('$me');">xxxx</a></li>		<li  class="menuparent"><a href="#" onclick="selectMenu('$me');">Fixxxxxlial</a></li>			   		   </ul>		   </li>	  </ul></td></tr> <tr> <td nowrap>   <ul id="quebras2">		   <li class="menuparent"><a href="#">nome xxxxxxxxxfiliXXXXXXal</a>		   <ul>				<li  class="menuparent"><a href="#" onclick="selectMenu('$me');">Filial</a></li>			   		   </ul>		   </li>	  </ul> </td></tr><tr> <td nowrap>   <ul id="quebras5">		 <li class="menuparent">			 <a href="#">DF - Desemb Tps1 (3) AISP</a>		 </li>	</ul>	 </td></tr></body></html>
java scriot:
function IEHoverPseudo() {	for (var j = 1;; j ++){		var nomes = "quebras"+j;			var navItems = document.getElementById(nomes).getElementsByTagName("li");				if (navItems != null){			for (var i=0; i<navItems.length; i++) {				if(navItems[i].className == "menuparent") {					navItems[i].onmouseover=function() { this.className += " over"; }					navItems[i].onmouseout=function() { this.className = "menuparent"; }				}			}		}		else			break;	}}window.onload = IEHoverPseudo;
css:
body {	font: normal 11px verdana;	}ul {	margin: 0;	padding: 0;	list-style: none;	width: 130px; /* Width of Menu Items */	/*border-bottom: 1px solid #ccc;*/	position : static;	}ul li {	position:relative;	}ul li a {	display: block;	text-decoration: none;	/*color: #777;*/	color: #000;	/* background: #fff; IE6 Bug */	/*padding: 5px;*/	padding: 0px;	/*border: 1px solid #ccc;*/	border-bottom: 1;	}/* Fix IE. Hide from IE Mac \*/* html ul li { float: left; height: 1%; }* html ul li a { height: 1%; }/* End */ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */ul ul {	position:absolute;	display:none;	left: 109px; /* Set 1px less than menu width */	top: 0;}li ul li a { padding: 2px 5px; } /* Sub Menu Styles */li:hover ul ul, li.over ul ul { display:none; }li:hover ul, li li:hover ul, li.over ul, li li.over ul { display: block; } /* The magic */

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito