furby
furby

Reputation: 23

Make vertical jquery slide down menu stay open

A noob question. The answer is probably very simple, but somehow, i cannot figure it out, and need to move on in my project.

I have a vertical nav menu, and i have a slide down on hover. But I would like the menu to stay open, once it has slid down. I have tried deleting the last row of code, but that doe not look pretty.

I have tried to implement the Stu Nicholls method , but did not get it to work. But that is the effect i would like to have.

My HTML menu is :

<nav id="verticalmenu">          
<ul>
  <li><a class="slide" href="#">Kalendarium</a>
  <ul class="down">
    <li><a href="#">Konzerte</a></li>
    <li><a href="#">Seminare</a></li>
    <li><a href="#">Vortraege</a></li>
  </ul>
</li>
<li><a href="#">Projekte</a>
  </ul>

And the jquery to it:

<script type="text/javascript">



 (function($){

            //cache nav
            var nav = $("#verticalmenu");

            //add hovers to submenu parents
            nav.find("li").each(function() {
                if ($(this).find("ul").length > 0) {


                    //show subnav on hover
                    $(this).mouseenter(function() {
                        $(this).find("ul").stop(true, true).slideDown();
                    });

                    //hide submenus on exit
                    $(this).mouseleave(function() {
                        $(this).find("ul").stop(true, true).slideUp();
                    });
                }
            });
        })(jQuery);

Thanks a lot!

Upvotes: 0

Views: 5447

Answers (1)

dku.rajkumar
dku.rajkumar

Reputation: 18578

just hide them on document load. there is no need of if check, jquery does that internally

(function($){
     var nav = $("#verticalmenu");
        //add hovers to submenu parents
        nav.find("li").each(function() {
            var li_ul = $(this).find("ul");
                li_ul.hide();
                //show subnav on hover
                $(this).mouseenter(function() {
                    li_ul.stop(true, true).slideDown();
                });
        });
})(jQuery);

fiddle : http://jsfiddle.net/Redwb/3/

Upvotes: 2

Related Questions