iterate throught unordered list (nav)

Question

I am working on a Mega Menu and using a unordered list to trigger a event to show the Mega Menu. This is the HTML code for Nav Bar:

<div class="alpha omega grid_15" id="topNavLink">
    <ul id="navRollOver">
      <li><a href="#" title="SOCCER" target="_self" >SOCCER</a></li>
      <li><a href="#" title="TENNIS" target="_self" >TENNIS</a></li>
      <li><a href="#" title="BASEBALL" target="_self" >BASEBALL</a></li>
      <li><a href="#" title="BASKETBALL" target="_self" >BASKETBALL</a></li>
      <li><a href="#" title="FOOTBALL" target="_self" >FOOTBALL</a></li>
      <li><a href="#" title="GOLF" target="_self" >GOLF</a></li>
      <li><a href="#" title="RUGBY" target="_self" >RUGBY</a></li>
      <li><a href="#" title="HOCKEY" target="_self" >HOCKEY</a></li>   
    </ul>
  </div>

I am calling a div with class subNavContainer, css status is display: none;

This is what I want to do... I am planning to get the Array of all the li and target > a and listen to the mouse enter event to trigger the mega menu to slideDown.

I need help with Iterating through the li checking if it has a and based on the mouseenter on a I want to trigger an event to display the megaMenu using slideDown, and when the mouse moves to the next() a, I want to trigger the slideUp event.

Similarly if the mouseenters the subNavContainer it should remain on screen and when the mouseleaves the subNavContainer or if there is no movement on the screen the subNavContainer should slideUp.

Answer 1

To select all the links that are children of the li elements your selector can look like this:

//select root element (`ul`), get its children (in this case the `li` elements), then get the children `a` elements of those `li` elements
$('#navRollOver').children().children('a')

To then bind to the mouseenter event for those elements:

//note that `.on()` is new in jQuery 1.7 and is the same in this case as `.bind()`
$('#navRollOver').children().children('a').on('mouseenter', function () {
    //do slideDown
});

Then to slideUp the menu after the cursor leaves the link elements:

//you can chain function calls with jQuery functions,
//so we make our selection of the `a` elements, bind a `mouseenter` event handler to them,
//then using the same selection, we bind a `mouseleave` event handler
$('#navRollOver').children().children('a').on('mouseenter', function () {
    //do slideDown
}).on('mouseleave', function () {
    //do slideUp
});

Answer 2

Try this

var lastHoveredItem = null, hoveredOnMegaMenu = false;
$("#navRollOver > li > a").mouseenter(function(){
    hoveredOnMegaMenu = false;
    var $this = $(this);
    if(lastHoveredItem != null){
       lastHoveredItem.slideUp();
    }
    //Now based on the menu hovered you can find its its associated mega menu container
    lastHoveredItem = $(".megaMenu" + $this.attr('title')).slideDown();
})
.mouseleave(function(){
   setTimeout(function(){
      if(!hoveredOnMegaMenu && lastHoveredItem){
          lastHoveredItem.slideUp();
          lastHoveredItem = null;
      }
   });
});

//You can give megaMenu class to each of the mega menu containers so that we can 
//easily select them with class selector
$(".megaMenu").mouseenter(function(){
    hoveredOnMegaMenu = true;
})
.mouseleave(function(){
    $(this).slideUp();
    lastHoveredItem = null;
});