Menu Pop-UP sm CSS e JavaScript

Erivan Alves · Junho 19, 2011

Boa noite a todos.

Outro dia eu aprendi a criar um menu Pop-up com css e javascrip (http://www.clickjequie.com.br/clickjequie/menu/menu.html) adorei este menu, porem ele tem um problema que é: se você passar o mouse sobre o meu observará que onde tem submenu se eu tirar o mouse do menu os sub menu não desaparece ele continua aberto. Algue pode me ajudar a fazer esse submenu retornar após eu retirar o mouse de cima.

Att.

A baixo segue o código para o mnenu

CSS:
ul#menu{
 margin:0;
 padding:0;
}

ul{
 list-style:none;
}

ul#menu{
 width:527px;
 margin:0 auto;
 position:relative;
}
ul#menu li{
 float:left;

}
ul#menu li a{
 display:block;
 float:left;
 padding:0 15px;
 height:25px;
 line-height:25px;
 text-decoration:none;
 color:#333;
 border:1px solid #ccc;
}

ul#menu li a:hover, ul#menu li a.ativo{
 background:#ccc;
}

ul#menu li ul{
 display:none;
 position:absolute;
 top:25px;
 left:0;
 width:486px;
 background:#ccc;
}

/*
ul#menu li:hover ul{
 display:block;
}*/

fim do código CSS inicio do código JS:

$(function(){
 $("#menu a").mouseover(function(){
 var menu = $(this).parent().children('.submenu');
 var submenu = $(this).parent().parent();

if(menu.length > 0 && menu.is(':hidden')){
 $("#menu a").removeClass('ativo');
 $(this).addClass('ativo');
 $('.submenu').slideUp();
 menu.slideDown();
 }
 if(!submenu.hasClass('submenu') && menu.length == 0){
 $("#menu a").removeClass('ativo');
 $(this).addClass('ativo');

 $('.submenu').slideUp();
 }

});
});

Fim do código JS. Inicio do código HTML:

<!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="en">
 <head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 <title>Exemplo Menu</title>
 <link rel="stylesheet" type="text/css" href="stylo.css" media="all" />
 &lt;script type="text/javascript" src="jquery.min.js"></script>
 &lt;script type="text/javascript" src="script.js"></script>

</head>
 <body>

<ul id="menu">
 <li><a href="#">Home</a></li>
 <li><a href="#">Serviços</a>
 <ul class="submenu">
 <li><a href="#">Serv 1</a></li>
 <li><a href="#">Serv 2</a></li>
 <li><a href="#">Serv 2</a></li>
 </ul>

</li>
 <li><a href="#">Produtos</a>
 <ul class="submenu">
 <li><a href="#">Prod 1</a></li>
 <li><a href="#">Prod 2</a></li>
 <li><a href="#">Prod 2</a></li>
 </ul>

</li>
 <li><a href="#">Cliente</a></li>
 <li><a href="#">Contato</a></li>
 </ul>

</body>
 </html>

Editado Junho 19, 2011 por kuroi
Adicionar tag CODE e link

Erivan Alves · Junho 26, 2011

Hei pessoal ninguém vai me responder não!!!

abraço!!

Entrar

Menu Pop-UP sm CSS e JavaScript

Pergunta

Erivan Alves

Link para o comentário

Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

Erivan Alves

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades