By dnieweg on

If you're like me, you use Drupal 5.x, use Nice Menu's and really, really, really want to have Icons, additional Hyperlinks and a bit of HTML formatted description text in your Nice Menu's.

Well after a week of work .. mostly CSS formatting .. I do and thought I would share it.

You can view the finished product at www.3xlogic.com so you can understand what I am talking about.

The first thing I need to say is that this is not a module solution. It probably could be turned into a module rather simply by doing the required coding with an override to theme_menu_item_link in the template.php. I am new to Drupal so not quite familiar with how to do this just yet.

The second thing I need to say is that I customized the function theme_nice_menu_tree in the Nice Menu's module, nice_menus.module. This is another, and probably more direct method, that this functionality could be turned into a module because I believe this also can be overridden.

By editing the Nice Menu's module I can no longer apply any updates to Nice Menu's unless I also edit each update. However, considering the age of 5.x I doubt there will be many updates.

I am sharing what I did because I could not find the information I needed and my questions went unanswered as you can see here: http://drupal.org/node/460610.

Here are the basics of how this was accomplished:

1) How the menu link are built by default.

By default Nice Menu's uses it's function theme_nice_menu_tree to build the list items, li's that make up each menu item. It builds the anchor tag inside the menu li y calling the system function menu_item_link which wraps the url you entered in the menu admin page in anchor tags.

$output['content'] .= '<li id="menu-'. $mid .'" class="'. $path_class .'">'. menu_item_link($mid) .'</li>'."\n";

2) Editing the Nice Menu's Module (nice_menus.module)

a) I needed additional containers inside of the list item to hold the icon image and also the description text. I did it by adding a div with a class="m-in-l", and a div with the class"m-in-r" on each side of the normal anchor tag. When looking at the code above and below, the part that say's menu_item_link($mid) is where the hyperlink anchor tag you normally get is generated. Below you can see I simply add the additional containers on the left and right of that tag.

$output['content'] .= '<li id="menu-'. $mid .'" class="'. $path_class .'">' . '<div class="m-outer" id="m-outer-' . $mid . '"><div class="m-in-l" id="m-in-l-' . $mid . '"></div><div class="m-in-r" id="m-in-r-' . $mid . '">' . menu_item_link($mid) . '<div class="m-desc" id="m-desc-' . $mid . '">' . c_menu_item_description($mid) . '</div></div></div>' . '</li>'."\n";

b) You will notice that I also added an ID to each div with the unique Menu-Id-Number ($mid) so that I could reference specific items through CSS if needed, which was for the first level.

c) The function called c_menu_item_description is a custom function I wrote which returns the text (including html tags) from the description field of a menu item. You can see this below the Title when you are editing a menu item in admin. The function simply takes the menu id and returns everything from the description field including html tags and places it inside of the m-in-r div.

d) Here's the complete new Nice Menu's function. Notice there are two lines with my edits since one is for menuparent list items and one is for non-menuparent list items. Menuparent are menu items that have sub menus.

3) Editing the template.php file

a) Since I wanted to get the description text from my menu item, I needed a custom function to retrieve it. The nice thing about the description field is that you can enter html into it and it is not cleaned up so you can render it right to the screen. Be aware however that there is a length limit as to how many characters you can enter in the description field. I am sure this could be changed somewhere but I haven't looked yet.

b) Adding a new function was easy .. you just inssert it in the template.php, call it from somewhere else .. and it works. Nice.

function c_menu_item_description($mid) {
  $item = menu_get_item($mid);
  $descrip = '';
  $descrip = $item['description'];
  return $descrip;
}

c) All my function does is use the menu id to get the array of info for one menu item using the drupal function menu_get_item. I then extract the description text from the array using $item['description'], pass it to my variable $descrip and return it. Easy huh?

4) How about that image?

a) If you are wondering where we are going to get the image from, it is by using the background image properties which can be set with CSS.

b) If you are wondering why I didn't simply apply the background image to the actual original menu item container it is because menuparent items already have a little arrow image applied to the background to signify a sub menu, so I needed my own container for the icon.

5) The CSS. Oww.

a) Yeah .. the CSS was a headbanger but I have it all working for my site. I need to spend many hours cleaning it up to get rid of redundant stuff and I still need to test IE compatibility .. specifically IE6 and it may require some additional trickery.

b) The basics are to get your new elements to be where you want, to get everything the size you want, and to hide stuff you don't want showing.

c) On the first horizontal row I didn't want any icons or descriptions so I hid them like this:

#block-nice_menus-1 li ul li.menuparent a.m-desc { background: none; }
#block-nice_menus-1 li a#m-desc-189 {display:none !important;}
#block-nice_menus-1 li div#m-desc-189 {display:none !important;}

You have to explicitly hide the containers for each top-level menu item. This is where my ID tags came in handy so I could select just those items.

d) Next I needed to apply the background image to my m-in-l div. Again each item has to individually have it's icon applied as such:

#block-nice_menus-1 li ul li div#m-in-l-136 { background: #fff url(images/menu/management.gif) center center no-repeat;}

Of course there was much, much, much more CSS needed to make everything the size I wanted with the behavior I wanted but you can see that on the live site with Firebug or Web Developer.

That's basically it. Let me know what you think.

Dave

⋅ Categories: Drupal 5.x

Comments

vm’s picture

vm commented

great write up, should be a handbook page attched to the nice menus section.

the end product is slick.

dnieweg’s picture

dnieweg commented

Thanks for the comments VeryM. How do I add it to the handbook?

If you use Nice Menu's you've noticed that in certain browsers it will display the anchor tag's 'Title' when you hover over the menu item (like a tool tip). This was more of an annoyance than a real problem, although sometimes it could cause your menu to close unexpectedly if your mouse gets over the tool tip element.

With the changes I've made to Nice Menu's to allow the menu's description field to show in the menu, I've started adding a lot more stuff to the menu's description field including HTML. This caused the undesirable effect of showing all of this html and extended description text in the hover tool tip .. so I had to turn it off.

In order to do this I used a patch found here: http://drupal.org/node/247904 The patch adds two new functions to the nice_menus.module which replace the system calls to menu_item_link and theme_menu_item_link which are the functions Nice Menu's calls to build the anchor tag for your main menu link. NOTE: The patch function nice_menus_item_link should actually be nice_menu_item_link since that's the one we are calling.

I didn't apply the patch directly, but simply added the two new functions and then edited my already edited theme_nice_menu-tree function to call these replacement functions instead of the system functions. Here's the relevant portions of the nice_menus.module with original, my edits, and patch applied for completeness.

+- = First edits/additions (only two), to get the icon & description functionality.
+ = Second edits/additions to remove the hover tooltip.

+  /**
+   * Returns the rendered link to a menu item.
+   *
+   * This is largely a copy of menu_item_link()
+   * http://api.drupal.org/api/function/menu_item_link/5
+   *
+   * @param $mid
+   *   The menu item id to render.
+   * @return
+   *   An HTML string of a link as rendered by theme_nice_menu_item_link().
+   */
+  function nice_menu_item_link($mid) {
+    $item = menu_get_item($mid);
+    $link_item = $item;
+    $link = '';
+  
+    while ($link_item['type'] & MENU_LINKS_TO_PARENT) {
+      $link_item = menu_get_item($link_item['pid']);
+    }
+  
+    return theme('nice_menu_item_link', $item, $link_item);
+  }
+  
+  /**
+   * Themes the link to a menu item.
+   *
+   * This is largely a copy of theme_menu_item_link()
+   * http://api.drupal.org/api/function/theme_menu_item_link/5
+   *
+   * @param $item
+   *   The menu item to render.
+   * @param $link_item
+   *   The menu item which should be used to find the correct path.
+   * @return
+   *   An HTML string of a link.
+   */
+  function theme_nice_menu_item_link($item, $link_item) {
+    return l($item['title'], $link_item['path'], array(), isset($item['query']) ? $item['query'] : NULL);
+  }
  /**
 * Builds the inner portion of a nice menu.
 *
 * @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 theme_nice_menu_tree($pid = 1, $menu = NULL) {
  $menu = isset($menu) ? $menu : menu_get_menu();
  $output['content'] = '';

  $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;
      if (count($menu['visible'][$mid]['children']) > 0) {
-       $output['content'] .= '<li id="menu-'. $mid .'" class="menuparent '. $path_class .'">'. menu_item_link($mid);
+-     $output['content'] .= '<li id="menu-'. $mid .'" class="menuparent '. $path_class .'">' . '<div class="m-outer" id="m-outer-' . $mid . '"><div class="m-in-l" id="m-in-l-' . $mid . '"></div><div class="m-in-r" id="m-in-r-' . $mid . '">'. menu_item_link($mid) . '<div class="m-desc" id="m-desc-' . $mid . '">' . c_menu_item_description($mid) . '</div></div></div>';
+      $output['content'] .= '<li id="menu-'. $mid .'" class="menuparent '. $path_class .'">' . '<div class="m-outer" id="m-outer-' . $mid . '"><div class="m-in-l" id="m-in-l-' . $mid . '"></div><div class="m-in-r" id="m-in-r-' . $mid . '">'. nice_menu_item_link($mid) . '<div class="m-desc" id="m-desc-' . $mid . '">' . c_menu_item_description($mid) . '</div></div></div>';

        $output['content'] .= '<ul>';
        $tmp = theme('nice_menu_tree', $mid);
        $output['content'] .= $tmp['content'];
        $output['content'] .= "</ul>\n";
        $output['content'] .= "</li>\n";
      }
      else {
        $output['content'] .= '<li id="menu-'. $mid .'" class="'. $path_class .'">'. menu_item_link($mid) .'</li>'."\n";
+-     $output['content'] .= '<li id="menu-'. $mid .'" class="'. $path_class .'">' . '<div class="m-outer" id="m-outer-' . $mid . '"><div class="m-in-l" id="m-in-l-' . $mid . '"></div><div class="m-in-r" id="m-in-r-' . $mid . '">' . menu_item_link($mid) . '<div class="m-desc" id="m-desc-' . $mid . '">' . c_menu_item_description($mid) . '</div></div></div>' . '</li>'."\n";
+      $output['content'] .= '<li id="menu-'. $mid .'" class="'. $path_class .'">' . '<div class="m-outer" id="m-outer-' . $mid . '"><div class="m-in-l" id="m-in-l-' . $mid . '"></div><div class="m-in-r" id="m-in-r-' . $mid . '">' . nice_menu_item_link($mid) . '<div class="m-desc" id="m-desc-' . $mid . '">' . c_menu_item_description($mid) . '</div></div></div>' . '</li>'."\n";

      }
    }
  }
  return $output;
}
vm’s picture

vm commented


How do I add it to the handbook?

you click on create content in your drupal.org navigation menu and use the book page content type.

dnieweg’s picture

dnieweg commented

So now that I am adding HTML to the description tags and using my new menu's I am trying to work out a few bugs. The first two I solved, but still working on the third.

1) On IE7 no text at all showed up on the menu's. I guess IE7 doesn't like block elements not having a height and it gets all weird. So setting an explicit height fixes it as follows:

/* IE7 Bug fix */
#block-nice_menus-1 li ul li div.m-in-r { 
height: 26px;
width: 170px;
}

But I only wanted to present this (and other IE7 fixes) to IE7 browsers only so I included this in my page.tpl.php file:

<!--[if IE 7]>
 <link rel="stylesheet" type="text/css" href="/sites/all/themes/northstudio/ie7.css" />
<![endif]-->

I already had one for IE6 so figured I'd just do the same even if there ends up being crossover. I then created an ie7.css and put it in my theme directory with the bug fix code above.

Bug 2 was where the description text was running outside of the div container instead of wrapping. For some reason this fixed it. Go figure.

#block-nice_menus-1 li ul li div a.smenu {
height: 1%;
}

BUG 3 The last and most troubling bug I am still working on as that I am putting anchor tags in my Menu Description which now shows up in my menu which is great, but it's not respecting the inline nature of the anchor tag and it is stacking them. I tried making adding the following:

display: inline-block;
float: left;
clear: none;

and a bunch of other stuff. I got the elements to at least move around a bit off the left margin, but something is still pushing them down .. been messing with margin stuff .. but ..

Anyways, here's a picture of what's happening. If anyone has any ideas I would sure welcome it. You can see how it all goes together at www.3xlogic.com.

umm .. how do I attach files? Oh well .. here is the screen shot: http://www.3xlogic.com/files/inline_error.jpg

Dave

dnieweg’s picture

dnieweg commented

This has all been rewritten and added to the Nice Menu's Handbook.

http://drupal.org/node/470558

Dave

ingopingo’s picture

ingopingo commented

Hi,

very interesting, so I like to use this version of nice menu within my site...

But what should I do to convert this to drupal 6.13 (the version I use)?????

I' ve tried to adapt this to 6 for some days now but without success. All starts with differences of the versions, e.g. that there isn't a menu_item_link call in 6.

The theme_menu_item_link call is different either. cause in 6 there isn't a call of $link_item within this one....

Aren't there any user who have translated this one to 6 now?

Any help would be appreciated!

Cheers,

ingopingo’s picture

ingopingo commented

I've done all the conversions from http://drupal.org/node/470558 and this is what I got:

"Fatal error: Cannot use string offset as an array in ...\sites\all\themes\MYTHEME\template.php on line 208"

In line 208 I find the following:

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

When I change the function name from phptemplate_nice_menu_tree to MYTHEME_nice_menu_tree and vice versa without clearing the sites cache I can see my site without showing the nice menu but showing the following warning:

"warning: call_user_func_array() [function.call-user-func-array]: First argument is expected to be a valid callback, 'ninefiftyrobots_nice_menu_tree' was given in ...\includes\theme.inc on line 617."

After clearing the cache I get the "Fatal error: Cannot use string offset as an array in ...\sites\all\themes\MYTHEME\template.php on line 208" again.

So where to start?
Is it possible?

Please help...

ingopingo’s picture

ingopingo commented

Now I've changed the 2 output strings in the template php:

$output['content'] .= '<li id="menu-'. $mlid .'" class="'. $path_class .'">' . '<div class="m-outer" id="m-outer-' . $lmid . '"><div class="m-in-l" id="m-in-l-' . $lmid . '"></div><div class="m-in-r" id="m-in-r-' . $lmid . '">' . theme('menu_item_link', $menu_item['link']) . '<div class="m-desc" id="m-desc-' . $mlid . '">' . c_menu_item_description($mlid) . '</div></div></div>' . '</li>'."\n";
  $output['content'] .= '<li id="menu-'. $mlid .'" class="menuparent '. $path_class .'">' . '<div class="m-outer" id="m-outer-' . $mlid . '"><div class="m-in-l" id="m-in-l-' . $mlid . '"></div><div class="m-in-r" id="m-in-r-' . $mlid . '">'. theme('menu_item_link', $menu_item['link']) . '<div class="m-desc" id="m-desc-' . $mlid . '">' . c_menu_item_description($mlid) . '</div></div></div>';

and altered the function c_menu_item_description to:

function c_menu_item_description($mlid) {
  $item = menu_get_item($path = NULL, $router_item = NULL);
  $descrip = '';
  $descrip = $item['description'];
  return $descrip;
}

To report the good news: I don't get a fatal error anymore

Here's what I can see so far (unfortunately I' not allowed to post pics...). The nice menu now shows up and works as normal.

There are 2 additional menu parent items on the first position with the following code (firebug):

