Superfish: How to keep sub menu open after it has been clicked
- by Roland
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&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&id=1">Kitchens</a></li><li><a title="Vanities" href="/index.php?r=images/sddsd&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&id=2">Door Handles</a></li><li><a title="Spanners" href="/index.php?r=images/sddsd&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&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;