Results 1 to 2 of 2

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

  1. #1
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,965
    Thanks
    16
    Thanked 305 Times in 304 Posts
    Blog Entries
    11

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

    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 )
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,965
    Thanks
    16
    Thanked 305 Times in 304 Posts
    Blog Entries
    11

    Default

    As a quick fix, I've just added a class to the button links with dropdowns;
    Code:
    <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);
    Code:
    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;
    Code:
    .megawrapper { position:absolute !important; top:200px !important; left:0 !important; }
    This makes the dropdown always appear in the same place.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

Similar Threads

  1. Top level of Chrome CSS menu wraps on iPod Touch
    By Anessa05 in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 09-06-2010, 04:00 PM
  2. How to change menu from left of the screen to the right of the screen?
    By EdThaSt0rm in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 08-31-2009, 09:47 AM
  3. request: hide/show div with scroll animation
    By KaranSokhey in forum Looking for such a script or service
    Replies: 1
    Last Post: 08-11-2009, 01:09 PM
  4. Touch Screen Kiosk webpage help!
    By magic in forum JavaScript
    Replies: 0
    Last Post: 05-28-2009, 02:57 PM
  5. Menu displays behind dropdowns and flickers
    By coolstuff2k8 in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 07-29-2008, 02:53 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •