Does anyone have experience with images in menu's?

By Danny_Joris on 13 May 2009 at 00:03 UTC

Hi, does anyone have experience with images in menu's? It sounds like a very basic need, though i'm biting this case for a whole day already. Changing a link name to an image already worked out, thanks to this input: http://drupal.org/node/110199#comment-1220140 .

I managed to fix an onMouseOver and onMouseOut to change the image. Though the change of images is not really fast cause its done with javascript, so the effect is not perfect yet.

The only thing i'm missing now is a way to show an image when a certain page is active. To keep the mouseover-image active when that certain page is open.

Is there a module for this? I searched and didn't find one. I can't believe that such a basic need in webdesign is such a hassle in Drupal. I've been learning Drupal for 6 months now full-time and i'm building my first full drupal website right now (for free). I'm actually doubting if it is all worth it if small details like this cost days for me to solve.

Anyway, thanks for reading. Any help is highly apreciated.

Danny

Comments

Inline images as menu items

dnewkerk commented 13 May 2009 at 00:21

Inline images as menu items is not best practice. You should use CSS background images instead, and if possible use real text still above that (or if not, use a CSS image replacement technique). This will also make it easy for you to make different image states for hover and active conditions. Inline images for this purpose are not recommended because they are: semantically incorrect, require JS for rollovers instead of the modern/correct way to do rollovers using CSS, not accessible for disabled users, not accessible for search engines.

One of these modules might be of assistance if you don't know how to do it with just the default classes for CSS on your own:
http://drupal.org/project/menu_icons
http://drupal.org/project/menuclass

Not recommended for the reasons I mentioned, but http://drupal.org/project/imagemenu if you really want inline images.

Hey Keyz, thanks for the

Danny_Joris commented 13 May 2009 at 09:11

Hey Keyz, thanks for the advice. I installed menuclass and i managed to add a class to a menu link. I have a small problem though. Now i have this tag in my menu:

<a class="about" title="" href="/drupal/about">about</a>

...which is good, but how do i remove the text 'about' from that? In the menu options it is required to have a title. Plus as long as there is that in there i cant modify the about-class with css.

CSS Image Replacement

dnewkerk commented 13 May 2009 at 09:25

Hi Danny -

That's where you use the technique I linked to, CSS Image Replacement. Something like this:

/* Default settings for all the menu links */
ul.menu li a {
  display: block;
  width: 100px;
  height: 20px;
  text-indent: -9999px;
  overflow: hidden;
}

/* The rest inherit the above, we just add the correct background */
ul.menu li a.about {
  background: url(images/menu.jpg) no-repeat 0 0;
}

ul.menu li a.about:hover {
  background-position: 0 -20px;
}

I'd also suggest making this even better by making full use of CSS Sprites for the menu image, instead of a separate one for each item. This will improve performance for your site and your server.

Keyz, you are awesome !

Danny_Joris commented 13 May 2009 at 11:07

Keyz, you are awesome ! Thanks for your help. It it all works now. I fixed it with menuclass and your css code.

You saved my day. Thanks!

_

Danny_Joris commented 11 August 2009 at 17:43

I love menuclass, but I prefer Menu Attributes now. Much better..

I 1000% agree. Menu

allenshorter commented 24 August 2010 at 01:42

I 1000% agree. Menu Attributes was very easy to set up and VERY powerful. Love that I can set the target with it.

Thanks for all the knowledge on this thread.

An issue with this approach

avolve commented 15 July 2009 at 07:41

An issue with this approach is that it moves the link text so that it no longer functions as a link.

avolve designs | ethical by design

That's the point actually for

dnewkerk commented 15 July 2009 at 08:13

That's the point actually for this technique. The text is meant to remain in existence for disabled users and for search engines, while regular visitors read and click on the image. If you do want to keep the text and simply position it over a background image, that works too... just don't use text-indent. If you do that, you will want to be sure that you apply any dimensions or padding directly to the anchor tag itself (e.g. not to a wrapping div or other element), so that the whole area surrounding the text is clickable (if that is your intent).

It seems I was not clear (and

avolve commented 16 July 2009 at 01:19

It seems I was not clear (and had an error in my CSS).

I had implemented this for a menu item (devel site) and the image was not acting as a link — I had the CSS set for the wrapping element and not the link.

thx
c.

avolve designs | ethical by design