jQuery drop down like NBC.com

Question

I've been trying to make a drop-down like NBC.com with no success--because I'm constrained to using the following HTML. I'd like it to be on mouseover--kind of like the UI accordion... Any help would be greatly appreciated! :)

<div class="mainMenu" align="center">
    <table cellpadding="0" cellspacing="0" border="0" width="950">
        <tr>
            <td nowrap><div class="mainMenuDiv menuItem"><a href="http://dev.all4jesus.com/new/#new" class="mainMenuLink" id="1">I'm New</a></td>
            <td nowrap><div class="mainMenuDiv menuItem"><a href="http://dev.all4jesus.com/ministries/#ministries" class="mainMenuLink">Ministries</a></div></td>
            <td nowrap><div class="mainMenuDiv menuItem"><a href="http://dev.all4jesus.com/beliefs/#beliefs" class="mainMenuLink">Beliefs+Mission</a></div></td>
            <td nowrap><div class="mainMenuDiv menuItem"><a href="http://dev.all4jesus.com/listen/#listen" class="mainMenuLink">Listen</a></div></td>
            <td nowrap><div class="mainMenuDiv menuItem"><a href="http://dev.all4jesus.com/connect/#contact" class="mainMenuLink">Connect</a></div></td>
            <td width="100%"></td>
        </tr>
    </table>
</div>
    <div class="subMenu">
        <div id="new">
            <h2>I'm New</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
</div>

Answer 1

you could have a bunch of divs that all start hidden, then onMouseOver show the proper one, and hide the others.

Answer 2

This isn't perfect, but should give you an idea:

jQuery("div.subMenu div").hide();
jQuery("div.mainMenu div.menuItem").mouseleave(function () {
      jQuery("div.subMenu div").hide();
   }).mouseenter(function () {
      var linkText = jQuery("a", this).text();
      jQuery("div.subMenu div").each(function (n) {
         var hdrText = jQuery("h2", this).text();
         if (linkText == hdrText) {
            jQuery(this).show();
         } else {
            jQuery(this).hide();
         }
      });
   });
// update: keep the submenu open
jQuery("div.subMenu div").mouseleave(function () {
   jQuery(this).hide();
}).mouseenter(function () {
   jQuery(this).show();
});

I am presuming that there is a div under the subMenu for each menu item, eg.

<div class="subMenu">
    <div id="new">
        <h2>I'm New</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
    </div>
    <div>
        <h2>Ministries</h2>
        <p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div>
        <h2>Beleifs+Mission</h2>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
    </div>
    <div>
        <h2>Listen</h2>
        <p>laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div>
        <h2>Connect</h2>
        <p>Duis aute irure dolor in reprehenderit in voluptate velit</p>
    </div>
</div>

Explanation:

1. Start off by hiding all the div's inside subMenu.
2. The mouseleave on all the menu items unconditionally hides all the div's inside subMenu, even if they are already hidden.
3. The mouseenter on all the menu items hides all those same div's, except it shows the one that has identical text inside the menu item's link and the submenu's h2 header. (There are definitely better ways to do this, but you need some way to correlate the menu item and the submenu. If you have any say about the id's, you might be able to use a naming convention that expresses the connections.)

Update: Note that there's a lot of unconditional hide() going on. For instance, the submenu will go away when the mouse leaves the menu item. To keep the submenu visible while the mouse is on it, add mouseleave and mouseenter handlers for "div.subMenu div" as well. To avoid flicker, you might need to keep track of the state of each submenu.

Update 2: I've added a couple of lines to keep the submenu open while the mouse is in it. YMMV on flicker. This works for me without any change to the tables (it just ignores them). However, the submenu div's need to be positioned right against the menu item, so that the mouse can travel from the menu item to the submenu without it disappearing. In my test code, I set the following to make sure it would work:

div.mainMenu div.menuItem,
div.subMenu div,
div.subMenu div h2 {
   margin-top: 0;
   margin-bottom: 0;
}

If this bunches up the text too much, you can add padding in lieu of margin.

Answer 3

I can only guess you are talking about making the "subMenu" have the accordian style?

If this is the case, then just make sure you have jQuery UI loaded and add this line:

$(document).ready(function(){
 $('.submenu').accordion({ event: 'mouseover', header: 'h2' });
})

If you want the mainMenu to appear in an accordian style, this would would be more difficult as you would have to completely hide the table and pull data from it and into a more suitable structure like your subMenu.

Please clarify what you are trying to do.

---

Ok, I messed around with what you have... I didn't touch the current structure, but I did add stuff to it. The basic script is below, but I posted a full working version in this pastebin - I tried to add a bunch of comments to help you navigate through the mess :P

$(document).ready(function(){
 /* hide submenu items */
 $('.subMenu').hide();

 /* disable links in menu */
 $('.mainMenuLink').click(function(){return false;})

 /* Top row is the menu row */
 $('.mainMenu table tr:first').addClass('mainMenuRow');

 /* Add display area */
 var numberOfColumns = $('.mainMenuRow td').length; 
 $('.mainMenu table').append('<tr><td class="subMenuDisplay" colspan="' + numberOfColumns + '"></td></tr>') /* */

 /* Add accordian style functioning */
 var slideDelay = 500;
 $('.mainMenu td').hover(
  function(){
   /* only continue if there is a link inside the cell */
   if ($(this).find('.mainMenuLink').length) {
    var subMenuId = $(this).find('.mainMenuLink').attr('hash'); /* hash returns the hash portion of the URL */
   } else {
    return;
   }
   /* hide Content */
   $('.menuContent').remove();

   /* menu is active, display contents of submenu div */
   $(this).addClass('menuActive');
   $('.subMenuDisplay').html('<div class="menuContent" style="display:none"></div>');
   $('.menuContent').html( $(subMenuId).html() ).slideDown(slideDelay);
  },function(){
    /* close display */
   $(this).removeClass('menuActive');
   $('.menuContent').slideUp(slideDelay);
  })
})