By higgins on

During redesigning our website with drupal 5.1 I suffered a setback: I tried to replace the primary links (menu) with css classed images. Well, since I'm used to this procedure, it took me just a short time to figure out the well structured css. No probs at all - used Gimp/Photoshop to draw my desired "3D-menu-pills".
But, I couldn't find out how I'd get rid of the bothering menu titles. So I started Google to "find out" how it works. After a while I realized that there're no articles at all 'bout that topic!

I tried to customize the menu.inc-file since I knew it should be in there somewhere! All I found is a clumsy workaround. I'll like to know if someone knows a better way?

Here's my corrected menu.inc-snippet:

around line 714 you'll find the function menu_item_link(...). There's an

if ($theme) {
    $link = theme('menu_item_link', $item, $link_item);
  } else {
    $link = array(
      'title' => $item['title'],
      'href' => $link_item['path'], 
      ... etc.

Correct the line that parses the title, like

   ...
   'title' => '',
   ...

I found it very useful, thought I sould share this with you. Hope that saves you precious time...
Cheers, Higgins

⋅ Categories: Drupal 5.x

Comments

wmostrey’s picture

wmostrey commented

It is advised against to edit core files, like menu.inc for instance. There are some ways to do this correctly. One could be to give each menu item a unique id and use css to replace the text with an image:

http://www.nicklewis.org/node/843

You could also create a phptemplate_menu_item_link() which checks if the first few letters of the $title are "

higgins’s picture

higgins commented

thanx for your reply - the link was very useful, the tutorial great! The only thing is, that it doesn't work for my primary links - I followed the tut precisely but I still find the primary links over the image of my menu. Yes, I could force font-size:0 in css but IE will still show the links!

I have to comment the "title"-line in menu.inc (as I wrote in my first posting) in order to hide the menu titles!

That's not the best solution - anybody out there who has a different idea?
Cheers, higgins

____________________
www.medani.at

wmostrey’s picture

wmostrey commented

Set the field id to display:none to not show it, does that help?

higgins’s picture

higgins commented

sure that'd help - but then I can't see the background image anymore

____________________
www.medani.at

nirl’s picture

nirl commented

try to use padding to "push" your text down.
assuming your image size is 100x100 px you can do something like this:

//This works for IE
overflow:hidden;width:100px;height:100px;padding-top:100px;background-image:url(...)

//This works for FIreFox
overflow:hidden;width:100px;height:1px;padding-top:100px;background-image:url(...)

//Don't know on how to do this for both

this is also very SEO and accessible...