Ir para conteúdo

POWERED BY:

Arquivado

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

Ricardo_valerio

[Resolvido] Fazer a function funcionar com mais de 1 ID

Por , em Javascript

Recommended Posts

Ricardo_valerio    0

Ricardo_valerio
Postado

Boa Tarde galera.

 

Estou com um problema um tanto quanto irritante.

 

Criei um menu vertical com submenus em javascript, este funcionou normalmente, porém preciso de 2 menus diferentes na mesma página e, quando insiro o 2º menu um dos dois sempre para de funcionar ou da algum tipo de erro :huh: .

 

Gostaria de saber se vocês tem alguma idéia do que eu estou errando.

 

Segue o código:

 

<script type="text/javascript"> 
function IEHoverPseudo() {


var navItems = document.getElementById("primary-nav").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"; }
}
}

}

window.onload=IEHoverPseudo;

</script>

<style type="text/css"> 

ul#primary-nav,
ul#primary-nav ul {
margin: 0;
padding: 0;
width: 150px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
background: #fff; /* IE6 Bug */
font-size: 100%;
}

ul#primary-nav li {
position: relative;
list-style: none;
}

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

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

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

ul#primary-nav li ul li a { padding: 2px 5px; } /* Sub Menu Styles */

ul#primary-nav li:hover ul ul,
ul#primary-nav li:hover ul ul ul,
ul#primary-nav li.over ul ul,
ul#primary-nav li.over ul ul ul { display: none; } /* Hide sub-menus initially */

ul#primary-nav li:hover ul,
ul#primary-nav li li:hover ul,
ul#primary-nav li li li:hover ul,
ul#primary-nav li.over ul,
ul#primary-nav li li.over ul,
ul#primary-nav li li li.over ul { display: block; } /* The magic */

ul#primary-nav li.menuparent { background: transparent url(arrow.gif) right center no-repeat; }

ul#primary-nav li.menuparent:hover,
ul#primary-nav li.over { background-color: #f9f9f9; }

ul#primary-nav li a:hover { color: #E2144A; }

</style>



<table width="180" cellspacing="0" cellpadding="0">
<tr>
<td><span style="color: #000080; font-weight: bold; font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif;">Serviços para Turismo </span></td>
</tr>
<tr>
<td>
<ul id="primary-nav">

<li class="menuparent"><a href="#">Hospedagem</a>
<ul>
<li><a href="/si/site/010001">Hotéis</a></li>
<li><a href="/si/site/010002">Flats</a></li>
<li><a href="/si/site/010003">Pousadas</a></li>
<li><a href="/si/site/010004">Chalés</a></li>
<li><a href="/si/site/010005">Camping</a></li>
<li><a href="/si/site/010006">Albergue</a></li>
</ul>
</li>

<li class="menuparent"><a href="#">Gastronomia</a> 
<ul><li><a href="/si/site/010101">Restaurantes</a></li>
<li><a href="/si/site/010102">Churrascarias</a></li>
<li><a href="/si/site/010103">Pizzarias</a></li>
<li><a href="/si/site/010104">Self-services</a></li>
<li><a href="/si/site/010105">Bares</a></li>
<li><a href="/si/site/010106">Lanchonetes</a></li>
<li><a href="/si/site/010107">Sorveterias</a></li></ul>
</li>

<li class="menuparent"><a href="#">Imóveis</a> 
<ul><li><a href="/si/site/010201">Alugar</a></li>
<li><a href="/si/site/010202">Comprar</a></li>
<li><a href="/si/site/010203">Temporada</a></li></ul>
</li>

<li class="menuparent"><a href="#">Praia / Natureza</a> 
<ul><li><a href="/si/site/010301">Praias</a></li>
<li><a href="/si/site/010302">Ilhas</a></li>
<li><a href="/si/site/010303">Cachoeiras</a></li></ul>
</li>

<li class="menuparent"><a href="#">Passeios / Aventura</a> 
<ul><li><a href="/si/site/010401">Passeios de Escuna</a></li>
<li><a href="/si/site/010402">Ecoturismo / Trilhas</a></li>
<li><a href="/si/site/010403">Guias de Pesca</a></li>
<li><a href="/si/site/010404">Esportes Radicais</a></li>
<li><a href="/si/site/010405">Roteiros Turísticos</a></li>
<li><a href="/si/site/010406">Aquários</a></li>
<li><a href="/si/site/010407">Projeto Tamar</a></li></ul>
</li>

<li><a href="/si/site/010501">Eventos Anuais</a></li>

<li class="menuparent"><a href="#">Esportes Náuticos</a> 
<ul><li><a href="/si/site/010601">Surf</a></li>
<li><a href="/si/site/010602">Mergulho</a></li>
<li><a href="/si/site/010603">Pesca</a></li></ul>
</li>

<li class="menuparent"><a href="#">Serviços Náuticos</a> 
<ul><li><a href="/si/site/010701">Marinas</a></li>
<li><a href="/si/site/010702">Garagens Náuticas</a></li>
<li><a href="/si/site/010703">Locação de Embarcações</a></li></ul>
</li>

<li><a href="/si/site/0108">Lazer noturno</a></li>

