I just finished up the preliminary work on a new site where the client wanted drop down menus and fancy image links for the top-level menu items. The requirements were to use the Drupal menu system to maintain permissions on the links, but also use stylized images for the main menu links. It took a bit of searching, but the solution was pretty elegant thanks to the Drupal community.
The drop downs were easy. I used the Nice Menus module for the first time and immediately fell in love with it. It provides up to 99 blocks to which you can assign Drupal menus. The menus can drop down or fly out, depending upon your design. Plus, you can stylize them to your hearts content to match your theme. So, the only real problem was how to use images for the top level menu.
There are apparently a few ways to solve this problem. My first attempt was to just use CSS to size the menu items, hide the menu text and place a background image for the element. This seemed to be the least obtrusive method for Drupal, but flaws emerged with compatibility and accessibility. Firefox seems to like color: transparent; but IE does not. They both seem to like text-indent: -1000px; but with either of these solutions the links completely disappear when you turn images off :(
Luckily, I stumbled upon this comment which details the use of theme_menu_item_link() to swap the menu title field with the description field and allow it to use HTML for display. After implementing the function in your template.php file, you can type your HTML img tag into the description field, and your hover text into the title field when creating a menu item.
Now, you have an accessibility friendly menu which uses Drupal permissions, image tags with alt text and an anchor tag with title text. You just have to do a little bit more CSS cleanup to get the drop downs to match your theme and you are golden!
Many thanks to the Drupal community on this one!!
Hover image?
Hi Kevin,
Thanks for such a helpful post. Were you able to get this to work with a hover image as well? I've tried many approaches in the css, to no avail.
Any guidance is much appreciated!
Perfect solution to my issue, thank you!
FYI, relative image paths don't work, must be absolute. Which is a pain for development, but still works.
Added to
Added to http://www.Drupalsightings.com
A little additional markup can get you a long way
One of the designers that I work with has a great little trick where you add an empty
<strong>tag inside each menu item (at the template level), and then use CSS to have that tag be on top of the menu item, hiding it with a background image. It requires a theme override in template.php, but it works in every browser and has no accessibility issues.Module patch
There wouldn't happen to be a way to submit this as a patch to Nice Menus would there? I try to avoid editing template.php files where possible.
Hmm
That would be a pretty handy option! It would be cool to have an admin option to swap title/description if selected. If I have time I might take a look at their code and see if there is an easy way to do it.
Post new comment