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


Tags: php,jquery,css,jquery-plugins

Problem :

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;


Solution :

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

    CSS Howto..

    (some) background images won't show up in IE7 or IE8

    Off-canvas navigation: How to make a second-level menu slide in on top of first-level menu without covering body text?

    How to select -webkit-filter: drop-shadow with jQuery?

    How to make width of a dynamic table not increase?

    how to control div size when other divs are changing [duplicate]

    How to select an UNTAG element in CSS

    How to apply CSS to second word in a string?

    How do I allow CSS files to be referenced from other domains?

    How to place 3 different paragraphs next to each other?

    How to increase the duration of :active in css?

    Vim: How would I recursively run “:sort” for everything between curly braces?

    How to make HTML table cells expand horizontally beyond end of page?

    How do I manipulate the same function in javascript for two different classes

    how to make the textarea's width fixed but keep the height flexible CSS

    How to add multiple CSS classes to an single array

    how to insert a ribbon inside a div how background without images only pure css? [closed]

    How to set CSS for disabled checkboxes?

    How to jump to a tab position (or equivalent) in html or css

    How do I make entire div a link? [duplicate]

    How to edit css for jquery datepicker prev/next buttons?

    How can I implement dynamic styling for ion-list elements with AngularJS?

    How to remove jquery mobile button color or override button css?

    How to put the footer at the bottom of the visible page?

    How to add decoration to link in CSS?

    How to make Wrapper div contain only non-overflowing divs

    How to stop CSS Code Display:none for specific id or class?

    How to Make a Fluid Layout

    How to display a list in two rows?

    How to overlap 2 charaters with CSS

    How to have text slide in when I hover over navbar?