CODEWITHSUNDEEP
jquerydrop-down-menu
Sergiu Costas
Sergiu Costas

Reputation: 560

dropdown-menu - transform function from mouseover effect to ONCLICK

I really like this drop-menu example http://javascript-array.com/scripts/jquery_simple_drop_down_menu/ . I tried to apply to my project. But I had found annoying mouse-over effect of this drop-down menu but I liked it how it looks like in my project. Now, I want to ask support from thous who know better jQuery to help me to transform the function from mouse-over to ONCLICK...
See bellow function -

var timeout         = 500;
var closetimer      = 0;
var ddmenuitem      = 0;

function jsddm_open()
{   jsddm_canceltimer();
    jsddm_close();
    ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');}

function jsddm_close()
{   if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
{   closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
{   if(closetimer)
    {   window.clearTimeout(closetimer);
        closetimer = null;}}

$(document).ready(function()
{   $('#jsddm > li').bind('mouseover', jsddm_open);
    $('#jsddm > li').bind('mouseout',  jsddm_timer);});

document.onclick = jsddm_close;

Also, You can see my FIDDLE

I will appreciate much your support! thank you in advance for your time!

Upvotes: 0

Views: 362

Answers (1)

J David Smith
J David Smith

Reputation: 4810

In order to do this, you'll want to do two things.

  1. Bind the jsddm_open function to the click event rather than mouseover.
  2. Bind a click event on everything except the menu which runs jsddm_close.

Something like this:

$(document).ready(function()
{   $('#jsddm > li').bind('click', jsddm_open);
    $(document).bind('click',  jsddm_close);
});

Make sure that you stop propagation in jsddm_open as well, or the second event will fire because of bubbling.

function jsddm_open(event)
{
    // other stuff
    event.stopPropagation();
}

Upvotes: 3

Related Questions