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

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.