Document using images as menu items

There are a number of CSS tricks to move text out of the way so a clickable image is in its place but I've never needed to use any of those with Nice Menus. You can probably also use a theme function (like http://api.drupal.org/api/function/theme_menu_links/5 or something like it) to have the menu items be printed out as images rather than text if that is what you want, but again, I have no idea how it would look in nice menus and either way will require quite a bit of tinkering with the CSS since the default CSS isn't designed for that.

I should also note, cuz now I'm not sure of your question, that you can easily add background images to nice menus in the CSS that would display behind the text rather than moving it out of the way.

Closing old issues with no response.

Hi,

I have to reopen this issue, cus I have the same problems ro request. I had a look at the link you posted but don't really understand how to get images printed out instead of text. If you could help me with that it would be great!

Thanks!

well there is a possibility to do that, you have to put html code in the "title" and disable htmspecialchars in displayng menu items. im working on that, perhaps i'll try to force nice menu to use different fileds in table.. i need this feature very badly ;/

edit: well i succeded :D

after little modyfication of script (not sure if this is legal)
add new function to nice_menus module file

/**
 * Reverse htmlspecialchars
 *
 */
function modyfication_reverse_htmlspecialchars($string )
{
  $string = str_replace ( '&', '&', $string );
  $string = str_replace ( ''', '\'', $string );
  $string = str_replace ( '"', '"', $string );
  $string = str_replace ( '&lt;', '<', $string );
  $string = str_replace ( '&gt;', '>', $string );
  return $string;
}

and replace function theme_nice_menu with this one (I just modified output)

function theme_nice_menu($id, $pid, $direction = 'right', $menu = NULL) {
  $output = array();

  if ($menu_tree = theme('nice_menu_tree', $pid, $menu)) {
    if ($menu_tree['content']) {
      $output['content'] = '<ul class="nice-menu nice-menu-'. $direction .'" id="nice-menu-'. $id .'">'. $menu_tree['content'] .'</ul>'."\n";
      $output['subject'] = $menu_tree['subject'];
    }
  }
  return modyfication_reverse_htmlspecialchars($output);

}

now you can place html code in [menu settings -> title] and fully customize "nice menu" nodes. no javascript image preloading required. size of text is limited but with css formating i can fit nearly anything. unfortunatly it spoils breadcrumbs -> it can be fixed with "taxonomy breadcrumb" plugin

example: http://wellness-olawa.pl/

cheers :D

Just a note that you shouldn't hack the module directly. Since this is happening in a theme function you should create your custom function (either in a custom module or template.php) and override theme_nice_menus in your template.php to make your changes. Other than that it looks like a workable way to do this assuming you feel comfortable with who has access to creating menu items (for security reasons.)

I'll move this issue to a docs task so that this and potentially other methods can get added to the handbook.

What about just an integration between nicemenu and imagemenu ?

There are a number of things documented in the handbook now and most image replacement has to do with regular HTML/CSS and not NM, so i'll just close this one out.

I'm running into the same issue.

I thought I would try and place an image in the background by using the menu id number (if you go into the source, everyone has one)

That worked fine, except you still had the text on top. So, I tried going back in and designating that the link in that menu had a 0 opacity.

It made the top text go away, but it also made all the text on the drop down menu disappear as well. All the bottom items are tied to that top menu item.

If I go in and designate all of the individual items on the drop down as having an opacity of 100, they will appear - but it's kind of laborous. Any suggestions on making the 0 opacity ONLY affect the menu item? (I tried a number of different versions, using "menuparent menu-path-node-4" - so maybe it would only hit that link, but nothing ever worked right.

Any suggestions?

I'm not sure I understand you right, but to make the text "disappear" you can simply use the CSS property text-indent: -999em; .
If you are having trouble with CSS selectors, you should give more details, at least the version of Nice Menus you are using (this is an issue opened for 5.x-1.x , but are you really using this version ?). Nice Menus for Drupal 6 uses id selectors for each menu list item (don't know about version 5).

@#12

If you are still having the issue post your current CSS and I will try to help you out, you should be able to specify a value for the top level unordered list and then just specify a value for nested lists

it might look as such

#primary-menu ul li {
opacity:0%;
}
#primary-menu ul li ul li {
opacity:100%;
}