<li id="menu-0" class="">
     <div id="m-outer-" class="m-outer">
           <div id="m-in-l-" class="m-in-l"/>
           <div id="m-in-r-" class="m-in-r">
                  <a href="/de"/>
                  <div id="m-desc-0" class="m-desc"/>
            </div>
     </div>
</li>
<li id="menu-0" class="menuparent ">
      <div id="m-outer-0" class="m-outer">
           <div id="m-in-l-0" class="m-in-l"/>
           <div id="m-in-r-0" class="m-in-r">
                  <a href="/de"/>
                  <div id="m-desc-0" class="m-desc"/>
            </div>
       </div>
</li>

Seems that the divs have benn called as supposed but not within my menu structure, cause my "normal" parent menu points look as follows:

<li id="menu-4853" class="menuparent menu-path-galleries_listing">
         <a title="Foto Galerien" href="/de/galleries_listing">Foto Galerien</a>
               <ul>
               </ul>
         </li>

As you can see there aren't any div calls within the menu structure....

Any idea what has to be modified?

Any help would be much appreciated...

dnieweg’s picture

dnieweg commented

Ingo,

Check out this other thread: http://drupal.org/node/460610

I think under version 6 your output should look more like this, but I have not tested it on 6.

$parent_class = $children ? 'menuparent ' : '';
        $output .= '<li id="menu-'. $mlid .'" class="'. $parent_class . $path_class .'">'.'<div class="m-outer" id="m-outer-' . $mlid . '"><div class="m-in-l" id="m-in-l-' . $mlid . '"></div> <div class="m-in-r" id="m-in-r-' . $mlid . '">' . theme('menu_item_link', $menu_item['link']) . '<div class="m-desc" id="m-desc-' . $mlid . '">' . c_menu_item_description($mlid);
        // Build the child UL only if children are displayed for the user.
        if ($children) {
          $output .= '<ul>';
          $output .= $children;
          $output .= "</ul>\n";
        }
        $output .= " .'</div></div></div></li>\n";
      }
      else {
        $output .= '<li id="menu-'. $mlid .'" class="'. $path_class .'">'. .'<div class="m-outer" id="m-outer-' . $mlid . '"><div class="m-in-l" id="m-in-l-' . $mlid . '"></div> <div class="m-in-r" id="m-in-r-' . $mlid . '">' . theme('menu_item_link', $menu_item['link']). '<div class="m-desc" id="m-desc-' . $mlid . '">' . c_menu_item_description($mlid); .'</div></div></div></li>'."\n";
      }
    }
  }
  return $output;
}

On that same thread Maluco Marinero left a new function for getting the description text, but again I have not tested this either:

// Set the class to parent only of children are displayed.
        $parent_class = $children ? 'menuparent ' : '';
        $output .= '<li id="menu-'. $mlid .'" class="'. $parent_class . $path_class .'">'. theme('menu_item_link', $menu_item['link']) . ' ' ./* NEW */ '<p class="menucaption">' . $menu_item['link']['options']['attributes']['title'] . '</p>'; /* END NEW*/
        // Build the child UL only if children are displayed for the user.
        if ($children) {
          $output .= '<ul>';
          $output .= $children;
          $output .= "</ul>\n";
        }
        $output .= "</li>\n";
      }
      else {
        $output .= '<li id="menu-'. $mlid .'" class="'. $path_class .'">'. theme('menu_item_link', $menu_item['link']) . ' ' ./* NEW */ '<p class="menucaption">' . $menu_item['link']['options']['attributes']['title'] . '</p></li>' /* END NEW */."\n"; 
      }
    }
  }
  return $output;
}

If you get a Version 6 working please post your results. Thanks - Dave

ingopingo’s picture

ingopingo commented

Dave, thans a lot for your reply.

I'll try to get this to work...

Best regards,
Ingo

ingopingo’s picture

ingopingo commented

Got this finally to work.

The div's are called in a right way and HTML-description works within all levels.

But at the moment I only got the test.gif (displayed within all menus) working properly.....

Your code to add specific icons to the menu's 

#block-nice_menus-1 li ul li div#m-in-l-139 { background: #fff url(images/menu/products.gif) center center no-repeat;}
#block-nice_menus-1 li ul li div#m-in-l-320 { background: #fff url(images/menu/faq.gif) center center no-repeat;}

doesn't seem to work at all and I still haven't any idea why????

I tried to replace the # with ".", left it allone, deleted the"-" in front of the menuID, replaced this one and many more. Nothing works....

What I'm missing???

dnieweg’s picture

dnieweg commented

Can you paste the HTML from your page? Do a view source and copy the part that shows the menu html.

ingopingo’s picture

ingopingo commented

Of course :-)

<div id="block-nice_menus-1" class="block block-nice_menus">

  <div class="content">
    <ul class="nice-menu nice-menu-down" id="nice-menu-1"><li id="menu-4853" class="menuparent menu-path-galleries_listing"><div class="m-outer" id="m-outer-"><div class="m-in-l" id="m-in-l-"></div><div class="m-in-r" id="m-in-r-"><a href="/de/galleries_listing" title="Das ist die Beschreibung von Foto Galerien">Foto Galerien</a> <p class="menucaption">Das ist die Beschreibung von Foto Galerien</p></div></div><ul><li id="menu-2628" class="menu-path-node-add-photo-gallery"><div class="m-outer" id="m-outer-"><div class="m-in-l" id="m-in-l-"></div><div class="m-in-r" id="m-in-r-"><a href="/de/node/add/photo-gallery" title="">Add Gallery</a> <p class="menucaption"></p></div></div></li>

