Does anyone have experience with images in menu's?
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
Inline images as menu items
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.
-- David
davidnewkerk.com | absolutecross.com
View my Drupal lessons & guides
Hey Keyz, thanks for the
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
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.
-- David
davidnewkerk.com | absolutecross.com
View my Drupal lessons & guides
Keyz, you are awesome !
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!
_
I love menuclass, but I prefer Menu Attributes now. Much better..
An issue with this approach
An issue with this approach is that it moves the link text so that it no longer functions as a link.
That's the point actually for
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).
-- David
davidnewkerk.com | absolutecross.com
View my Drupal lessons & guides
It seems I was not clear (and
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.