By rwfaught on

How do I do image replacement with Drupal menus? I'm creating a one-use theme and have a custom navigation menu. I don't know where to find the hooks for each individual menu item of my custom menu.

I can add a background image to all links in the menu and style the :hover and :active links to move the BG up to display a different background... and bear with me...I'm new to Drupal and PHP but I know what I'm trying to do: move the text of the link out of the way so that it is not displayed and use the BG image for each link instead. I want to use a different BG for each menu item obviously, I just don't know how to hook to each individual link. Can't figure it out... anyone done this before?

Thanks!

Comments

jmarkantes’s picture

jmarkantes commented

You could possibly use the nice-menu module and CSS to do that. There are individual div's for each menu option. Then you can define each div with it's own style.

Alternatively, you could override the menu theme function. Output an incrementing div id for each li element. Something like 'menu-1', 'menu-2', etc. Check out the handbook pages for info, and then just dive into experimenting.

Jason

rwfaught’s picture

rwfaught commented

...wow, quick response. Thanks for the ideas...can't talk, experimenting. =)

Let ya know if I find anything that works.

rwfaught’s picture

rwfaught commented

I looked at Nice Menus, but was turned off by the "THIS IS NOT READY FOR PRODUCTION USE!" disclaimer since I'm using 5.1

My navbar menu is set as my "primary links". I have looked at page.tpl.php and I can see where primary links are generated. Again, I'm winging this and I'm fairly sure that I have no idea what I'm doing...in general at this point. But I'm guessing that if I can figure out how primary_links are generated I can hook to individual links in CSS, and get a different background image for each link.

A very large Danish Kringle via UPS Overnight. Not only edible, but very good (trust me, I didn't think that was possible either) to the first perfect answer within 48 hours. If you're not comfortable with that, you'll get "Thank you." And, I'll mean it.

rwfaught’s picture

rwfaught commented

Placing the following code in the template.php file for your theme (change "yourthemename_menu_links" of course) gets you a unique ID for each menu item in 5.1: 

function yourthemename_menu_links($links) {
  if (!count($links)) {
    return '';
  }
  $level_tmp = explode('-', key($links));
  $level = $level_tmp[0];
  
  $output = "<ul class=\"links-$level\">\n";
  foreach ($links as $index => $link) {
    $output .= '<li id="'.$link['title'].'"';
    if (stristr($index, 'active')) {
      $output .= ' class="active"';
    }
	$output .= ">". l($link['title'], $link['href'], $link['attributes'], $link['query'], $link['fragment']) ."</li>\n";
  }
  $output .= '</ul>';

  return $output;
}
xano’s picture

xano
he/they
Primary language English
Location Southampton
commented

It's wiser not to use ID's but to use (an abbreviation of) the link's text instead. Numbers can change when an item is added or deleted and in that case you'll have to edit the CSS for all your items. When using the link's text you firstly get a better idea of the code when looking at the CSS (you'll know which link #menu-archives styles more easily than when using #menu-5) and secondly you'll only have to edit one line of CSS code when adding or removing menu items.

rwfaught’s picture

rwfaught commented

...in the above code the ID generated is based on the title. If you have a menu link of which the title is "news" the link would be generated with an ID of "news". If necessary you could change the code slightly so that all links are generated with a "menu-item-" prefix to avoid duplicate IDs.

xano’s picture

xano
he/they
Primary language English
Location Southampton
commented

Should have taken a look at the code after all... :-P