Include 'expanded' option from Menu Settings

I'm honestly not seeing where this would be useful. Dropdown and flyout menus are supposed to only show up when you hover. It isn't the same as a DHTML menu kind of thing. I'm really inclined to won't fix this since I've never seen a flyout menu set to expanded/open. Can you maybe explain a little more or show an example of a site that does this behavior?

Unfortunately I don't think this is a generally desirable feature for nice menus. If you write up the code to do this, please feel free to attach a patch but I most likely will not incorporate it into the module. It can be added to the handbook though if there happen to be other people who need this for some reason.

I still don't see the visual style of this making any sense with the flyout expanded. It sounds more like you want something like DHTML menu rather than nice menus.

First, thank you for a nice module.

I think there's a valid need for expanded sub-menus in Nice Menus. You see this often, typical example at http://www.patagonia.com, where the Clothing and Gear menu has two levels of menu displayed in the same fly-out block (one for the high-level prduct category - men's, women's ,etc and the other for the lower-level category).

We have a similar need at my workplace, and are trying to figure out how best to implement. Deeply nested menus are cumbersome.

If there's an obvious alternative approach please do tell.

Otherwise, I could look into providing a patch. Thanks.

Due to nice_menus' clean architecture, it was easy to provide a theming function which overrides nice_menus' theme_nice_menu_tree to expand children menu items. Basically, if the parent is expanded, then rather than wrap the children in a <ul></ul> block, the parent gets a class value of "expandedparent" (so you can style it differently if you wish) and the children end up as <li>'s in the same <ul> block as the parent. I also added an "item<n>" class value to support styling of each item in order (see the notes in the code on that one) as well as a "column<n>" for each menu item to be used by the css to support vertical shifting of the first <li> of each column. The technique is based on Method 6 in http://www.alistapart.com/articles/multicolumnlists, and is pure CSS based (the best of a bad bunch of options).

This code is not yet well tested; user beware. Meant to offer an approach.

Here's the theming function:

<?php
/**
 * Builds the inner portion of a nice menu.  OVERRIDES theme_nice_menu_tree to
 * provide support for expanded communities/tracks sub-menu.  If the sub-menu is
 * expanded, we do not wrap it in a <ul></ul> block, but rather the parent gets 
 * gets indicated as the parent of an expanded menu with a class="expandedparent".
 *
 * @param $pid
 *   The parent menu ID from which to build the items.
 * @param $menu
 *   Optional. A custom menu array to use for theming --
 *   it should have the same structure as that returned by menu_get_menu().
 * @return
 *   An HTML string of properly nested nice menu lists.
 */
function hci1_nice_menu_tree($pid = 1, $menu = NULL, $fred = NULL) {
  $menu = isset($menu) ? $menu : menu_get_menu();
  $output['content'] = '';
  static $item_number;

  $output['subject'] = check_plain($menu['items'][$pid]['title']);

  if ($menu['visible'][$pid]['children']) {
    // Build class name based on menu path
    // e.g. to give each menu item individual style.
    foreach ($menu['visible'][$pid]['children'] as $mid) {  
      // Strip funny symbols
      $clean_path = str_replace(array('http://', '<', '>', '&', '=', '?', ':'), '', $menu['items'][$mid]['path']);
      // Convert slashes to dashes
      $clean_path = str_replace('/', '-', $clean_path);
      $path_class = 'menu-path-'. $clean_path;
            
      // Record item # sequentially to support multi-column lists if desired
      // bug: this only works for leaf <ul>s (those without <ul>s below them)
      $item = 'item' . $item_number;
      $column = 'column' . (integer) floor(($item_number - .5) / COMMUNITY_MENU_ROWS + 1);
      $is_expanded = ($menu['items'][$mid]['type'] & MENU_EXPANDED);
      
      if (count($menu['visible'][$mid]['children']) > 0) {
        $parenthood = ($is_expanded) ? 'expandedparent' : 'menuparent';
        $output['content'] .= '<li id="menu-' . $mid . '" class="' . "$path_class $item $column $parenthood" .'">'. menu_item_link($mid);
        $item_number++;
        if (!$is_expanded) {
          $output['content'] .= '<ul>';
          $item_number = 1;
        }
        $tmp = theme('nice_menu_tree', $mid);
        $output['content'] .= $tmp['content'];
        $output['content'] .= ($is_expanded) ? '' : "</ul>\n";
        $output['content'] .= "</li>\n";
      }
      else {
        $output['content'] .= '<li id="menu-'. $mid .'" class="'. "$path_class $item $column" .'">'. menu_item_link($mid) .'</li>'."\n";
        $item_number++;
      }
    }
  }
  return $output;
}
?>

And the CSS:

/******************************
 Communities sub-menu
 
 We produce a multi-column list for the communities ontology.
 Based on Method 6 at http://www.alistapart.com/articles/multicolumnlists
 
 3 columns of 30 max elements
******************************/
/* bounding ul */
ul#nice-menu-3 li.menu-path-community ul {
  clear: none;
}
/* applies to the community names (Talent Strategy, etc) */
ul#nice-menu-3 li.menu-path-community ul li.expandedparent {
  font-weight: bold;
}
ul#nice-menu-3.nice-menu li.menu-path-community ul li {
  width: 24em;
  line-height: 1.2em;
  margin: 0;
  padding: 0;
  float: none;
  clear: none;
}
ul#nice-menu-3 li.menu-path-community ul li a {
  padding: 0 0 0 .8em;
  font-size: 75%;
}
/* Bring the first item of each column back up to the level of item 1.
Vertical return = items * height.  E.g. 30 items * 1.2em line-height = 30em */
ul#nice-menu-3 li.menu-path-community ul li.item31,
ul#nice-menu-3 li.menu-path-community ul li.item61
{
  margin-top: -36em;
}
/* horizontal position of each column */
ul#nice-menu-3 li.menu-path-community ul li.column1
{
  margin-left: 0em;
}
ul#nice-menu-3 li.menu-path-community ul li.column2
{
  margin-left: 24em;
}
ul#nice-menu-3 li.menu-path-community ul li.column3
{
  margin-left: 48em;
}

Dwight,
I'm having a hard time making the CSS work for me. Could you explain the ul#nice-menu-3.nice-menu and menu-path-community? Thanks.

OK I figured out the CSS.

There's still a problem with the Garland theme when the nice menus are in the header. Menu is all messed up in that case.

Does anyone know why and how to fix this?

Because Garland is weird. If you look in the NM CSS, you'll see a bunch of comments like "repeat for Garland" that include the same rule but add the specificity for the Garland header by leading with #header-region to make things look right in the Garland header.

Thanks. It works now (multi-column nice menu as per Dwight's above, header region, Garland), but there is a remaining issue.

We bring the first item of each column back up to the level of item 1 by counting #items * line-height, right? This calculation is indeed correct and should work perfectly. However 1 or 2 pixels difference show up in one or the other direction in browsers like Firefox, Safari and IE. So the columns' rows are not exactly lined up horizontally.

I would like to refrain using browser hacks, cumbersome and never completely right anyway.

So I am looking for another way to bring the first item of each column back to the level of item1, a way which would guarantee that everything lines up correctly. The calculation above is correct but yields incorrect results due to browser differences. We need something else, a CSS rule or something. Any ideas anyone?

Still trying to fix this.

Also looking at vince's multi-column implementation on http://drupal.org/node/301247 to see if it addresses the problem better.

Any ideas welcome.

Menu Blocks Module might be another option

http://drupal.org/project/menu_block