DHTML expandable menu links

i just implemented this on my drupal site. please have a look, see if it works with your browser, and tell me what you think of it. and feel free to make a patch for drupal (i won't have much time before next weekend).

Wonderful. This is an elegant, elegant implementation. I'd like to see menu.inc patched as ax suggests (possibly add a param to the function) so we can experiment with css menus.

i think the javascript error on ax's site happens when the nav block is not shown. just an oversight i'm sure.

thanks to everyone for testing.

> i think the javascript error on ax's site happens when the nav block is not
> shown. just an oversight i'm sure.

right you are. i fixed that in the multimenu javascript.

regarding the half a second delay before the menu pops up, to save the user from disortientation suggested at drupal.kollm.org: i guess this isn't possible with a pure css menu, but would require considerably more javascript. which i almost certainly won't find / implement. feel free to suggest / implement anything related, though.

what i could imagine is to make the menu look more like a real menu as on CSS Creator, ie. instead of expanding the submenus to the bottom, shift them out to the left / right. as i said before, this probably won't happen before the weekend.

One line patch to menu_tree() so we can optionally show all links, not just active links. This is all the core code that needs to change in order to facilitate expandable menus.

I have written my own module to create a dhtml navigation tree, by linking in phplayersmenu to build the tree menu and handle all the cross browser capiblities. I did have to copy most of menu_tree() to do this, but it meant that I didn't have to change the core.

But it was not just menu_tree that has to be changed. remember that once you have made this change to useing dhtml menus you have access to every menu. So modules like the watchdog only display it's menus when you are in the admin section.

There really needs to be a method to say to all modules that we want every menu, and done try to be a smart bugger.

Gordon makes a good point. I think this patch is worthy despite this known limitation.

i put an updated version, implementing real csscreator style rollover menus and submenu indicators, on my site. please note the NOTE at the end.

Take a look at the following demo of the Archomai Transmenu drop down menu.

It uses javascript, yes.. but it degrades well .. and doesnt require horribly kludged html

I have tried it on firefox 0.7, ie 6.0 and opera 7 with exactly the same results.

> Take a look at the following demo of the Archomai Transmenu drop down
> menu.

nice menu, nice theme. thats phptemplate, isn't it?

> It uses javascript, yes.. but it degrades well .. and doesnt require
> horribly kludged html

the nice thing about the CSS Creator menu is that for non-IE
browsers, it works *without any javascript*, with css only. and the
javascript to make it work in IE is just some 10 lines. besides that, it
degrades as well and doesn't require kludged html, neither.

i'm sure your demo can be done the same as nice with the CSS Creator
menu. mind to give it a try?

One more benefit of the CSSCreator scheme is that the HTML is much easier to construct. The brief javascript snippet in CSSCreator figures out which items have submenus and applies the proper styling accordingly. The Anarchai menu on the other hand requires the user to embed classes in his HTML depending on whether they have children or not. Thats harder to contruct. An example from Adrian's site example,

 <li class="firstItem collapsed">capdev

When the admin-customizable menu patch is applied (http://drupal.org/node/view/7172), this should be possible to do without patching core. The whole menu tree will be available at all times to modules.

Has anyone tried using expandable menus after JonBob's menu changes have been committed? According to JonBob this patch is no longer required ...

I'm marking this fixed as I believe this is no longer an issue now JonBob's menu system improvements hit CVS. Please reopen if necessary.

The new menu system makes this job possible, but still difficult. I think the patch proposed here is still a valid approach. What the UI designer needs is for the menu system to output a UL. menu_get_menu() does not do this. menu_get_tree() does, but it omits invisible items. Thus, I still propose we enhance menu_get_tree() to optionally include hidden items.

In HEAD, theme('menu_tree', 1, TRUE) will return a rendered tree of all accessible menu items in the main nav menu.

Perhaps some entrprising theme designer wants to apply some DHTML menu renderer to theme('menu_tree', 1, TRUE), the function cited by JonBob. The output of that function shoudl work with most smart menu scripts, since its just a UL

Since this thread was before 4.6 -- is "head" referred to here 4.6 or was all the work I did building a template with DHTML menus a waste?

I need to launch this site, do I need to remove the menus from the template? I didn't think that an apparently closed feature request was the right place to ask, but I go to response trying to ask in what I thought was a more appropriate location.

hm - seems that theme('menu_tree', 1, TRUE) doesn't work anymore? apparently, it silently disappeared between revision 1.77 and 1.78 as part of this patch. r1.78 was the penultimate change before DRUPAL-4-6, which means that theme('menu_tree', 1, TRUE) is not in Drupal 4.6.

bad bad bad. i rely on this feature for a dynamic menu on certain sites of mine. was the patch supposed to remove it ("Make local tasks more themeable" doesn't suggest this)? is there another way to get an completely expanded menu tree with proper menu item class labeling ("expanded", "collapsed") for the current menu path? if not, could this functionality please be reinstated?

thanks for any insights.

So I take this to mean that Drupal can't do common DHTML menus, or any menu structure other than the primitive repaint-the-entire-page-on-each-mouse-click menus?

The only way to add items to a dynamic menu seems to be to hand-code them into the template one page at a time.

Using menu_get_menu from http://drupaldocs.org/api/4.6/group/menu should help to hand over a complete menu to some JavaScript, no? Something along that lines in your phpTemplate/theme...

 <?php
 function my_menu_tree($pid = 1) { 
 $menu = menu_get_menu(); 
 $output = ; 
 {
   foreach ($menu['visible'][$pid]['children'] as $mid) {
       print theme_menu_item($mid); // print out current menu-item; change to fit your dHtml/JS code?
       my_menu_tree($mid);  // recursive call to get sub-menu-items
   } 
 } 
 return $output; 
 }
 ?>

... combined with http://www.nickrigby.com/examples/dropdown4/index.htm from http://www.nickrigby.com/article/25/drop-down-menus-horizontal-style-pt-3 and I would be happy, too.

not print theme_menu_item($mid); // print out current menu-item; change to fit your dHtml/JS code?
better print theme('menu_item', $mid);

the function theme_menu_item is just the fall back function if no such function is available in the theme!

Based on the bluemarine template for the PHP template engine and work by Nick (example menu), the following is a adaptation with working dynamic menu:

page.tpl.php

Change the line reading print my_menu_tree(24); to your menu-id or to 0 to get a complete dynamic menu including administration menu items.

-- Sorry for duplicate posting in http://drupal.org/node/31307.

has anyone tried this patch to see if it has any merit? Since it appears to be against 4.6 instead of HEAD, I mark this issue as 'needs work'

i tried it out and it works like a charm.
the only thing though is that the IE Javascript conflicts with the gmap.module, which makes it useless on IE with that module installed.

i'm also trying to fit the first-level

The JS should not use window.onload. See misc/drupal.js for attaching events.

The JS should not use window.onload. See misc/drupal.js for attaching events.

drupal 4.6.3 does not ship with misc/drupal.js

That said, what is the proper way to call the js if not via window.onload?
I have not been able to find how to add to the body onload call via anything but a module.
This will be an ongoing issue with regard to embedding google maps (etc) on drupal pages given the IE related js bugs.

There is spajax_mm module.