ayuda con logica para crear menus

Citar

Escrito el 08 Dic 2011 04:56 pm

Mi intencion es en un futuro muy cercano crear un plugin para jquery, que te permita crear menus 100% personalizables, y de manera muy sencilla.

Eso esperara unos meses porque aun no se crear plugins para jquery.

Por el momento, para la creacion de menus tengo un problemita de logica, espero me puedan ayudar.

Los menus siempre los creo asi:

Código HTML :

<div id="mi_menu">
      <div class="opc"></div>
      <div class="opc"></div>
      ...
</div>
<!-- los submenus con posicion absoluta, con top y left, los posiciono donde los requiero-->
<div class="subOpc"></div>

Mi problema es en el jquery. Suelo manejar con eventos mouseenter y mouseout
pero mi problema es para controlar el mouseout de subOpc.

En teoria basta con esto:

Código Javascript :

//suponiendo que todo opc tiene un subOpc.
$('.opc').each(function(i){
   $(this).mouseenter(function(){
       $('subOpc:eq('+i+')').css('display','block');//usualmente va animate o slideup, etc.
   });
   $(this).mouseout(function(){
      $('subOpc:eq('+i+')').css('display','none');//usualmente va animate o slideup, etc.
   });
});

$('.subOpc').each(function(i){   
   $(this).mouseout(function(){
      $(this).css('display','none');//usualmente va animate o slideup, etc.
   });
});

Funciona pero quiero evitar que desaparesca cuando entra en opc del mismo subOpc

Cual seria la logica para evitar que desaparesca subOpc??

Por rod00x3

Claber

595 de clabLevel

Genero:Masculino

Envíale un mensaje privado Email

Citar

Escrito el 08 Dic 2011 05:16 pm

rod00x3 escribió:

Los menus siempre los creo asi:

Código HTML :

<div id="mi_menu">
      <div class="opc"></div>
      <div class="opc"></div>
      ...
</div>
<!-- los submenus con posicion absoluta, con top y left, los posiciono donde los requiero-->
<div class="subOpc"></div>

Es una apestosa práctica hacer los menús de esa manera, encontrarás tu vida en el jardín del edén y de la felicidad si creas los menús como deben de ser:

Código :

<nav>
   <ul>
      <li><a href="#">Elem 1</a></li>
      <li><a href="#">Elem 2</a></li>
      <li><a href="#">Elem 3</a></li>
   </ul>
</nav>

Para reconocer en que parte de la web estás y no ocultar la subOpc, podrías utilizar algún tipo de hash en la url para ejecutar alguna función. Igualmente te recomiendo corregir el desplegable de tu mouse enter, suele ser algo buggy, personalmente utilizo esta manera:

Código Javascript :

$(function(){
   $('#nav>li').hover(
      function(){
      $('.submenu',this).stop(true,true).animate({"Aquí van opciones de animación cuando se hacer un hover"}, "velocidad");
      },
      function(){
      $('.submenu',this)."Otro tipo de animación cuando se retira el mouse"();
      }
   );         
});

Cualquier duda nos la comentas.

Suerte.

Por Kinduff

Claber