How to create an image menu in Drupal
Saturday, October 31, 2009 - 09:50
One of my biggest challenges when I started using Drupal was how to create a menu that used images. I created a support issue at drupal.org, either my english sux or maybe the solution was to obvious. This tutorial is using the same method as the apple menu. It uses one image and background-positioning. You can create very nice menus using this method, the only problem is if you want to remove or add a menu item, most likely you have to edit the menu-image.
1. This is how the image menu looks like.
2. This is how the menu looks like on the site I've created.
3. The clue is background-positioning. Knowing and telling by css the height and width of the menu. Width: As you can see from the green arrow you have to tell the menu the distance from where it starts on the left side and where the next item appears. In my case 96px. Height: The yellow arrow show where you should start counting pixels and where to stop. From the bottom of the image to the top of the red line. In my case 21px.
4. This is how the css code looks like. In Drupal all menu-item get a unique number. You find this number by editing primary links and hold the mouse over the edit button, a link will appear in you browser status bar. As you can see the first menu item .menu-196 is set to 0. This item gets its positioning from the #primary-links li and the next item is -96px to the left. The menu.png gets pulled to the left. Since it's 96p wide you have to increase all the menu items with 96px.
5. The hover code. The background-positioning is the same as #4.
6. Depending on you're theme and what you call you're div's and classes in css. This is the code I'm using to show the menu on http://www.macbox.no.
Twitter actions
- on my way back from Stavanger, great meeting, hope they select #drupal — 1 hour 23 min ago
Add comment