<li id="menu-5245" class="menu-path-node-add-gallery"><div class="m-outer" id="m-outer-"><div class="m-in-l" id="m-in-l-"></div><div class="m-in-r" id="m-in-r-"><a href="/de/node/add/gallery" title="Erstelle eine neue Galerie!">Galerie hinzufügen</a> <p class="menucaption">Erstelle eine neue Galerie!</p></div></div></li>
</ul>
</li>
<li id="menu-263" class="menuparent menu-path-node-21"><div class="m-outer" id="m-outer-"><div class="m-in-l" id="m-in-l-"></div><div class="m-in-r" id="m-in-r-"><a href="/de/content/%C3%BCber-uns" title="Über uns">Über uns</a> <p class="menucaption">Über uns</p></div></div><ul><li id="menu-261" class="menu-path-node-19"><div class="m-outer" id="m-outer-"><div class="m-in-l" id="m-in-l-"></div><div class="m-in-r" id="m-in-r-"><a href="/de/content/impressum" title="">Impressum</a> <p class="menucaption"></p></div></div></li>
<li id="menu-2612" class="menu-path-node-20"><div class="m-outer" id="m-outer-"><div class="m-in-l" id="m-in-l-"></div><div class="m-in-r" id="m-in-r-"><a href="/de/content/agb" title="AGB">AGB</a> <p class="menucaption">AGB</p></div></div></li>
<li id="menu-393" class="menu-path-contact"><div class="m-outer" id="m-outer-"><div class="m-in-l" id="m-in-l-"></div><div class="m-in-r" id="m-in-r-"><a href="/de/contact" title="">Kontakt</a> <p class="menucaption"></p></div></div></li>

</ul>
</li>
<li id="menu-5637" class="menuparent menu-path-relationships"><div class="m-outer" id="m-outer-"><div class="m-in-l" id="m-in-l-"></div><div class="m-in-r" id="m-in-r-"><a href="/de/relationships" title="">Mein Menu</a> <p class="menucaption"></p></div></div><ul><li id="menu-266" class="menuparent menu-path-relationships"><div class="m-outer" id="m-outer-"><div class="m-in-l" id="m-in-l-"></div><div class="m-in-r" id="m-in-r-"><a href="/de/relationships" title="">Meine Kontakte</a> <p class="menucaption"></p></div></div><ul><li id="menu-267" class="menu-path-relationships-list"><div class="m-outer" id="m-outer-"><div class="m-in-l" id="m-in-l-"></div><div class="m-in-r" id="m-in-r-"><a href="/de/relationships/list">Alle</a> <p class="menucaption"></p></div></div></li>
<li id="menu-268" class="menu-path-relationships-requests"><div class="m-outer" id="m-outer-"><div class="m-in-l" id="m-in-l-"></div><div class="m-in-r" id="m-in-r-"><a href="/de/relationships/requests">Pending</a> <p class="menucaption"></p></div></div></li>
<li id="menu-454" class="menu-path-relationships-1"><div class="m-outer" id="m-outer-"><div class="m-in-l" id="m-in-l-"></div><div class="m-in-r" id="m-in-r-"><a href="/de/relationships/1">Freunde</a> <p class="menucaption"></p></div></div></li>
</ul>
</li>

<li id="menu-21" class="menu-path-user-1"><div class="m-outer" id="m-outer-"><div class="m-in-l" id="m-in-l-"></div><div class="m-in-r" id="m-in-r-"><a href="/de/users/ingopingo" title="">Mein Konto</a> <p class="menucaption"></p></div></div></li>
<li id="menu-11" class="menuparent menu-path-node-add"><div class="m-outer" id="m-outer-"><div class="m-in-l" id="m-in-l-"></div><div class="m-in-r" id="m-in-r-"><a href="/de/node/add" title="" class="active">Inhalt erstellen</a> <p class="menucaption"></p></div></div><ul><li id="menu-5573" class="menu-path-node-add-admin-artikel"><div class="m-outer" id="m-outer-"><div class="m-in-l" id="m-in-l-"></div><div class="m-in-r" id="m-in-r-"><a href="/de/node/add/admin-artikel" title="nur für admins">Admin Artikel</a> <p class="menucaption">nur für admins</p></div></div></li>
<li id="menu-112" class="menu-path-node-add-story"><div class="m-outer" id="m-outer-"><div class="m-in-l" id="m-in-l-"></div><div class="m-in-r" id="m-in-r-"><a href="/de/node/add/story" title="Ein Artikel ähnelt in seiner Form einer Seite und ist für das Erstellen und Anzeigen von Inhalten geeignet, die Website-Besucher informieren oder zur Teilnahme anregen sollen. Pressemitteilungen, Website-Ankündigungen und informelle Block-ähnliche Einträge können als Artikel erstellt werden. Nach den Voreinstellungen wird ein Artikel automatisch auf der Startseite angerissen und bietet die Möglichkeit kommentiert zu werden.">Artikel</a> <p class="menucaption">Ein <em>Artikel</em> ähnelt in seiner Form einer <em>Seite</em> und ist für das Erstellen und Anzeigen von Inhalten geeignet, die Website-Besucher informieren oder zur Teilnahme anregen sollen. Pressemitteilungen, Website-Ankündigungen und informelle Block-ähnliche Einträge können als <em>Artikel</em> erstellt werden. Nach den Voreinstellungen wird ein <em>Artikel</em> automatisch auf der Startseite angerissen und bietet die Möglichkeit kommentiert zu werden.</p></div></div></li>

