Superfish: How to keep sub menu open after it has been clicked

Question

I'm having the following scenario. I have a menu and if one hovers over the menu a sub menu appears and if mouse moves out the sub menu disappears, now I want the following if I click on the on a item in the sub menu, I want the sub-menu to remain open, when the new page has been loaded. I'm using superfish Jquery plugin for this.

Is this possible and if how.

my code in 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>

and then the superfish code

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

I've also noticed that the following css code is used to display the item

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

Answer 1

Hi Roland

I post a demo for you. Basically I've added a "onHide" function to the superfish function, then some additional coding that keep the menu persistent.

Additional CSS (to default suckerfish.css)

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

Script

$(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');
            }
        });
});

Answer 2

I'm unable to get this to work. I can get the blue selected box on the link I clicked, but it still fades away after the delay set by superfish.

Is there anything else that needs to be changed but the ID of the menu div?

Also, in the linked demo, clicking on any of the menu options that don't have submenus doesn't close the dropdown again...

Here's the demo I'm working on - any help would be much appreciated: http://www.wireframed.com/test/turntool/index.php

:EDIT: Got it working, except, it doesn't keep the sub-menu open across links. I.e. once it loads a new page, the submenu disappears? As long as it stays on the same page (i.e. via a # link), it works fine.