DD Mega Menu - touch support request - hide dropdowns when tap elsewhere on screen

[Beverleyh]

1) Script Title: DD Mega Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...ddmegamenu.htm

3) Describe problem:

Hello you clever jQuery masters! For my current project, I chose the Mega Menu for its fab dropdown customisation capacity.

Anyway, it works OK on iPhone/iPad - the touch activates the dropdown as expected - but unlike the more recently updated All Levels Nav Menu, the sub menu dropdowns don't hide again when the user taps elsewhere on the screen (outside of the menu)

So, I was wondering, would it be possible to request a script upgrade to incorporate this feature please? I'm OK with smaller jQuery functions but I don't think I'm quite ready to adapt this script myself (not without munging it up completely )

[Beverleyh]

As a quick fix, I've just added a class to the button links with dropdowns;

<li><a href="/features.php" rel="features" class="mobclick">Features  V</a></li>

And then employed this bit of jQuery to apply the click toggle for mobile devices (I don't believe this will work on version 1.9 or later though - I'm using 1.7.2);

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
    jQuery(".mobclick").click(function () {
      jQuery(".megawrapper").slideToggle("500");
    });
}

".megawrapper" is the div that holds the Mega Menu dropdowns (generated in the ddmegamenu.js file and not referenced in the markup or supplied CSS).

BTW - For anyone looking in who wants to change the position of the dropdown (by default they always drop flush left to parent button) you can target the ".megawrapper" in CSS and position it absolutely - example;

.megawrapper { position:absolute !important; top:200px !important; left:0 !important; }

This makes the dropdown always appear in the same place.