Ir para conteúdo

POWERED BY:

Arquivado

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

saulo69

logica de eventos

Por , em Javascript

Recommended Posts

saulo69    1

saulo69
Postado

Bom dia pessoal, criei um script para um efeito de menu "Sanfona", tipo, quando passa o mouse por cima da div "Sedes" abre o submenu com as sedes (administrativa, social, lazer...). Eu quero que quando eu tirar o mouse da div "submenu" o sub menu desapareça...

 

Segue o codigo:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AMEPE - Associação dos Magistrados de Pernambuco</title>
<script src="jquery.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript">
// ao carregar o documento faça...
$(document).ready(function() {
		$("#MenuInstitucional").mouseover(function(){
		$("#MenuGlobalSubInstitucional").show("slow");
		});
			$("#MenuGlobalSubInstitucional").mousemove(function(){
				$("#MenuGlobalSubInstitucional").hide("slow"); 
			});	


}); // fim do ao carregar

</script>

<style type="text/css">
<!--
body {
font:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
margin:0;
}
.Associacao{
font-family:Arial, Helvetica, sans-serif;
color:#134172;
font-size:16px;
text-shadow:   1px 1px #FFFFFF;

}
-->
</style></head>

<body>
<div id="topo" style="width:1000px; height:158px; background-image:url(images/BgTopo.jpg); background-repeat:repeat-x; margin:0 auto;">
 <table width="426" border="0" align="center" cellspacing="10">

   <tr>
     <td width="404" align="center"><img src="images/Logotipo_AMEPE_png.png" width="213" height="104" /></td>
   </tr>
   <tr>
     <td align="center" class="Associacao">Associação dos Magistrados do Estado de Pernambuco</td>
   </tr>
 </table>
</div>
<div id="global" style="width:1000px; height:300px; margin:0 auto; border:1px solid #000000;">
<div id="menuglobal" style="width:155px; height:300px; margin:0 auto; float:left; border:1px solid #00FF00;">
<div id="MenuPaginaInicial" style="width:151px; height:20px; background-color:#134172; padding:4px 0 0 4px; font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:12px;">Página Inicial</div>

<div id="MenuInstitucional" style="width:151px; height:20px; background-color:#134172; padding:4px 0 0 4px; margin:1px 0 0 0; font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:12px;">Institucional</div>
<div id="MenuGlobalSubInstitucional" style="display:none;">
<div id="SubMenuInstitucionalAgendaPres" style="width:151px; height:15px; background-color:#f3f3f3; padding:1px 0 0 4px; margin:1px 0 0 0; font-family:Verdana, Arial, Helvetica, sans-serif; color:#323947; font-size:11px;">Institucional</div>
<div id="SubMenuInstitucionalArmasEMun" style="width:151px; height:15px; background-color:#f3f3f3; padding:1px 0 0 4px; margin:1px 0 0 0; font-family:Verdana, Arial, Helvetica, sans-serif; color:#323947; font-size:11px;">Armas e Munições</div>
<div id="SubMenuInstitucionalArmasEMun" style="width:151px; height:15px; background-color:#f3f3f3; padding:1px 0 0 4px; margin:1px 0 0 0; font-family:Verdana, Arial, Helvetica, sans-serif; color:#323947; font-size:11px;">Art. do Jud. na Imprensa</div>
<div id="SubMenuInstitucionalArmasEMun" style="width:151px; height:30px; background-color:#f3f3f3; padding:1px 0 0 4px; margin:1px 0 0 0; font-family:Verdana, Arial, Helvetica, sans-serif; color:#323947; font-size:11px;">Ata de Fundação da AMEPE</div>
<div id="SubMenuInstitucionalArmasEMun" style="width:151px; height:15px; background-color:#f3f3f3; padding:1px 0 0 4px; margin:1px 0 0 0; font-family:Verdana, Arial, Helvetica, sans-serif; color:#323947; font-size:11px;">Atas da AMEPE</div>
<div id="SubMenuInstitucionalArmasEMun" style="width:151px; height:15px; background-color:#f3f3f3; padding:1px 0 0 4px; margin:1px 0 0 0; font-family:Verdana, Arial, Helvetica, sans-serif; color:#323947; font-size:11px;">Atos da Presidência</div>
<div id="SubMenuInstitucionalArmasEMun" style="width:151px; height:15px; background-color:#f3f3f3; padding:1px 0 0 4px; margin:1px 0 0 0; font-family:Verdana, Arial, Helvetica, sans-serif; color:#323947; font-size:11px;">Coordenadorias</div>
<div id="SubMenuInstitucionalArmasEMun" style="width:151px; height:15px; background-color:#f3f3f3; padding:1px 0 0 4px; margin:1px 0 0 0; font-family:Verdana, Arial, Helvetica, sans-serif; color:#323947; font-size:11px;">Diretorias e Funções</div>
<div id="SubMenuInstitucionalArmasEMun" style="width:151px; height:15px; background-color:#f3f3f3; padding:1px 0 0 4px; margin:1px 0 0 0; font-family:Verdana, Arial, Helvetica, sans-serif; color:#323947; font-size:11px;">Escala de Ferias</div>
<div id="SubMenuInstitucionalArmasEMun" style="width:151px; height:15px; background-color:#f3f3f3; padding:1px 0 0 4px; margin:1px 0 0 0; font-family:Verdana, Arial, Helvetica, sans-serif; color:#323947; font-size:11px;">Estatuto Social</div>
<div id="SubMenuInstitucionalArmasEMun" style="width:151px; height:15px; background-color:#f3f3f3; padding:1px 0 0 4px; margin:1px 0 0 0; font-family:Verdana, Arial, Helvetica, sans-serif; color:#323947; font-size:11px;">Lista de Antiguidades</div>
<div id="SubMenuInstitucionalArmasEMun" style="width:151px; height:15px; background-color:#f3f3f3; padding:1px 0 0 4px; margin:1px 0 0 0; font-family:Verdana, Arial, Helvetica, sans-serif; color:#323947; font-size:11px;">Ofícios da Presidência</div>







</div><!-- Fim do MenuGlobalSubInstitucional-->
<div id="MenuSedes" style="width:151px; height:20px; background-color:#134172; padding:4px 0 0 4px; font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:12px; margin:1px 0 0 0;">Sedes</div>







</div><!-- Fim do menuglobal global-->
</div><!-- Fim do Conteudo global-->
</body>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Henrique Barcelos    290

Henrique Barcelos
Postado

Já está começando errado, pois está utilizando o mesmo ID para vários elementos.

IDs devem ser únicos. Utilize classes no lugar e veja se consegue fazer funcionar.

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