Superfish: cómo mantener abierto el menú secundario después de haber hecho clic

Question

Tengo la siguiente situación. Tengo un menú y si uno sobre el menú aparece un submenú y si el mouse se mueve, el submenú desaparece, ahora quiero lo siguiente si hago clic en un elemento del submenú, quiero que el submenú permanecer abierto, cuando la nueva página ha sido cargada. Estoy usando el plugin Jquery de superfish para esto.

¿Es esto posible y cómo?

mi código en html

<div id="nav"> 
     <div id="nav2"> 
      <ul class="sf-menu sf-navbar "> 
       <li> 
             <a title="HOME" class="sf-with-ul " href="/index.php?r=site/index&amp;sid=1">HOME</a>    </li> 
      </ul> 
      <ul class="sf-menu sf-navbar"> 
       <li> 

        <a href="?sid=2" id="gallery" class="sf-with-ul selected_main">GALLERY</a> 
        <ul class="subs" id="sub1"><li class="arrow"><img src="images/arrow.gif" /></li><li><a title="Kitchens" href="/index.php?r=images/sddsd&amp;id=1">Kitchens</a></li><li><a title="Vanities" href="/index.php?r=images/sddsd&amp;id=2">Vanities</a></li></ul>    </li>  
      </ul> 
      <ul class="sf-menu sf-navbar "> 
       <li> 
        <a href="?sid=3" class="sf-with-ul " >ACCESSORIES</a> 
             <ul class="subs" id=""><li class="arrow"><img src="images/arrow.gif" /></li><li><a title="Door Handles" href="/index.php?r=images/sddsd&amp;id=2">Door Handles</a></li><li><a title="Spanners" href="/index.php?r=images/sddsd&amp;id=1">Spanners</a></li></ul>    </li> 
      </ul> 

      <ul class="sf-menu sf-navbar "> 
       <li> 
             <a title="CONTACT US" class="sf-with-ul " href="/index.php?r=site/contact&amp;sid=4">CONTACT US</a>    </li> 
      </ul> 
     </div> 

</div> 

y luego el código superfish

$(function(){ 
      $("ul.sf-menu").superfish({ 
       delay:   0, 
       speed:   'fast', 
       autoArrows: false, 
       dropShadows: false 
      }); 
     }); 

También he notado que el siguiente código CSS se utiliza para mostrar el elemento

left: 0; 
top: 2.5em; 
z-index:  99; 

Answer 1

publico a demo para usted. Básicamente, he agregado una función "onHide" a la función superfish, y luego una codificación adicional que mantiene el menú persistente.

CSS adicional (a suckerfish.css por defecto)

.sf-menu li.sfSelected { 
background-color: #CFDEFF; 
} 

Guión

$(function(){ 
    var menu = $("#nav"); 

    menu.find("ul.sf-menu") 
     .superfish({ 
      delay:   0, 
      speed:   'fast', 
      autoArrows: false, 
      dropShadows: false, 
      onHide:  function(){ 
       if (this.parent().is('.sfPersist')) { 
        this.show().css('visibility','visible').parent().addClass('sfHover'); 
       } 
      } 
     }) 
     .find('li > ul > li').click(function(){ 
      // hide previously persistent children (LOL that just sounds wrong) 
      menu.find('.sfPersist') 
       .removeClass('sfPersist sfHover') 
       .find('> ul').hide().css('visibility','hidden'); 

      // add children that should be persistent 
      if ($(this).is('.sfSelected')) { 
       // if previously selected, keep hidden 
       menu.find('li.sfSelected').removeClass('sfSelected'); 
      } else { 
       // Hide other selected classes 
       menu.find('li.sfSelected').removeClass('sfSelected'); 
       // if newly selected, then show 
       $(this) 
        .addClass('sfSelected') // remember which one is selected 
        .parent() 
        .show().css('visibility','visible') 
        .parent().addClass('sfHover sfPersist'); 
      } 
     }); 
});