Erivan Alves
-
Total de itens
2 -
Registro em
-
Última visita
Tudo que Erivan Alves postou
-
Menu Pop-UP sm CSS e JavaScript
pergunta respondeu ao Erivan Alves de Erivan Alves em Ajax, JavaScript, XML, DOM
Hei pessoal ninguém vai me responder não!!! abraço!! -
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" /> <script type="text/javascript" src="jquery.min.js"></script> <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>