<li class="menuparent"><a href="#">Informações</a>
<ul><li><a href="/si/site/010901">Bancos</a></li>
<li><a href="/si/site/010902">Telefones Úteis</a></li>
<li><a href="/si/site/010903">Prefeitura</a></li>
<li><a href="/si/site/010904">Câmara Municipal</a></li>
<li><a href="/si/site/010905">Associação Comercial</a></li></ul>
</li>


</ul>
</td>
</tr>
<tr>
<td height="20"> </td>
</tr>
<tr>
<td><span style="color: #000080; font-weight: bold; font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif;">Serviços para Turismo </span></td>
</tr>
<tr>
<td>

<ul id="primary-nav">

<li><a href="/si/site/0200">Arte e Artesanato</a></li>

<li><a href="/si/site/0201">Acadêmias / Mat. esportivo</a></li>

<li class="menuparent"><a href="#">Abasteça a sua Casa</a> 
<ul>
<li><a href="/si/site/020201">Supermercado</a></li>
<li><a href="/si/site/020202">Padaria</a></li>
<li><a href="/si/site/020203">Açougue</a></li>
<li><a href="/si/site/020204">Peixaria</a></li>
<li><a href="/si/site/020205">Quitanda</a></li>
<li><a href="/si/site/020206">Água / Gás</a></li>
</ul>
</li>

<li class="menuparent"><a href="#">Automóveis / Veículos</a> 
<ul>
<li><a href="/si/site/020301">Aluguel de Veículos</a></li>
<li><a href="/si/site/020302">Oficina Mecânica</a></li>
<li><a href="/si/site/020303">Auto Elétrico</a></li>
<li><a href="/si/site/020304">Borracharia</a></li>
<li><a href="/si/site/020305">Auto Peças / Acessórios</a></li>
<li><a href="/si/site/020306">Autoescola</a></li>
<li><a href="/si/site/020307">Despachante</a></li>
<li><a href="/si/site/020308">Posto de Combustível</a></li>
</ul>
</li>

<li class="menuparent"><a href="#">Casa / Decoração</a> 
<ul><li><a href="/si/site/020401">Decoradores</a></li>
<li><a href="/si/site/020402">Paisagismo / Flora</a></li>
<li><a href="/si/site/020403">Móveis & Ultensílios</a></li>
</ul>
</li>

<li class="menuparent"><a href="#">Construção Civil</a>
<ul>
<li><a href="/si/site/020501">Arquitetos / Engenheiros</a></li>
<li><a href="/si/site/020502">Material para Construção</a></li>
<li><a href="/si/site/020503">Piscinas e Acessórios</a></li>
<li><a href="/si/site/020504">Serviços</a></li></ul>
</li>

<li class="menuparent"><a href="#">Cultura / Lazer / Artes</a> 
<ul><li><a href="/si/site/020601">Teatro / Espaços Culturais</a></li>
<li><a href="/si/site/020602">Cinema</a></li>
<li><a href="/si/site/020603">Clubes / Associação</a></li>
<li><a href="/si/site/020604">Bibliotecas</a></li>
<li><a href="/si/site/020605">Locadora Vídeo / DVD</a></li>
<li><a href="/si/site/020606">Lan House</a></li>
<li><a href="/si/site/020607">Livros e Revistas</a></li>
<li><a href="/si/site/020608">Papelaria</a></li></ul>
</li>

<li><a href="/si/site/0207">Estética</a></li>

<li><a href="/si/site/0208">Moda e Vestuário</a></li>

<li><a href="/si/site/0209">Pet-Shop</a></li>


<li class="menuparent"><a href="#">Saúde</a>
<ul><li><a href="/si/site/021001">Hospitais</a></li>
<li><a href="/si/site/021002">Clínicas</a></li>
<li><a href="/si/site/021003">Médicos</a></li>
<li><a href="/si/site/021004">Dentistas</a></li>
<li><a href="/si/site/021005">Óticas</a></li>
<li><a href="/si/site/021006">Drogarias</a></li>
<li><a href="/si/site/021007">Farmácias de Manipulação</a></li></ul>
</li>

<li class="menuparent"><a href="#">Serviços Gerais</a>
<ul><li><a href="/si/site/021101">Lavanderia</a></li>
<li><a href="/si/site/021102">Loteria</a></li>
<li><a href="/si/site/021103">Floricultura</a></li>
<li><a href="/si/site/021104">Chaveiro</a></li>
<li><a href="/si/site/021105">Fotografia</a></li>
<li><a href="/si/site/021106">Relojoaria</a></li>
<li><a href="/si/site/021107">Outros</a></li></ul>
</li>

<li><a href="/si/site/0212">Shopping</a></li>

</ul>
</td>
</tr>
</table>

desde já agradeço ae galera

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

faça assim o teu JS:

<script type="text/javascript"> 
function IEHoverPseudo( id_menu )
{
	var navItems = document.getElementById( id_menu ).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"; }
		}
	}
}
window.onload = function(){
	IEHoverPseudo( 'primary-nav' );
	IEHoverPseudo( 'second-nav' );
}
</script>
e então, dê IDs diferentes para cada menu.

Pois id é um seletor único, por isso não deve se repetir na mesma página.

<ul id="primary-nav">
	<li><a href="/si/site/0200">Arte e Artesanato</a></li>
e 

<ul id="second-nav">
	<li><a href="/si/site/0200">Arte e Artesanato</a></li>

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