Ir para conteúdo

POWERED BY:

Arquivado

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

Claudio Escudero

Problema no Menu Drop Down

Por , em Desenvolvimento frontend

Recommended Posts

Claudio Escudero    0

Claudio Escudero
Postado

Pessoal, estou tendo um pequeno problema no Menu Drop Down no IE.

 

Tem algumas areas do meu site q existe um select ao lado do Menu Drop Down.

E o Menu Drop Down fica abaixo do select.

 

Estou colocando uma imagem de exemplo.

 

Pelo IE

Imagem Postada

 

Pelo Firefox

Imagem Postada

 

Pagina de teste

http://www.claudioescudero.com/defeito/menu.html

 

O codigo é.

 

<html><head><title>Teste</title><style type="text/css">.colunaesq #menu  ul {	margin: 0;	padding: 0;	list-style: none;	width:150px;}.colunaesq #menu  ul li ul{	margin: 0;	padding: 0;	list-style: none;	width: 100px;}.colunaesq #menu  ul li {	position: relative;}.colunaesq #menu  li ul {	position: absolute;	left: 140px; /* Set 1px less than menu width */	top: -5px;	display: none;}/* Styles for Menu Items */.colunaesq #menu  ul li a {	display: block;	text-decoration: none;	font-size: 11px;	color: #000000;	background: #FFFFFF;	padding: 4px;	border: 1px solid #000000; /* IE6 Bug */	margin-top: 5px;}.colunaesq #menu  ul li ul li a {	margin-top: 0px;}.colunaesq #menu  ul li a:hover {	background: #9DDB60;}/* Holly Hack. IE Requirement \*/* html .colunaesq #menu  ul li { float: left; height: 1%; }* html .colunaesq #menu  ul li a { height: 1%; }/* End */.colunaesq #menu  li:hover ul, .colunaesq #menu  li.over ul {	display: block;} /* The magic */</style><script type="text/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;</script></head><body>	<div class="colunaesq">  <div id="menu"> 	 <ul id="nav">    <li class="meusdados"><a href="#">Principal</a></li>    <li class="peladas"><a href="#">Coluna</a>    	 <ul>      <li><a href="#">Sessao 1</a></li>      <li><a href="#">Sessao 2</a></li>      <li><a href="#">Sessao 3</a></li>      <li><a href="#">Sessao 4</a></li>      <li><a href="#">Sessao 5</a></li>   	 </ul>    </li>    <li class="locaisdepelada"><a href="#">Artigos</a>    	 <ul>      <li><a href="#">Artigo 1</a></li>      <li><a href="#">Artigo 2</a></li>      <li><a href="#">Artigo 3</a></li>      <li><a href="#">Artigo 4</a></li>      <li><a href="#">Artigo 5</a></li>      <li><a href="#">Artigo 6</a></li>      <li><a href="#">Artigo 7</a></li>   	 </ul>    </li> 	 </ul>  </div>	</div>	<br>	<select name="teste">  <option>testando testando testando testando 1</option>  <option>teste 2</option>  <option>teste 3</option>	</select>	</body></html>
Se alguem puder me dar essa força para eu resolver esse problema.

Ja estou tentando ja faz semanas e nao sai nada. Meu chefe ja vai me matar com isso. hehe

 

Falows

Compartilhar este post

Link para o post
Compartilhar em outros sites

boiler    0

boiler
Postado

Os únicos jeitos de se resolver isso são ou mudando o lugar do menu, ou do drop.

