Home/ Questions/Q 6327537
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T17:17:53+00:00

I am trying to create a hover menu effect using JQuery. The perfect example

  • 0

I am trying to create a hover menu effect using JQuery. The perfect example of what I am looking for can be found at http://www.godaddy.com/ (check out the green bar)

All the example I have seen are using UL and LI with nested elements. However, I am looking to achieve this with elements that are not nested. If you check the source for godaddy then you can see these elements are non-nested just like I want.

Imagine I have some mark-up as follows…

<div>
   <a id="button1"><img .../></a>
   <a id="button2"><img .../></a>
   <a id="button3"><img .../></a>
</div>
<div id="menu1">
   //anything I want in here (links, labels etc.)
</div>

I would like to be able to create a javascript function that can be called to setup these menus as follows…

SetupMenu("#button1", "#menu1");

this function will position the div element (which is absolute) and this I can do without issue. The bit I cannot work out is for the hover events. I have a simple example of these events…

$(button).mouseenter(function (e) {
   $(menu).show();
});
$(button).mouseleave(function (e) {
   $(menu).hide();
});

Obviously this works great for showing the menu, but when you want to mouse over the menu, then the mouse leave is fired for the button (as I would expect). I know this is the wrong approach but am just showing where I am at the moment.

Thanks for any help

Related CSS is as follows (modified names for example purposes)…

#menu1
{
    position:absolute;
    display:none;
    min-width:100px;
    padding:10px 10px 20px 10px;
}

#button1
{
    height:16px;
    width:16px;
    display:inline-block;
    padding:4px;
    cursor:pointer;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    var intVal = 0;
$(button).mouseenter(function (e) {
   $(menu).show();
});
$(button).mouseleave(function (e) {
  intVal=  setTimeout(function() { $(menu).hide(); }, 1000);
});

$(menu).mouseenter(function() {
   clearTimeout(intVal);
});
$(menu).mouseleave(function(e) {
   $(this).hide();
}

    This can help you, your menu wont be hidden until 1 second, but if mouse is over your opened menu it will clear timeout and menu will be opened till mouseleave.

    • 0