Ir para conteúdo

POWERED BY:

Arquivado

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

danielvlopes

Problemas com menupopup vertical no IE 6

Por , em Desenvolvimento frontend

Recommended Posts

danielvlopes    0

danielvlopes
Postado

Olá pessoal...

Estou com uma duvida gravissima em um projeto meu.

Fiz um menu popup vertical que funciona perfeitamente no IE, FF e todo os outros quando texto localmente na minha maquina.

Quando envio para o servidor para testar, no IE6 ele não carrega direito as imagens do menu, muito estranho...

 

Estou usando lista para fazer o menu, Por exemplo ao passar o mouse sobre o menu ele fica um tempinho sem mostrar nada até mostrar a imagem de background.

 

Não sei se o erro está no meu js ou no meu css.

Será que alguem poderia me ajudar???

 

Links:

http://www.areacreations.com.br/projetos/bms

css: http://www.areacreations.com.br/projetos/bms/css/geral.css

js: http://www.arecreations.com.br/projetos/bms/js/menu.js

 

Obrigado

Compartilhar este post

Link para o post
Compartilhar em outros sites

danielvlopes    0

danielvlopes
Postado

Olá pessoal passei o dia tentando resolver isso e não consegui sera que alguem poderia dar uma luz?

 

http://www.areacreations.com.br/projetos/bms

css: http://www.areacreations.com.br/projetos/bms/css/geral.css A parte do menu popup está no fim do css , marcado comcomentários.

js: http://www.arecreations.com.br/projetos/bms/js/menu.js

Compartilhar este post

Link para o post
Compartilhar em outros sites

hunternh    2

hunternh
Postado

Para não dar esse problema você deve fazer um pré-carregamento dessa imagem.

Compartilhar este post

Link para o post
Compartilhar em outros sites

hunternh    2

hunternh
Postado

Não testei o script, mas acho que é isso:

 