Ou também usando javascript para ocultar o select quando o menu pop up estiver ativo. :(

O site da Adobe faz isso com um flash que tem na homepage mudando-o para uma imagem. No caso da Adobe, se continuasse o flash, ele faria a mesma coisa que acontece na sua página com o select.

No seu caso ele deve ficar com display:none.

Dá uma estudada la no código deles que eu acho que é a forma mais sensata de se fazer.

Um abraço! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Leandro Vieira Pinho    0

Leandro Vieira Pinho
Postado

Pessoal, estou tendo um pequeno problema no Menu Drop Down no IE.

 

Tem algumas areas do meu site q existe um select ao lado do Menu Drop Down.

E o Menu Drop Down fica abaixo do select.

 

Estou colocando uma imagem de exemplo.

 

Pelo IE

Imagem Postada

 

Pelo Firefox

Imagem Postada

 

Pagina de teste

http://www.claudioescudero.com/defeito/menu.html

 

O codigo é.

 

<html><head><title>Teste</title><style type="text/css">.colunaesq #menu  ul {	margin: 0;	padding: 0;	list-style: none;	width:150px;}.colunaesq #menu  ul li ul{	margin: 0;	padding: 0;	list-style: none;	width: 100px;}.colunaesq #menu  ul li {	position: relative;}.colunaesq #menu  li ul {	position: absolute;	left: 140px; /* Set 1px less than menu width */	top: -5px;	display: none;}/* Styles for Menu Items */.colunaesq #menu  ul li a {	display: block;	text-decoration: none;	font-size: 11px;	color: #000000;	background: #FFFFFF;	padding: 4px;	border: 1px solid #000000; /* IE6 Bug */	margin-top: 5px;}.colunaesq #menu  ul li ul li a {	margin-top: 0px;}.colunaesq #menu  ul li a:hover {	background: #9DDB60;}/* Holly Hack. IE Requirement \*/* html .colunaesq #menu  ul li { float: left; height: 1%; }* html .colunaesq #menu  ul li a { height: 1%; }/* End */.colunaesq #menu  li:hover ul, .colunaesq #menu  li.over ul {	display: block;} /* The magic */</style><script type="text/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;</script></head><body>	<div class="colunaesq">  <div id="menu">	  <ul id="nav">	<li class="meusdados"><a href="#">Principal</a></li>	<li class="peladas"><a href="#">Coluna</a> 		<ul>	  <li><a href="#">Sessao 1</a></li>	  <li><a href="#">Sessao 2</a></li>	  <li><a href="#">Sessao 3</a></li>	  <li><a href="#">Sessao 4</a></li>	  <li><a href="#">Sessao 5</a></li>		</ul>	</li>	<li class="locaisdepelada"><a href="#">Artigos</a> 		<ul>	  <li><a href="#">Artigo 1</a></li>	  <li><a href="#">Artigo 2</a></li>	  <li><a href="#">Artigo 3</a></li>	  <li><a href="#">Artigo 4</a></li>	  <li><a href="#">Artigo 5</a></li>	  <li><a href="#">Artigo 6</a></li>	  <li><a href="#">Artigo 7</a></li>		</ul>	</li>	  </ul>  </div>	</div>	<br>	<select name="teste">  <option>testando testando testando testando 1</option>  <option>teste 2</option>  <option>teste 3</option>	</select>	</body></html>
Se alguem puder me dar essa força para eu resolver esse problema.

Ja estou tentando ja faz semanas e nao sai nada. Meu chefe ja vai me matar com isso. hehe

 

Falows

Acabei de passar pelo mesmo problema, e logo corri ao fórum para ver se encontra alguma solução. Busquei no fórum e vi diversos posts sobre o assunto e todos esses sem solução. Ao analisar o seu caso percebi que é indêntico ao que utilizei para um cliente.

 

Então resolvi da seguinte forma:

 

O bug ocorre somente com o IE (tinha que ser) e o javascript que consta tem a função de exibir as opções do menu também para ele (ie), uma vez que os browsers decentes não tem esse DEFEITO.

 

Então o que fiz aqui para resolver é ocultar o campo select quando passar o mouse sobre o menu e voltá-lo quando tirar o mouse. Então seu código em JS, ficaria assim:

 

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";[b]document.getElementById("aqui_é_id_do_select").style.visibility="hidden";[/b]				}				node.onmouseout=function() {					this.className=this.className.replace(" over", "");[b]document.getElementById("aqui_é_id_do_select").style.visibility="visible";[/b]				}			}		}	}}window.onload=startList;
Aqui funcionou. Acho que lhe ajudará. Um abraço.

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