2

I have this mega-menu that I want to show on hover and keep open until the user leaves the mega-menu or the trigger area. I have it working onClick, but I cannot seem to get it to work on-hover. Any help would be MUCH appreciated.

<div class="down">
    <div id="showb">
        <a href="#" id="menu-show" class="down"></a>
    </div><!-- end show button -->
    <div id="hideb">
        <a href="#" id="menu-hide" class="up"></a>
    </div><!--end hide button -->   
    <div id="menu" style="display: block;">
        <div class="menu-main">Menu Contents</div>
        <div class="menu-bottom"></div>
    </div>
</div>

    // hides the menu as soon as the DOM is ready
    // (a little sooner than page load)
    jQuery('#menu').hide();
    jQuery('#hideb').hide();
    // shows the menu on clicking the noted link
    jQuery('a#menu-show').click(function() {
        jQuery('#showb').hide();
        jQuery('#hideb').show();
        jQuery('#menu').slideDown();
        return false;
    });
    // hides the menu on clicking the noted link
    jQuery('a#menu-hide').click(function() {
        jQuery('#showb').show();
        jQuery('#hideb').hide();
        jQuery('#menu').slideUp();
        return false;
    });

You can see it here too http://jsfiddle.net/notanothercliche/5CDEE/

    <div id="menu">
    <div id="show-menu">
    </div>
</div>
<div id="mega-menu">
    <div class="menu-main">Menu Contents</div>
    <div class="menu-bottom"></div>
</div>

jQuery(document).ready(function() {

    // open
    jQuery('#show-menu').bind('mouseenter', function() {

        // increase the height of our container
        jQuery('#menu').height('300px');

        // do the main animation
        jQuery('#show-menu').stop().css({
            'backgroundPosition': 'bottom'
        }, 300);
        jQuery('#mega-menu').slideDown(500);
    });


    // close
    function closeMainNav() {
        jQuery('#show-menu').stop().css({
            'backgroundPosition': 'top'
        }, 300);
        jQuery('#mega-menu').slideUp(500);
        jQuery('#menu').height('17px');
    }

    // close when the following happens
    jQuery('#menu').bind('mouseleave', closeMainNav);
});

Even better for the click version, I used the toggleClass and slideToggle. MUCH shorter coding this way. See the demo here http://jsfiddle.net/notanothercliche/5CDEE/

    <a href="#" id="menu-show" class="down"></a>

<div id="menu">
    <div class="menu-main">
        Menu Contents
        <ul>
            <li>Menu Item 1</li>
            <li>Menu Item 2</li>
            <li>Menu Item 3</li>
          <div class="clear"></div>
        </ul>
        More HTML content
    </div>
    <div class="menu-bottom"></div>
</div>

jQuery(document).ready(function() {
    // hides the menu as soon as the DOM is ready
    // (a little sooner than page load)
    jQuery('#menu').hide();
    // shows the menu on clicking the noted link
    jQuery('a#menu-show').click(function() {
        // toggles the indicator arrow
        jQuery('a.down').toggleClass('up')
        jQuery('#menu').slideToggle();
        return false;
    });
});
Sampson
  • 265,109
  • 74
  • 539
  • 565
NotAnotherCliche
  • 381
  • 1
  • 4
  • 18

2 Answers2

1

Why not do a pure CSS menu instead ?

DarkDust
  • 90,870
  • 19
  • 190
  • 224
  • I need html content within my menu. So I don't think that solution will work for me. I also need it to be dynamic, working with my database. – NotAnotherCliche Jul 09 '11 at 07:18
  • The "HTML content" is available via the CSS solution, you can put anything you like into the `
    `'s. From the code you've pasted, it seems the complete HTML itself created as a whole (and not parts created via JS or loaded via AJAX), so the CSS solution would work almost the same way as your jQuery solution (from the pure HTML structure point of view). But the downside is that you'd have a harder time doing animations (like fade in and out) and wouldn't animations on older browser at all, this is something jQuery does solve.
     – DarkDust Jul 09 '11 at 08:27
0

The issue with your solution is how the html and css is laid out. I've made an adjustment here

http://jsfiddle.net/nTskw/

this doesn't hide the up button but swaps the class instead. There is a slight gap in between the animation that needs to be worked on, but I think this is down to the positioning of the elements still. It might be worth binding the mouseover on a surrounding div

TommyBs
  • 9,354
  • 4
  • 34
  • 65