Bug em menu drop down feito com css e Jquery no IE?

Joel.f · 4 de janeiro de 2013

Ola, pessoal. Depois de muito tentar personalizar um spry menu feito com o dreamweaver eu decidi ir por outro caminho e fazer um menu drop down com css e jquery a partir de tutoriais da net. Eu consegui achar um bem interessante por sua simplicidade porém para variar ele apresenta um bug no IE 9. Não consegui resolver, o bug acontece da segunte forma ao atulizar a pagina e passar o cursor pela primeira coluna (o menu é vertical e tem 3 colunas) o IE ao invés de exibir so a segunda coluna exibe a terceira tambem, o estranho é que só acontece até o cursor passar pela terceira coluna pela primeira vez ai o bug some. O código do menu simplificado é esse:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Untitled Document</title>
	<script type="text/javascript" src="js/jquery-1.5.2.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#menu li ul").hide();
			$("#menu li").hover(
				function(){$(this).children("ul").show();},
				function(){$(this).children("ul").hide();}
			);
		});
	</script>
	<style type="text/css">
		ul {
			padding:0;
			margin:0;
			list-style:none;
		}
		li {
			border: 1px solid black;
			width: 120px;
			padding:3px;
			position:relative;
		}
		li:hover{
			background-color:black;
			color:white;
		}
		li > ul {
			position:absolute;
			left:126px;
			top:-1px;
			color:black;
		}
	</style>

</head>

<body>
	<ul id="menu">
		<li>home</li>
		<li>t1</li>
		<li>t2
			<ul>
				<li>t11</li>
				<li>t12</li>
				<li>t13</li>
				<li>t14
					<ul>
						<li>t141</li>
						<li>t142</li>
						<li>t143</li>
						<li>t144</li>
						<li>t145</li>
					</ul>
				</li>
				<li>t15</li>
			</ul>
		</li>
		<li>Casas</li>
		<li>Contato</li>
	</ul>

</body>
</html>

Coloquei o printe do bug. Ele só acontece no IE e só quando o mause ainda não passou pela terceira coluna. Alguém saberia alguma forma de contornar esse bug mesmo que seja com um hack pra IE. Na imagem1 um o bug aparece quando o mouse aponta para a primeira li ja na img2 depois que o mouse ja passou pela terceira coluna o bug some.

joseRenato · 4 de janeiro de 2013

No IE 8 funcionou...rs testa ai

PS : mudei o chamada da jquery, pois estou no trabalho


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Untitled Document</title>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			var submenu1 = $("ul li ul li"); //encontra o primeir sub menu
			submenu1.hide(); // oculta o primeiro sub menu
			var submenu2 = $("ul li ul ul"); // encontra o segundo sub menu
			submenu2.hide(); // oculta o segundo sub menu

			$("#submenu").hover(function(){ //quando o mouse passar pela li com o id "submenu" abre o primeiro sub menu
				submenu1.toggle(); // quando o mouse passa abre, quando o mouse sai fecha
			});
			$("#submenu2").hover(function(){ // mesmo coisa aqui só que com o segundo sub menu 
				submenu2.toggle();
			});
		});
	</script>
	<style type="text/css">
		ul {
			padding:0;
			margin:0;
			list-style:none;
		}
		li {
			border: 1px solid black;
			width: 120px;
			padding:3px;
			position:relative;
		}
		li:hover{
			background-color:black;
			color:white;
		}
		li > ul {
			position:absolute;
			left:126px;
			top:-1px;
			color:black;
		}
	</style>

</head>

<body>
	<ul id="menu">
		<li>home</li>
		<li>t1</li>
		<li id="submenu">t2
			<ul>
				<li>t11</li>
				<li>t12</li>
				<li>t13</li>
				<li id="submenu2">t14
					<ul>
						<li>t141</li>
						<li>t142</li>
						<li>t143</li>
						<li>t144</li>
						<li>t145</li>
					</ul>
				</li>
				<li>t15</li>
			</ul>
		</li>
		<li>Casas</li>
		<li>Contato</li>
	</ul>

</body>
</html>

Eu não sei se você sabe, mas tem uma aula com o mesmo menu, só que apenas com CSS, e se eu não me engano, funciona no IE

Joel.f · 4 de janeiro de 2013

No IE 8 funcionou...rs testa ai

