Ir para conteúdo

POWERED BY:

Arquivado

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

André AgênciaInovar

[Resolvido] Travar o menu. UL, LI

Por , em Javascript

Recommended Posts

André AgênciaInovar    0

André AgênciaInovar
Postado

Galera, BOM DIA.

 

É o seguinte tenho um menu no seguinte modelo:

 

HTML

<div id="menu" class="menu">
		<ul id="menu_dropdown" class="menubar">
				 <li><a href="#clientes/addCliente" class="history">Cadastrar clientes</a></li>
		</ul>
		<ul id="menu_dropdown" class="menubar">
				 <li><a href="#clientes/addCliente" class="history">Cadastrar clientes</a></li>
		</ul>
		<ul id="menu_dropdown" class="menubar">
				 <li><a href="#clientes/addCliente" class="history">Cadastrar clientes</a></li>
		</ul>
		<ul id="menu_dropdown" class="menubar">
				 <li><a href="#clientes/addCliente" class="history">Cadastrar clientes</a></li>
		</ul>

CSS

.menu ul.menubar{
  margin: 0px;
  padding:0px;
  height:60px;
}
 
.menu ul.menubar .submenu{
  margin: 0px;
  padding: 0px;
  padding-left:25px;
  padding-right:25px;
  list-style: none;
  float:left;
  height:60px;
  background-image:url(../imagens/tracoMenu.png);
  background-repeat:no-repeat;
  background-position:right;
}
 
.menu ul.menubar ul.menu{
  width: 100%;
  display: none;
  position: absolute;
  left:0px;
  margin: 0px;
  margin-top:2px;
}
 
.menu ul.menubar a{
  padding: 5px;
  display:block;
  text-decoration: none;
  padding: 5px;
  color: #FFF;
  text-align:center;
}
 
.menu ul.menu, ul.menu ul{
  margin: 0;
  padding: 0;
  width: 300px; /* Width of Menu Items */
  background-color: #E27E34; /* IE6 Bug */
}
 
.menu ul.menu li{
  position: relative;
  list-style: none;
  border: 0px;
  float:left;
}
 
.menu ul.menu li a{	
  display: block;
  text-decoration: none;
  border-bottom: 0px;
  padding: 5px 15px 5px 15px;
  font-size:12px;
}
 
.menu ul.menu li sup{
  font-weight:bold;
  font-size:7px;
  color: red;
}
 
/* Fix IE. Hide from IE Mac \*/
* html ul.menu li { float: left; height: 1%;  }
* html ul.menu li a { font-size:12px;  }
/* End */
 
.menu ul.menu ul{
  position: absolute;
  display: none;
  left: 149px; /* Set 1px less than menu width */
  top: 0px;
}
 
.menu ul.menu li.submenu ul { display: none;} /* Hide sub-menus initially */
 
.menu ul.menu li.submenu { background: transparent url(arrow.gif) right center no-repeat;}
 
.menu ul.menu li a:hover {
	background-color:#EAA36F;
}

AGORA O MAIS IMPORTANTE JAVASCRIPT

function horizontal() {
 
   var navItems = document.getElementById("menu_dropdown").getElementsByTagName("li");
   
   for (var i=0; i< navItems.length; i++) {
	  if(navItems[i].className == "submenu")
	  {
		 if(navItems[i].getElementsByTagName('ul')[0] != null){
			 
			 navItems[i].onmouseover=function() {this.getElementsByTagName('ul')[0].style.display="block";this.style.backgroundColor = "#7589B7";}
			 //navItems[i].onmouseout=function() {this.getElementsByTagName('ul')[0].style.display="none";this.style.backgroundColor = "";}
		 }
	  }
   }
}

Isso faz o seguinte.

Ao passar o mouse ativa o subMenu LI. Mas quando eu tiro o mouse ele desaparece.

Até aí ta certo.

 

Mas quando tento utilizar o menu novamente ele dá pau...

 

Eu queria que ao tirar o mouse o conteudo permanece ativo...

mas quando eu retornar o mouse o menu tem que funcionar normalmente...

 

Abraços a todos e muito obrigado!

Compartilhar este post

Link para o post
Compartilhar em outros sites

André AgênciaInovar    0

André AgênciaInovar
Postado 

<!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"> 
function vertical() { 

   var navItems = document.getElementById("nav").getElementsByTagName("li"); 
   
   for (var i=0; i< navItems.length; i++) { 
	  if(navItems[i].className == "submenu") { 
		 navItems[i].onmouseover=function() {this.getElementsByTagName('ul')[0].style.display="block";this.style.backgroundColor = "#f9f9f9";} 
		 navItems[i].onmouseout=function() {this.getElementsByTagName('ul')[0].style.display="none";this.style.backgroundColor = "#FFFFFF";} 
	  } 
   } 
} 

