Index: dhtml_menu.css =================================================================== --- dhtml_menu.css (revision 132) +++ dhtml_menu.css (working copy) @@ -51,3 +51,31 @@ list-style-image: url("images/folder-closed-white.png") !important; } +/* + * Drop-Down menus + */ +.drop-down { + display:block; +} +.drop-down li { + float:left; + display:block; + text-align:center; +} +.drop-down li:hover { + background-color: #E7630E; +} +.drop-down li.active-trail { + background-color: #E7630E; +} +.drop-down ul.nested li { + float:none; + background-color: #CCCCCC; +} +.drop-down ul.nested { + position:absolute; +} +.drop-down ul.nested.deep { + top:0; + left:120px; +} Index: dhtml_menu.js =================================================================== --- dhtml_menu.js (revision 132) +++ dhtml_menu.js (working copy) @@ -29,6 +29,14 @@ // Sanitize by removing "expanded" on menus already marked "collapsed". $('li.dhtml-menu.collapsed.expanded').removeClass('expanded'); + // Prepare Drop-Down menus. + $('.drop-down ul.menu li') + .removeClass('expanded') + .addClass('collapsed') + .addClass('start-collapsed'); + $('.drop-down ul.menu ul.menu').addClass('nested'); + $('.drop-down ul.menu ul.menu ul.menu').addClass('deep'); + /* Relevant only on "open-only" menus: * The links of expanded items should be marked for emphasis. */ @@ -72,25 +80,35 @@ var cloned = $('
'); } + /* Same as for settings.nav == 'hover' but for all drop-down menus + * in case the general nav is not 'hover' + */ + if (($('.drop-down ul.menu').length > 0) && (settings.nav != 'hover')) { + var freeze = false; + $('.drop-down ul.menu').mouseenter(function() {freeze = false}); + $('body').mouseleave(function() {freeze = true}); + } + /* Add jQuery effects and listeners to all menu items. */ $('ul.menu li.dhtml-menu:not(.leaf)').each(function() { var li = $(this); var link = $(this).find('a:first'); var ul = $(this).find('ul:first'); + var dropdown = ($(this).parents('.drop-down').length > 0); // Only work on menus with an actual sub-menu. if (link.length && ul.length) { /* When using cloned items: * - Clone the menu link and mark it as a clone. */ - if (settings.nav == 'clone') { + if (settings.nav == 'clone' && !dropdown) { link.clone().prependTo(ul).wrap(cloned); } /* When using double-click: * - Add a dblclick event handler that allows the normal link action to complete. */ - else if (settings.nav == 'doubleclick') { + else if (settings.nav == 'doubleclick' && !dropdown) { link.dblclick(function(e) { return true; }); @@ -102,7 +120,7 @@ * - In RTL mode, shift the overlay to the right of the text. * - @TODO: Explore whether "float:right" in dhtml_menu-rtl.css could solve this. */ - else if (settings.nav == 'bullet') { + else if (settings.nav == 'bullet' && !dropdown) { li.addClass('dhtml-folder'); var b = bullet.clone().prependTo(link).click(function(e) { Drupal.dhtmlMenu.toggleMenu(li, link, ul); @@ -122,7 +140,7 @@ /* When using hover expansion: * - Add mouse-hovering events. */ - else if (settings.nav == 'hover') { + else if (settings.nav == 'hover' || dropdown) { link.mouseenter(function(e) { Drupal.dhtmlMenu.switchMenu(li, link, ul, true); }); @@ -145,7 +163,7 @@ /* When using menus that cannot collapse: * Toggle the menu normally, but only if the menu is closed. */ - else if (settings.nav == 'open') { + else if (settings.nav == 'open' && !dropdown) { link.click(function(e) { // Don't collapse expanded menus. if (li.hasClass('expanded')) { @@ -159,7 +177,7 @@ } // These three options make links simply toggle when clicked. - if (settings.nav == 'clone' || settings.nav == 'doubleclick' || settings.nav == 'none') { + if ((settings.nav == 'clone' || settings.nav == 'doubleclick' || settings.nav == 'none') && !dropdown) { link.click(function(e) { Drupal.dhtmlMenu.toggleMenu(li, link, ul); if (settings.effects.remember) {