<li id="menu-401" class="menu-path-node-add-blog"><div class="m-outer" id="m-outer-"><div class="m-in-l" id="m-in-l-"></div><div class="m-in-r" id="m-in-r-"><a href="/de/node/add/blog" title="A blog entry is a single post to an online journal, or blog.">Blog entry</a> <p class="menucaption">A <em>blog entry</em> is a single post to an online journal, or <em>blog</em>.</p></div></div></li>
<li id="menu-403" class="menu-path-node-add-book"><div class="m-outer" id="m-outer-"><div class="m-in-l" id="m-in-l-"></div><div class="m-in-r" id="m-in-r-"><a href="/de/node/add/book" title="A book page is a page of content, organized into a collection of related entries collectively known as a book. A book page automatically displays links to adjacent pages, providing a simple navigation system for organizing and reviewing structured content.">Book page</a> <p class="menucaption">A <em>book page</em> is a page of content, organized into a collection of related entries collectively known as a <em>book</em>. A <em>book page</em> automatically displays links to adjacent pages, providing a simple navigation system for organizing and reviewing structured content.</p></div></div></li>

<li id="menu-4603" class="menu-path-node-add-error-page"><div class="m-outer" id="m-outer-"><div class="m-in-l" id="m-in-l-"></div><div class="m-in-r" id="m-in-r-"><a href="/de/node/add/error-page">Error Page</a> <p class="menucaption"></p></div></div></li>
<li id="menu-168" class="menu-path-node-add-event"><div class="m-outer" id="m-outer-"><div class="m-in-l" id="m-in-l-"></div><div class="m-in-r" id="m-in-r-"><a href="/de/node/add/event" title="Studio buchen blabla">Event</a> <p class="menucaption">Studio buchen blabla</p></div></div></li>
<li id="menu-190" class="menu-path-node-add-faq"><div class="m-outer" id="m-outer-"><div class="m-in-l" id="m-in-l-"></div><div class="m-in-r" id="m-in-r-"><a href="/de/node/add/faq" title="Eine häufig gestellte Frage und die Antwort darauf">FAQ</a> <p class="menucaption">Eine häufig gestellte Frage und die Antwort darauf</p></div></div></li>
<li id="menu-230" class="menu-path-node-add-forum"><div class="m-outer" id="m-outer-"><div class="m-in-l" id="m-in-l-"></div><div class="m-in-r" id="m-in-r-"><a href="/de/node/add/forum" title="Ein Forumthema ist der erste Eintrag einer neuen Diskussion in einem Forum.">Forenbeitrag</a> <p class="menucaption">Ein <em>Forumthema</em> ist der erste Eintrag einer neuen Diskussion in einem Forum.</p></div></div></li>

