Home/ Questions/Q 6757135
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T13:36:36+00:00

I am trying to implement this menu in my web site : Here is

  • 0

I am trying to implement this menu in my web site :

Here is the code :

<html>
    <head>
        <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="jquery.fixedMenu.js"></script>
        <link rel="stylesheet" type="text/css" href="fixedMenu_style1.css" />
        <script>
        $('document').ready(function(){
            $('.menu').fixedMenu();
        });
        </script>
    </head>
    <body>
    <div class="menu">
        <ul>
            <li>
                <a href="#">More Examples<span class="arrow"></span></a>

                <ul>
                    <li><a href="#">Plugins and jQuery Examples</a></li>
                    <li><a href="#">Prototype Examples</a></li>
                    <li><a href="#">Mootools Examples</a></li>
                    <li><a href="#">Javascript Examples</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Plugins<span class="arrow"></span></a>
                <ul>
                    <li><a href="#">Galleries</a></li>
                    <li><a href="#">DropDown Menus</a></li>
                    <li><a href="#">Content Slider</a></li>
                    <li><a href="#">LightBox</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </body>
</html>

and the code for .js file is :

(function($){
    $.fn.fixedMenu=function(){
        return this.each(function(){
            var menu= $(this);
            menu.find('ul li > a').bind('click',function(){
            if ($(this).parent().hasClass('active')){
                $(this).parent().removeClass('active');
            }
            else{
                $(this).parent().parent().find('.active').removeClass('active');
                $(this).parent().addClass('active');
            }
            })
        });
    }
})(jQuery);

I want the active menu to be closed when someone clicks anywhere in the body area….

I am a newbie to jquery 🙂 , pls help

thanks

Sandeep

Edit : after your final comments this is how the code looks .

$("html").click(function() {
   menu.find('.active').removeClass('active');
});


(function($){
    $.fn.fixedMenu=function(){
        return this.each(function(){

            var menu= $(this);

            menu.find('ul li > a').bind('click', function (event) {
              event.stopPropagation();
            });                               

            $("body:not(.menu)").hover(function(){ $(".menu").find('.active').removeClass('active');})
            menu.find('ul li > a').bind('click',function(){
            if ($(this).parent().hasClass('active')){
                $(this).parent().removeClass('active');
            }
            else{
                $(this).parent().parent().find('.active').removeClass('active');
                $(this).parent().addClass('active');
            }
            })
        });
    }
})(jQuery);

but still no success….

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try this for hover : 

    $("body:not(.menu)").hover(function(){ $(".menu").find('.active').removeClass('active');})

    Edit :

    Bind a click event to html to capture any click made, and make it hide the menu

    $("html").click(function() {
   menu.find('.active').removeClass('active');
});

    Then override that on your menu’s click event using .stopPropagation();

    menu.find('ul li > a').bind('click', function (event) {
  event.stopPropagation();
});
    • 0