function horizontal() { 

   var navItems = document.getElementById("barra").getElementsByTagName("li"); 
	
   for (var i=0; i< navItems.length; i++) { 
	  if((navItems[i].className == "menuvertical") || (navItems[i].className == "submenu")) 
	  { 
		 if(navItems[i].getElementsByTagName('ul')[0] != null) 
		 { 
			navItems[i].onmouseover=function() {this.getElementsByTagName('ul')[0].style.display="block";this.style.backgroundColor = "#f9f9f9";} 
			//navItems[i].onmouseout=function() {this.getElementsByTagName('ul')[0].style.display="none";this.style.backgroundColor = "#FFFFFF";} 
		 } 
	  } 
   } 

} 

</script> 

<style type="text/css"> 

body { font: normal 62.5% verdana; } 

ul.menubar 
{ 
   margin: 0px; 
   padding: 0px; 
   background-color: #FFFFFF; /* IE6 Bug */ 
   font-size: 100%; 
   } 

ul.menubar .menuvertical 
{ 
   margin: 0px; 
	 padding: 0px; 
	 list-style: none; 
	 background-color: #FFFFFF; 
   border: 1px solid #ccc; 
   float:left; 
} 

ul.menubar ul.menu 
{ 
   display: none; 
   position: absolute; 
   margin: 0px; 
} 

ul.menubar a 
{ 
   padding: 5px; 
   display:block; 
   text-decoration: none; 
   color: #777; 
   padding: 5px; 
} 


ul.menu, 
ul.menu ul 
{ 
   margin: 0; 
   padding: 0; 
   border-bottom: 1px solid #ccc; 
   width: 150px; /* Width of Menu Items */ 
   background-color: #FFFFFF; /* IE6 Bug */ 
} 

ul.menu li 
{ 
   position: relative; 
   list-style: none; 
   border: 0px; 
} 

ul.menu li a 
{ 
   display: block; 
   text-decoration: none; 
   border: 1px solid #ccc; 
   border-bottom: 0px; 
   color: #777; 
   padding: 5px 10px 5px 5px; 
} 

/* Fix IE. Hide from IE Mac \*/ 
* html ul.menu li { float: left; height: 1%; } 
* html ul.menu li a { height: 1%; } 
/* End */ 

ul.menu ul 
{ 
   position: absolute; 
   display: none; 
   left: 149px; /* Set 1px less than menu width */ 
   top: 0px; 
} 

ul.menu li.submenu ul { display: none; } /* Hide sub-menus initially */ 

ul.menu li.submenu { background: transparent url(arrow.gif) right center no-repeat; } 

ul.menu li a:hover { color: #E2144A; } 

</style> 
</head> 
<body onload="vertical();horizontal();"> 
<ul id="nav" class="menu"> 
  <li><a href="#">Home</a></li> 

  <li class="submenu"><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 class="submenu"><a href="#">Services</a> 
	<ul> 
	  <li><a href="#">Web Design</a></li> 
	  <li><a href="#">Internet Marketing</a></li> 
	  <li class="submenu"><a href="#">Hosting</a> 
		<ul> 
		  <li><a href="#">Dedicated</a></li> 

		  <li class="submenu"><a href="#">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="#">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> 
<br /> 
<br /> 
<br /> 
<br /> 
<ul id="barra" class="menubar"> 
   <li class="menuvertical"><a href="#">Menu 1</a> 
	  <ul id="nav" class="menu"> 
		<li><a href="#">Home</a></li> 
	   
		<li class="submenu"><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 class="submenu"><a href="#">Services</a> 
		  <ul> 
			<li><a href="#">Web Design</a></li> 
			<li><a href="#">Internet Marketing</a></li> 
			<li class="submenu"><a href="#">Hosting</a> 
			  <ul> 
				<li><a href="#">Dedicated</a></li> 
	   
				<li class="submenu"><a href="#">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="#">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> 
   </li> 
   <li class="menuvertical"><a href="#">Menu 2</a></li> 
   <li class="menuvertical"><a href="#">Menu 3</a> 
	  <ul id="nav" class="menu"> 
		<li><a href="#">Home</a></li> 
	   
		<li class="submenu"><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 class="submenu"><a href="#">Services</a> 
		  <ul> 
			<li><a href="#">Web Design</a></li> 
			<li><a href="#">Internet Marketing</a></li> 
			<li class="submenu"><a href="#">Hosting</a> 
			  <ul> 
				<li><a href="#">Dedicated</a></li> 
	   
				<li class="submenu"><a href="#">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="#">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> 
   </li> 
</ul> 
	
</body>
</html>

Assim vai ficar mais simples...

Vejam o 1º menu está perfeito!!!

 

Agora o segundo.... está com o seguinte erro que preciso arrumar... Irei fazer passo-a-passo minha necessidade...

 

coloco o mouse sobre o menu 3...

tiro o mouse e o menu continua aberto! PERFEITO

 

agora coloco o mouse sobre o menu 1...

o menu 3 continua ativo!

ERRADO!

 

preciso arrumar isso...

conto com todos...

 

abraçosS

Compartilhar este post

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

Informação importante

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

  Aceito