Efeito onMouseOver

[dVedovato 0]

Olá pessoal,

 

estou construindo um daqueles 'super menus' e tenho um problema na hora de mostrar o menu, funciona da seguinte forma:

 

- Quando passo o mouse no botão, ele exibe o menu utilizando a função do JS e então eu deveria poder

passar o mouse normalmente sobre os links do menu, certo?

 

O problema é que, ao passar o mouse o menu some, como implemento uma solução para que haja um 'delay' ?

 

 

veja meu codigo:

 

 

JS:

<!--starting-show/hide-menu-function-->
   <script type="text/javascript">
   function MM_showHideLayers() {
     var i,p,v,obj,args=MM_showHideLayers.arguments;
     for (i=0; i<(args.length-2); i+=3) 
     with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
     if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
     obj.visibility=v; }
     }
   </script>

 

HTML (botao):

<li><a href="#"><img src="images/programas.png" alt="Home" border="0" onmouseover="MM_showHideLayers('upper-menu','','show')" onmouseout="MM_showHideLayers('upper-menu','','hide')" /></a></li>

 

 

obg (:

[Dii 15]

Hmm, já quer você quer utilizar "efeitos", porque não fazer o seu script utilizando jQuery? Se fizer eu posso te ajudar.

[dVedovato 0]

Oppa! eu realmente gostaria de uma ajudinha (:

 

como implemento esse menu com jquery e como faria pra criar esse 'delay' antes dele sumir ?

[Dii 15]

Bom, mãos as obras.

O jQuery por si só possui alguns efeitos e com delay. Exemplo a função fadeOut('slow',delay); , Ele fará o menu sumir.

Me passa a estrutura do menu que eu posso fazer um script para você;

[dVedovato 0]

legal e, uhul economizando banda rs

 

o html do menu é este:

 

<div id="upper-menu">
           <div id="upper-left" class="upper-menu">
             <ul>
               <li><a href="#"></a>» 5 Minutos</li><br />
               <li><a href="#"></a>» 5 Sentidos</li><br />
               <li><a href="#"></a>» 52 Pizzas</li><br />
               <li><a href="#"></a>» A Cozinha Francesa da Trish - Outono</li><br />
               <li><a href="#"></a>» A Cozinha Italiana de Catherine Fulvio</li><br />
               <li><a href="#"></a>» Almoço de Estrelas</li><br />
               <li><a href="#"></a>» Bon Appétit!</li><br />
               <li><a href="#"></a>» Celebre!</li><br />
               <li><a href="#"></a>» Chef de Segunda, o Rei da Baixa Gastronomia</li><br />
               <li><a href="#"></a>» Chef TV Documentários</li><br />
               <li><a href="#"></a>» Condimentos</li><br />
               <li><a href="#"></a>» Cozinha Fashion</li><br />
               <li><a href="#"></a>» Doc.Saúde</li><br />
               <li><a href="#"></a>» Drink It</li><br />
               <li><a href="#"></a>» Entre Pratos</li><br />
               <li><a href="#"></a>» Etiqueta a La Carte</li><br />
               <li><a href="#"></a>» Eu, Chef</li>
             </ul>
           </div><!--upper-left-->

           <div id="upper-right" class="upper-menu">
             <ul>
               <li><a href="#"></a>» Gastrô</li><br />
               <li><a href="#"></a>» Grandes Chefs</li><br />
               <li><a href="#"></a>» Leda vai as compras</li><br />
               <li><a href="#"></a>» Na Medida Certa</li><br />
               <li><a href="#"></a>» Não Jogue Fora</li><br />
               <li><a href="#"></a>» Nosso Chef</li><br />
               <li><a href="#"></a>» O Pão Nosso de Cada Dia</li><br />
               <li><a href="#"></a>» Passaporte Garfo e Faca</li><br />
               <li><a href="#"></a>» Pra Variar</li><br />
               <li><a href="#"></a>» Reserva Especial</li><br />
               <li><a href="#"></a>» Restaurantes de Charme</li><br />
               <li><a href="#"></a>» Sabor de Dendê</li><br />
               <li><a href="#"></a>» Sem Tempero não dá</li><br />
               <li><a href="#"></a>» Sessão da Chef</li><br />
               <li><a href="#"></a>» Sobremesas</li><br />
               <li><a href="#"></a>» Trish Cozinha em Paris</li><br />
               <li><a href="#"></a>» Trish no sul da França</li><br />
             </ul>
           </div><!--upper-right-->
         </div><!--upper-menu-->

 

 

e gostaria de lembrar que o script será inserido dentro do wordpress, não sei se causa algum problema ..

 

ele deveria ficar assim:

 

muito obrigado pela força! (;

[Dii 15]

Sim, mas precisarei tambem da estrutura CSS dele.

[dVedovato 0]

Oi, estou usando isso:

 

/*header*/
#home {float:left}
#nav {width:850px; height:25px; float:left; margin:0 0 10px 20px}
#nav ul {list-style:none}
#nav ul li {display:inline}
.nav-margin {margin:0 25px 0 0}

/*upper-menu*/
#upper-menu {position:absolute; width:570px; height:350px; margin:10px 0 0 150px; visibility:hidden; background:url(images/upper-menu-background.png)}
#upper-left {width:320px; height:auto; float:left; margin:32px 0 0 15px}
#upper-right {width:200px; height:auto; float:right; margin:25px 15px 0 0; padding:0 0 0 15px; border-left:1px solid #fff;}
.upper-menu {font-family:verdana, arial, tahoma, sans, sans-serif; font-size:12px; color:#fff; line-height:18px}

[Dii 15]

Sim, mas poste as imagens tambem né xD, porque ele ta carregando em branco aqui!