var imagem = new Image();imagem.src = "../imagens/comum/menu_over.jpg";sfHover = function() {	var sfEls = document.getElementById("nav").getElementsByTagName("LI");	for (var i=0; i<sfEls.length; i++) {		sfEls[i].onmouseover=function() {			this.className+=" sfhover";			this.getElementsByTagName("a")[0].style.backgroundImage = "url("+imagem.src+")";		}		sfEls[i].onmouseout=function() {			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");			this.getElementsByTagName("a")[0].style.backgroundImage = "none";		}	}}if (window.attachEvent) window.attachEvent("onload", sfHover);

Teste ai, você não vai colocar imagem no link no a:hover e sim com esse script.

Compartilhar este post

Link para o post
Compartilhar em outros sites

danielvlopes    0

danielvlopes
Postado

Olá hunter coloquei seu código no meu js...Deu uma melhorada de alguns milisegundos mas ainda ta esquisito.Não entendo, as imagens são tão pequenas, pq demora a carregar?

Compartilhar este post

Link para o post
Compartilhar em outros sites

hunternh    2

hunternh
Postado

Olha eu abri no IE6 e no IE7 e a imagem abriu instantaneamente, até apaguei todos os arquivos off-line, mas reparei numa coisa no IE7 o menu está com bug, os submenus estão aparecendo uns 100px mais distantes do menu.PS: qualquer coisa separe o código do menu o css e o js e poste aqui.

Compartilhar este post

Link para o post
Compartilhar em outros sites

danielvlopes    0

danielvlopes
Postado

Olá hunter, já estou ficando doido com esse negócio.

No meu continua dando pau... quando passo o mouse por cima somem todas as imagens e só depois começa a carregar, da o mesmo pau...

 

Oque você disse do IE7 deve ser por causa deste trecho do meu css:

 

#nav li ul

{ /*sub items do menu popup*/

position: absolute;

left: -999em;

margin-left:147px;

_margin-left : 75px; /*Apenas para IE6*/

margin-top : -25px;

}

 

Coloco o _margin para o IE colocar os submenus no lugar certo pq ele não esses 147px que todos os outros navegadores leem do mesmo jeito. E o IE7 deve ler _margin também...

f***... não sei mais o que fazer...

você não sabe algum lugar que tenha um tutorial bom para isso??? Eu peguei do suckerfish mas ta essa m***** pq os caras não usaram imagens no menu dele.

 

To postando o código do meu css:

/*########-MENU POP UP-############*/#nav, #nav ul { /* propriedades de todas as listas lists */	padding: 0;	margin:0px 1px 0px 1px;	list-style: none;	float : left;	width : 146px;	height:25px;	font-family:tahoma;	font-size:11px;	text-align:center;}	#nav li { /* items da lista */	position : relative;	float : left;	line-height : 25px;	margin-bottom : -1px;	width: 146px;	color:#5a5a5a;	background-image:url(../imagens/comum/menu.jpg);}	#nav li ul{ /*sub items do menu popup*/	position: absolute;	left: -999em;	margin-left:147px;	_margin-left : 75px; /*Apenas para IE6*/	margin-top : -25px;}	#nav li ul ul { /*terceiro ou mais sub items */	left: -999em;}	#nav li a {	width: 146px;	display : block;	text-decoration : none;	color:#333333;}/*#nav li a:hover {	background-image:url(../imagens/comum/menu_over.jpg);	color: #FFFFFF;}*/	#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {	left: -999em;}	#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { 	left: auto;}

Código do meu JS:

var imagem = new Image();imagem.src = "../imagens/comum/menu_over.jpg";sfHover = function() {	var sfEls = document.getElementById("nav").getElementsByTagName("LI");	for (var i=0; i<sfEls.length; i++) {		sfEls[i].onmouseover=function() {			this.className+=" sfhover";			this.getElementsByTagName("a")[0].style.backgroundImage = "url("+imagem.src+")";		}		sfEls[i].onmouseout=function() {			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");			this.getElementsByTagName("a")[0].style.backgroundImage = "none";		}	}}if (window.attachEvent) window.attachEvent("onload", sfHover);

Meu HTML:

<div id="menu">			<ul id="nav">				<li><a href="">HEADLINE</a></li>							<li><a href="">ARTIGOS</a>					<ul>						<li><a href="">Artigo Técnico</a></li>						<li><a href="">Gestão Empresarial</a></li>						<li><a href="">Internet</a></li>						<li><a href="">Saúde Ocupacional</a></li>					</ul>				</li>							<li><a href="">NEGÓCIOS</a>					<ul>						<li><a href="">Fornecedores</a></li>						<li><a href="">Equipamentos Usados</a></li>						<li><a href="">Empregos</a></li>						<li><a href="">Licitações</a></li>					</ul>				</li>								<li><a href="">EVENTOS</a></li>									<li><a href="">MINERADORAS</a></li>								<li><a href="">CONTATO</a>					<ul>						<li><a href="">Anuncie Aqui</a></li>						<li><a href="">Fale Conosco</a></li>						<li><a href="">Nossa Empresa</a></li>					</ul>				</li>								<li><a href="">LINKS</a>					<ul>						<li><a href="">bancos</a></li>						<li><a href="">bolsas de metais</a></li>						<li><a href="">bolsas de valores</a></li>						<li><a href="">índices econômicos</a></li>						<li><a href="">índices americanos</a></li>						<li><a href="">livrarias</a></li>						<li><a href="">órgãos governamentais</a></li>						<li><a href="">órgãos não governamentais</a></li>						<li><a href="">revistas</a></li>						<li><a href="">universidades</a></li>										</ul>				</li>							</ul>	</div>

Compartilhar este post

Link para o post
Compartilhar em outros sites

danielvlopes    0

danielvlopes
Postado

Eu não olhei o seu código ainda, mas eu postei um aqui que funciona no IE6, IE7, FF, Opera, da uma olhada nele funcionando: http://hunternh.110mb.com/menu/horizontal_e_vetical.html

Esse menu tem o mesmo problema que o meu, ele funciona bem sem imagem, quando coloco imagem de background da pau...Achei esse aqui mas ele também da o mesmo pau:http://www.seoconsultants.com/nav/x/left-mother.aspAlguem pode me ajudar?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

Se você pudesse ver meu vídeo estaria sendo útil...

 

- http://www.web2ponto0.com.br/video-2-imple...-de-layout-css/

 

Neste eu também mostro a mesma técnica, mas não é específico, por isso é maior...

 

[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

hunternh    2

hunternh
Postado

Ta resolvido, ja fica como script para que quiser usar:

 

E uma coisa interessante fazendo essas alterações eu reparei numa coisa que não tinha visto antes que no IE7 isso não funciona * html ul.menu li a { height: 1%;} tem que ser * ul.menu li a { height: 1%;}:

 

Bom testa o script agora.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Menu horizontal e vertical</title><script type="text/javascript">//<![CDATA[var imagens = new Array(new Image(), new Image());imagens[0].src = "menu.jpg";imagens[1].src = "menu_over.jpg";function vertical(){	var navItems = document.getElementById("nav").getElementsByTagName("li");		for (var i=0; i< navItems.length; i++)	{		navItems[i].onmouseover=function()		{			if(this.className == "submenu")this.getElementsByTagName('ul')[0].style.display="block";			this.style.backgroundImage = "url("+imagens[1].src+")";		}		navItems[i].onmouseout=function()		{			if(this.className == "submenu")this.getElementsByTagName('ul')[0].style.display="none";			this.style.backgroundImage = "url("+imagens[0].src+")";		}	}}//]]></script><style type="text/css">body { font: normal 62.5% verdana; }ul.menu,ul.menu ul{	margin: 0;	padding: 0;	border-bottom: 1px solid #ccc;	width: 146px; /* Width of Menu Items */	background-color: #FFFFFF; /* IE6 Bug */}ul.menu li{	position: relative;	list-style: none;	border: 0px;	background: transparent url(menu.jpg) center center no-repeat;}ul.menu li a{	display: block;	text-decoration: none;	border: 1px solid #ccc;	border-bottom: 0px;	color: #6090C0;	padding: 5px 10px 5px 5px;}/* Fix IE. Hide from IE Mac \*/* html ul.menu li { float: left; height: 1%; }* ul.menu li a { height: 1%;}/* End */ul.menu ul{	position: absolute;	display: none;	left: 145px; /* Set 1px less than menu width */	top: 0px;}ul.menu li.submenu ul { display: none; } /* Hide sub-menus initially */ul.menu a.seta { background: transparent url(arrow.gif) right center no-repeat; }ul.menu li a:hover { color: #FFFFFF; }</style></head><body onload="vertical();"><ul id="nav" class="menu">  <li><a href="#">Home</a></li>  <li class="submenu"><a href="#" class="seta">About</a> 	<ul>	  <li><a href="#">History</a></li>	  <li><a href="#">Team</a></li>	  <li><a href="#">Offices</a></li>	</ul>  </li>  <li class="submenu"><a href="#" class="seta">Services</a> 	<ul>	  <li><a href="#">Web Design</a></li>	  <li><a href="#">Internet Marketing</a></li>	  <li class="submenu"><a href="#" class="seta">Hosting</a> 		<ul>		  <li><a href="#">Dedicated</a></li>		  <li class="submenu"><a href="#" class="seta">Virtual</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>		  <li><a href="#">Shared</a></li>		  <li><a href="#">Managed</a></li>		</ul>	  </li>	  <li><a href="#">Domain Names</a></li>	  <li><a href="#">Broadband</a></li>	</ul>  </li>  <li class="submenu"><a href="#" class="seta">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></body></html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

danielvlopes    0

danielvlopes
Postado

Boa hunter muito legal... Eu tinha resolvido usando o código em js dessa forma:

try {	  document.execCommand("BackgroundImageCache", false, true);	} catch(err) {}

Mas não sei pq não está funcionando no Opera, e o código que você fez está funcionando no opera... Logo sua solução é bem melhor.... Muito obrigado cara.

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