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 to make html list scrollable downwards on fullscreen page?

    How to use array so i will get value either x[0] or x[1]

    how to set auto div height from ul/li elements variable height

    How to make this text bigger?

    How can I toggle between multiple .css with jquery?

    How to Add a Vertical Line inside a texbox using html and css

    How can I make an div span the entire width of my screen

    CSS selector: how to make 2 spans each fill 50% of their parent's width?

    how to detect a url path with jquery and change css

    How to change the images using HTML and CSS? [closed]

    How to add styles to wordpress default menu

    how to do external scripting?

    how to align css content string

    How can I align divs in a row rather than vertically?

    how to prevent link padding during hover from extending paragraph padding

    How can I change the text decoration on numbers only on my web page?

    How can i include label-info from twitter boostrap in my own class definition?

    How to remove shadow from slider backround using Html/Css?

    How to open links in a new tab/window using CSS? [duplicate]

    Creating a javascript notification plugin: How to align absolutely positioned divs on top of each other

    How to sharpen an image in CSS?

    How to vertically and horizontally center two images inside a div on a responsive page

    Showing different in Internet Explorer and Google Chrome

    How to read minified CSS?

    How to use a CSS animation within a JavaScript plugin?

    How to handle Chrome rendering dynamically added elements with incomplete CSS

    How can you stop the screen scrolling from the top of a Phonegap app?

    How to set a fixed background with CSS?

    CSS - How to display dropdown text in one row?

    How to line up images horizontally and center with css when using a premade javascript magnifying glass?