<li id="menu-4812" class="menu-path-node-add-gallery"><div class="m-outer" id="m-outer-"><div class="m-in-l" id="m-in-l-"></div><div class="m-in-r" id="m-in-r-"><a href="/de/node/add/gallery" title="A collection of photographs maintained by a user">Gallery</a> <p class="menucaption">A collection of photographs maintained by a user</p></div></div></li>
<li id="menu-3940" class="menu-path-node-add-haushalt"><div class="m-outer" id="m-outer-"><div class="m-in-l" id="m-in-l-"></div><div class="m-in-r" id="m-in-r-"><a href="/de/node/add/haushalt" title="A place where people and pets live">Haushalt</a> <p class="menucaption">A place where people and pets live</p></div></div></li>
<li id="menu-2980" class="menu-path-node-add-image-gallery"><div class="m-outer" id="m-outer-"><div class="m-in-l" id="m-in-l-"></div><div class="m-in-r" id="m-in-r-"><a href="/de/node/add/image-gallery" title="This content type is for uploading images and is based on a tutorial from &quot;learn by the drop&quot; ( http://learnbythedrop.com/drop/148 )">Image Gallery</a> <p class="menucaption">This content type is for uploading images and is based on a tutorial from "learn by the drop" ( http://learnbythedrop.com/drop/148 )</p></div></div></li>
<li id="menu-2636" class="menu-path-node-add-panel"><div class="m-outer" id="m-outer-"><div class="m-in-l" id="m-in-l-"></div><div class="m-in-r" id="m-in-r-"><a href="/de/node/add/panel" title="A panel layout broken up into rows and columns.">Panel</a> <p class="menucaption">A panel layout broken up into rows and columns.</p></div></div></li>
<li id="menu-3817" class="menu-path-node-add-person"><div class="m-outer" id="m-outer-"><div class="m-in-l" id="m-in-l-"></div><div class="m-in-r" id="m-in-r-"><a href="/de/node/add/person" title="A member of the family or a friend or a pet">Person</a> <p class="menucaption">A member of the family or a friend or a pet</p></div></div></li>

<li id="menu-4790" class="menu-path-node-add-photo"><div class="m-outer" id="m-outer-"><div class="m-in-l" id="m-in-l-"></div><div class="m-in-r" id="m-in-r-"><a href="/de/node/add/photo" title="An individual photograph posted by a site user.">Photo</a> <p class="menucaption">An individual photograph posted by a site user.</p></div></div></li>
<li id="menu-2071" class="menu-path-node-add-photo-gallery"><div class="m-outer" id="m-outer-"><div class="m-in-l" id="m-in-l-"></div><div class="m-in-r" id="m-in-r-"><a href="/de/node/add/photo-gallery" title="This is the main content type for photos/images">Photo Gallery</a> <p class="menucaption">This is the main content type for photos/images</p></div></div></li>
<li id="menu-315" class="menu-path-node-add-profile"><div class="m-outer" id="m-outer-"><div class="m-in-l" id="m-in-l-"></div><div class="m-in-r" id="m-in-r-"><a href="/de/node/add/profile" title="A user profile built as content (Content Profile Module).">Profil</a> <p class="menucaption">A user profile built as content (Content Profile Module).</p></div></div></li>
<li id="menu-114" class="menu-path-node-add-page"><div class="m-outer" id="m-outer-"><div class="m-in-l" id="m-in-l-"></div><div class="m-in-r" id="m-in-r-"><a href="/de/node/add/page" title="Eine Seite, dass in der Form einem Artikel ähnlich ist, ist eine einfache Methode Information zu erstellen und darzustellen die selten geändert werden, wie z.B. eine Kontakt- oder Über uns-Seite. Die Voreinstellung erlauben es nicht bei einer Seite zukommentieren (ausser Admin) und wird nicht auf der Startseite veröffentlicht.">Seite</a> <p class="menucaption">Eine <em>Seite</em>, dass in der Form einem <em>Artikel</em> ähnlich ist, ist eine einfache Methode Information zu erstellen und darzustellen die selten geändert werden, wie z.B. eine Kontakt- oder Über uns-Seite. Die Voreinstellung erlauben es nicht bei einer <em>Seite</em> zukommentieren (ausser Admin) und wird nicht auf der Startseite veröffentlicht.</p></div></div></li>

<li id="menu-1895" class="menu-path-node-add-standort"><div class="m-outer" id="m-outer-"><div class="m-in-l" id="m-in-l-"></div><div class="m-in-r" id="m-in-r-"><a href="/de/node/add/standort" title="Standorte unserer Fahrzeuge">Standort</a> <p class="menucaption">Standorte unserer Fahrzeuge</p></div></div></li>
<li id="menu-256" class="menu-path-node-add-static"><div class="m-outer" id="m-outer-"><div class="m-in-l" id="m-in-l-"></div><div class="m-in-r" id="m-in-r-"><a href="/de/node/add/static" title="Statische Seite eben...">Statische Seite</a> <p class="menucaption">Statische Seite eben...</p></div></div></li>
<li id="menu-124" class="menu-path-node-add-poll"><div class="m-outer" id="m-outer-"><div class="m-in-l" id="m-in-l-"></div><div class="m-in-r" id="m-in-r-"><a href="/de/node/add/poll" title="Eine Umfrage ist eine Frage mit einer Reihe möglicher Antworten. Eine Umfrage zählt für jede Antwortmöglichkeit die abgegebenen Stimmen.">Umfrage</a> <p class="menucaption">Eine <em>Umfrage</em> ist eine Frage mit einer Reihe möglicher Antworten. Eine <em>Umfrage</em> zählt für jede Antwortmöglichkeit die abgegebenen Stimmen.</p></div></div></li>

<li id="menu-358" class="menu-path-node-add-uprofile"><div class="m-outer" id="m-outer-"><div class="m-in-l" id="m-in-l-"></div><div class="m-in-r" id="m-in-r-"><a href="/de/node/add/uprofile">Uprofile</a> <p class="menucaption"></p></div></div></li>
<li id="menu-3160" class="menu-path-node-add-user-gallery"><div class="m-outer" id="m-outer-"><div class="m-in-l" id="m-in-l-"></div><div class="m-in-r" id="m-in-r-"><a href="/de/node/add/user-gallery">User Gallery</a> <p class="menucaption"></p></div></div></li>
<li id="menu-2930" class="menu-path-node-add-webform"><div class="m-outer" id="m-outer-"><div class="m-in-l" id="m-in-l-"></div><div class="m-in-r" id="m-in-r-"><a href="/de/node/add/webform" title="Create a new form or questionnaire accessible to users. Submission results and statistics are recorded and accessible to privileged users.">Webform</a> <p class="menucaption">Create a new form or questionnaire accessible to users. Submission results and statistics are recorded and accessible to privileged users.</p></div></div></li>
</ul>
</li>
<li id="menu-4" class="menu-path-logout"><div class="m-outer" id="m-outer-"><div class="m-in-l" id="m-in-l-"></div><div class="m-in-r" id="m-in-r-"><a href="/de/logout" title="">Abmelden</a> <p class="menucaption"></p></div></div></li>
</ul>
</li>

</ul>
  </div>

Thanks a lot for helping!!!!!

ingopingo’s picture

ingopingo commented

Seems that my m-in-l div's have no id at all!?!?!

First I called them with

<div class="m-in-r" id="m-in-l-' . $lmid . '">'

Now I tried with

<div class="m-in-l" id="m-in-l-' . $menu_item['link']['mlid'] . '">

No luck either...

dnieweg’s picture

dnieweg commented

Yes, you have no menu id's so it would appear $mlid is not returning the menu ID.

Without really diving into this, I think you might want to take another look at Maluco Marinero's post. It seems he accomplished this by overriding D6 Nice Menu's theme_nice_menu_build.
(http://drupalcontrib.org/api/drupal/contributions--nice_menus--nice_menu...)

Note also that that function is deprecated and replaced by theme_nice_menus_build().

Maluco's post at http://drupal.org/node/460610#comment-1723406

Also note that # in CSS is used to select an object id and the . is used to select an object by class such as

<div id="myid" class="menu-123">

In css #myid would select this div as well as .menu-123 would do the same thing.

In my example I am using classes and ID's such as class="m-i-r" id="m-i-r-289" so that every item in the menu can be reached by CSS ... individually (using ID's) or by class to format many items at once exactly the same. An ID can only apply to a single object and therefore must be unique to each object, while a class can be applied to many objects.

ingopingo’s picture

ingopingo commented

There is one thing I simply don't understand.

When I inspect the menu with Devel Themer Info, I can see clearly that that the li id is contributed by mlid.

Within every single menu item one found mlid which holds the menu id.... and that's no surprise!

Otherwise the nice menu couldn't display the right menu item with the correct title and menucaption...

So why this doesn't work with the included div containers?

I really don't see another way to put the right id# in.... What the heck I have overlooked?

ingopingo’s picture

ingopingo commented

Oh my goodness..... It's always the same old story...

The source of errors is sitting in front of the monitor... and after a neverending search for the reason of the malfunction he would like to kick himself... grrrr

I wrote $lmid instead of $mlid. This way it couldn't work...

Now all is working fine.

ingopingo’s picture

ingopingo commented

To implement Dave's modifications of nice menu to Drupal 6 simply do the following:

1. Copy the entire theme_nice_menu_build function from the nice_menus.module in YOURTHEME.template and change the "theme_" part of the function name to "phptemplate_".

2. Take his (dnieweg) div calls and the code additions from Maluco Marinero and melt them into this file.

What you should get is the following:

function phptemplate_nice_menu_build($menu) {
  $output = '';

  foreach ($menu as $menu_item) {
    $mlid = $menu_item['link']['mlid'];
    // Check to see if it is a visible menu item.
    if ($menu_item['link']['hidden'] == 0) {
      // Build class name based on menu path
      // e.g. to give each menu item individual style.
      // Strip funny symbols.
      $clean_path = str_replace(array('http://', '<', '>', '&', '=', '?', ':'), '', $menu_item['link']['href']);
      // Convert slashes to dashes.
      $clean_path = str_replace('/', '-', $clean_path);
      $path_class = 'menu-path-'. $clean_path;
      // If it has children build a nice little tree under it.
      if ((!empty($menu_item['link']['has_children'])) && (!empty($menu_item['below']))) {
        // Keep passing children into the function 'til we get them all.
        $children = theme('nice_menu_build', $menu_item['below']);
        // Set the class to parent only of children are displayed.
        $parent_class = $children ? 'menuparent ' : '';
        $output .= '<li id="menu-'. $mlid .'" class="'. $parent_class . $path_class .'">'. '<div class="m-outer" id="m-outer-' . $mlid . '"><div class="m-in-l" id="m-in-l-' . $mlid . '"></div><div class="m-in-r" id="m-in-r-' . $mlid . '">' . theme('menu_item_link', $menu_item['link']) . ' ' ./* NEW */ '<p class="menucaption">' . $menu_item['link']['options']['attributes']['title'] . '</p>' . '</div></div>'; /* END NEW*/
        // Build the child UL only if children are displayed for the user.
        if ($children) {
          $output .= '<ul>';
          $output .= $children;
          $output .= "</ul>\n";
        }
        $output .= "</li>\n";
      }
      else {
        $output .= '<li id="menu-'. $mlid .'" class="'. $path_class .'">'. '<div class="m-outer" id="m-outer-' . $mlid . '"><div class="m-in-l" id="m-in-l-' . $mlid . '"></div><div class="m-in-r" id="m-in-r-' . $mlid . '">' . theme('menu_item_link', $menu_item['link']) . ' ' ./* NEW */ '<p class="menucaption">' . $menu_item['link']['options']['attributes']['title'] . '</p>' . '</div></div>' . '</li>' /* END NEW */."\n";
      }
    }
  }
  return $output;
}

And that's it so far. Dave's custom function that gets the description text from the menu item is dispensable and therefore doesn't needs to be changed, cause Maluco Marinero's code segment does the same.

The rest will be css...

Now I'll try to position the hole thing to the right place within the header of my modified ninesixtyrobots theme and will have a look if I could kick in some superfish code....

Thanks a million Dave for your help :-)