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..

    How does one style element within a label say?

    How to break a overflowed navigation bar via CSS

    How to use Auto compiler for less and sass in visual studio

    How to get the CSS width of a mobile device in ASP.NET MVC?

    How to persist local CSS change to server record?

    how to position two divs next to each other, one of them is centered in the container of both divs

    how to increase border line from the center using css animation

    How To Get Circle Image Between
    Tag Like Tumblr In HTML? [closed]

    CSS. How to add small image on background?

    How can I stop my submenu from disappearing while hovering between spaced submenu items?

    how to link css files in organization github pages

    How can I make my jquery mobile collapsible set larger using css

    How to click on a link from the header and then go back with HTML, Javascript and CSS? [closed]

    How to CSS triangle at the bottom and center it in div ( Horizontal Menubar )? [closed]

    How to add “pause” button in this jquery slider?

    How do I format tabs in Blueprint CSS?

    How do I lock a sidebar to the height of a window even when a user scrolls?

    How to make a background-color transition that eventually covers div to center? [closed]

    How to Make a Dropdown In a Navbar Using CSS?

    CSS How to center link elements within a div

    CSS: How can I get rid of the default window “padding”? An element set to 100% width doesn't reach the window's borders

    How do I get text to wrap to not break out of the box using CSS?

    How can I resize to fit html elements horizontally using CSS?

    How to vertical-align to x-height?

    How to implement this logic in CSS?

    How to override the default css class using c#

    How can I set a border in alignment with other borders

    How to place Facebook send dialog box above other content?

    How do I create a DIV based on the browser size?

    How can I center my text on top of an image, given that it's responsive?