PS : mudei o chamada da jquery, pois estou no trabalho


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Untitled Document</title>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			var submenu1 = $("ul li ul li"); //encontra o primeir sub menu
			submenu1.hide(); // oculta o primeiro sub menu
			var submenu2 = $("ul li ul ul"); // encontra o segundo sub menu
			submenu2.hide(); // oculta o segundo sub menu

			$("#submenu").hover(function(){ //quando o mouse passar pela li com o id "submenu" abre o primeiro sub menu
				submenu1.toggle(); // quando o mouse passa abre, quando o mouse sai fecha
			});
			$("#submenu2").hover(function(){ // mesmo coisa aqui só que com o segundo sub menu 
				submenu2.toggle();
			});
		});
	</script>
	<style type="text/css">
		ul {
			padding:0;
			margin:0;
			list-style:none;
		}
		li {
			border: 1px solid black;
			width: 120px;
			padding:3px;
			position:relative;
		}
		li:hover{
			background-color:black;
			color:white;
		}
		li > ul {
			position:absolute;
			left:126px;
			top:-1px;
			color:black;
		}
	</style>

</head>

<body>
	<ul id="menu">
		<li>home</li>
		<li>t1</li>
		<li id="submenu">t2
			<ul>
				<li>t11</li>
				<li>t12</li>
				<li>t13</li>
				<li id="submenu2">t14
					<ul>
						<li>t141</li>
						<li>t142</li>
						<li>t143</li>
						<li>t144</li>
						<li>t145</li>
					</ul>
				</li>
				<li>t15</li>
			</ul>
		</li>
		<li>Casas</li>
		<li>Contato</li>
	</ul>

</body>
</html>

Eu não sei se você sabe, mas tem uma aula com o mesmo menu, só que apenas com CSS, e se eu não me engano, funciona no IE

valeu pela resposta amigo, me ajudou a ver outras formas de encontar a solução mas por enquanto aqui o problema persiste :/ , o IE insiste em mostrar na primeira vez (ul li ul li ul) ao invés de mostrar só (ul li ul), se eu encontrar a solução volto aqui pra postar.

joseRenato · 5 de janeiro de 2013

Cara, que estranho, pois baixei o IE 9, e funcionou normal aqui...

Não sei se você sabe, mas o IE bloqueia os script, ai você tem que liberar, para o browser executa-los!

Joel.f · 9 de janeiro de 2013

Cara, que estranho, pois baixei o IE 9, e funcionou normal aqui...
Não sei se você sabe, mas o IE bloqueia os script, ai você tem que liberar, para o browser executa-los!

Valeu, José Renato você ajudou muito. Eu segui o seu conselho e fui atras de formas de fazer o menu só com css e funcionou. Mas eu queria fazer um pequeno efeito no menu e isso só por javascript, então depois de ter feito todo o menu em css, recomecei e consegui fazer ele com javascript e finalmente consegui fazer ele do jeito que tinha imaginado. Fiquei muito feliz por não ter desistido. Vou mostrar o ponto chave para solucionar o problema. Mas antes só uma pequena correção no seu código, que foi muito útil por sinal, caso alguém queira usa-lo, na parte do hover, pelo que entendi, tem que se usar algo como o $(this) para identificar que você quer que mostre só a "ul" da "li" especificada caso contrario ele mostra todos os submenus. Seria algo como isso.

$("#menu > li").hover (
function(){$(this).find("ul:first").show()},
function(){$(this).find("ul:first").hide()}
);

Bem o que resolveu meu problema foi basicamente usar ">" para especificar a "ul", tanto no javascript quanto no css. Para impedir que o menu da frente aparece-se eu usei esse indicador para especificar.

Por exemplo em javascript no começo para esconder as "ul"

$(document)ready(function(){
$("#menu > li > ul").hide();
$("#menu > li > ul > li > ul").hide();
});

Com esse código você pode também enquanto mostra um ocultar o outro. Que é o que eu fiz no css algo do tipo

#menu > li:hover > ul {
display: block;
}
#menu > li:hover > ul > li > ul {
display: hidden;
}

Sei que alguns vão dizer que em certos lugares a seta é desnecessária e sei que usar coisas desnessárias não é algo bom em programação, mas meu código fico até que bem simples e o resultado, na minha opinião, muito bom. Testado no ie9, chrome e firefox.