How to use images for the first menu level

If you want to create a CSS menu in your site and use images for the first level menu items, this is what you have to do:

1. Make a final decision about your menu structure, at least regarding the first level. Say there will be three items on the first level, and their "label" (included in the image) will be:

2. • Home

   • Products

   • About

2. Remember that each menu items can be in one of the three possible states:

3. • Normal - when it is not mouse-hovered, nor selected.

   • Hovered - when the mouse cursor hovers it.

   • Selected - when it is selected.

3. What you have to do first is to create three images (one for each item) that will be displayed when the items are in the normal state. Be careful what you name these images: for a static menu, the image name for the normal state can be anything; but for a dynamic menu, it has to coincide with the item label (stored in the database). So to cover both menu types, in the example below you will name the images just like the item labels.
   To better understand what it means that the menu item label is included in the image (and that you are not using text, but images for the first level), and to see an example for naming the images for the normal state, see below:
                   

4. • - Home.png
                     

   • - Products.png
                     

   • - About.png
                     

4. Next you have to provide another set of images (three more) for the hovered state. Make sure that you name them starting from the normal state name, and having the same pattern (_hover in the example below):
                  

5. • - Home_hover.png
                            

   • - Products_hover.png
                            

   • - About_hover.png
                            

5. The last set of images that you must provide is the one corresponding to the selected state. Once again, make sure that you name them starting from the normal state name, and having the same pattern (_select in the example below):
                 

6. • - Home_select.png
                           

   • - Products_select.png
                           

   • - About_select.png
                           

6. When the three sets (one for each possible state) of images are created, you can generate a CSS menu in your site using images for the first level:

7. • Put the needed images in a folder, and copy the folder in your site structure.

   • Apply one of the MX CSS Menus components that help you generate menus (CSS Menu Wizard, Database-driven CSS Menu Wizard, Database-driven CSS Menu server behavior), and configure its user interface as instructed in the user manual.

Basically, what you need to do before generating a CSS menu with images for the first level is to create three sets of images, one for each possible state: normal, hovered, selected. Each set must have a number of images equal to the number of first level menu items. It is compulsory to name the image files according to the patterns exemplified above.

If you want to try building a menu with images on the first level, you can use the nine images above, that are provided in the \tutorials\Images for first level folder in the package. Click here to see (in browser) a menu using these images.