By sjosh36 on

I have a client that would like to have an image style navigation like: http://www.westlakepowerwashing.com/

I have been experimenting with menu_icons, but I can not it get to do what I need.

Any help with this would be greatly appreciated!

Josh

⋅ Categories: Drupal 7.x

Comments

Diane Bryan’s picture

Diane Bryan commented

Hi Josh,

You've got several things going on with that menu. First, yes, there is a graphical background to each menu button, next, it changes color on hover, next, you have mega menus for each drop-down.

To achieve the first, you want to consult a CSS guide on background images for a menu. And you want the menu to change color in certain conditions... build all that into a single background image whose position changes depending on the state of the link. i.e. blue is the top half and red is the bottom half. Only show blue when the link is at rest, and show red on hover or when it's active. Here's a tutorial for that:
http://inobscuro.com/tutorials/image-rollover-menu-19/ (I am not related in any way to the person who wrote this tutorial--I just found it when I searched.)

Next, you want a mega menu, or maxi menu. You can achieve this several ways in Drupal. I recently had success with Om Maximenu, but other people use menu block or mega menus or menu-mini-panels. You have to play around with it on a local installation to get the hang of it, but really there are some great options, and you can probably find tutorials for each on YouTube.

Last note.. .the menu you used as an example has small "end cap" images on either end. If you're not good in Photoshop, you might want to use a tool, such as http://css3menu.com/ (I am not related in any way to the people who make this tool--I just found it when I searched.)

Good luck!
D

sjosh36’s picture

sjosh36 commented

I was able to find a Module called imagemenu ported for D7 that seems to be doing the trick. I am able to make each image with Photoshop, the module replaces the text with the image.

I do have one more question, how can I modify the navigation to show 3 columns wide instead of a single column?

Thanks Diane, appreciate your help.