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 center an image .logo via css? [duplicate]

    How to allow user to switch back to standard view from a mobile device (CSS) [duplicate]

    How to place differently sized images in 2 columns with figcaption aligned

    How to make string comparison exactly

    How do I change the css so lowering one class does not lower the other?

    how to create 100% vertical line in css

    HTML+Javascript: How can I Load Data in Div via Class?

    How to fix error css width x height when run as mobile

    how to give blur effect for css overflow visible content

    How to make the element located in the center of a div?

    How to fix div position while scrolling? [closed]

    how can resize the page? [closed]

    how to add css style to dynamically loaded snippet using jquery ajax

    How to achieve this layout with CSS and div?

    CSS: how to vertically and horizontally align an image?

    How to make a simple timer image slideshow using HTML and CSS

    How i can force my div to display in block?

    How to stretch items in menu (from right to left) - HTML and CSS

    How to inspect precompiled minified SASS code

    How to design select box using css

    Normalized CSS, option in JSFiddle, how to add it to document

    How to get a CSS selector using Selenium WebDriver?

    How to navigate divs in a custom built single page app? [closed]

    How to unfold or close content in html/JS - always assigned to different id

    css transform. How to get rotation degree value from “matrix( 0, 1, -1, 0, 0, 0”)?

    How do you create a link out of circular text with JavaScript and CSS?

    Image, src, href in same span. How to locate? Webdriver, css locator

    element doesn't show padding in Opera, Safari, IE

    how to order CSS elements?

    How to get CSS around links like login button