Cutting images

When starting to customize the menu to integrate it in your site design, you must first take some time and think how will it look, and then create the menu, as you see it, in an image. This image will have to contain examples of the three (maximum, but you can have less) levels, with menu elements in all three states:

• normal - the way the menu elements look like when not used
• selected - how will the menu element look, when it has been selected, and the page it points to displayed
• over - how will the element's look change when the mouse is held above it.

You can see these states reflected in the default images in the img folder, that also carry significant names:

• bgtop_h, for the normal state, the top-level
• bgtop_h_sel, for the selected state, also the top-level
• bgtop_h_over, for the over state.
• the images for the other levels use a similar notation, but without the "top" part: bg_h, bg_h_sel and bg_h_over.

You will have to show these three states for all menu levels you plan on using. For what concerns the customizations in this tutorial, the following image will be used as a source:

In this image you can clearly see the three levels and their associated states:

• for normal, we have the gray gradient, as on the first element of the top-level menu
• for selected, it turns to white, as on the last element of the first line
• for the over state, it changes to a blue gradient.

As you can already guess, there are three images for the first level already, which will have to replace the default ones in the img folder.

Aside these regular images, you might have already notices the edges of the top-level: they're rounded, and might pose a problem, as the default skin did not have any special images to display them.

This last problem must be analyzed before starting to cut the images, as it will need a little touch of CSS tehnique to use: shifting images.

First off, why do we need to use such a technique instead of just throwing the images on the page? Well, primarily because there aren't images that act like that in the original skin, and second, because MX CSS Dynamic Menus uses div, ul and li tags to construct the menu, and adding an empty element with a background image would cause problems.

Second, how to do it? Well, because the images are used as background images, and because we're using CSS, we can use the background-position CSS property. With it, you can set the background image's position, on the x and y axis. If the value for an axis is positive, it will be moved in the positive sense of the axis. For the horizontal axis, the one that interest us, you can move it to the right by using a positive value, and to the left, by using a negative value.

The conclusion is simple: it can be done, and in an easy manner too. Thus, the image to create should contain the left rounded edge, the center, where the menu text will appear, and the right rounded edge too. The trick we're going to use through the shifting technique is to hide the edges for the menu blocks that do not need them.

But first, you'll have to create the images. To do so, follow the next steps:

1. Open the main image, containing all the states in your favourite photo editing software
2. Cut from the top-level portion a section containing the left rounded edge and the first menu block, as in the following image:
   
   
                                  
3. Next cut the right rounded edge and place it at the right of the image. Alternatively, you could use the left edge and flip it horizontally. Delete the original text by copying a block of the plain gradient and pasting it several times on top of the text, so that it will be completely covered. Measure and remember the edge's size:9px, as it will come in handy in the future. The result should look like:
   
   
                         
4. This is the menu block that we'll use through the top-level menu.
5. Resize the image until it reaches the desired width and height for the top-level menu; the images used in the tutorial have 130 px width and 30 px height.
6. Save this image in the skin folder, under the bgtop_h.gif name. you can use any web-compliant format for your images, but you'll have to change them in the menus.css file afterwards, if the type is not the same as the original skin.

For the selected and over images, you just have to replace the center portion with the white, and gradient-blue ones. Then just save them as bgtop_h_sel.gif, and bgtop_h_over.gif. You should now have three images that look like the following:

For the second and third level menus it is much simpler to cut the images, as it only takes three steps:

1. In the original image, cut one entire menu element of second level, for the normal, selected and over states
2. Resize the three images until they reach the desired width and height; the images used in this tutorial have 170px width and 21px height.
3. Save them in the skin's images folder with the bg.gif, bg_sel.gif and bg_over.gif names.

The resulting images should look like the following:

If you try and apply the skin to one of your menus in this state, you will notice that the new images are used, but appear with both edges all the time. Also, the behavior when trying to use the menu is not the one intended. For a simple menu structure, the menu looks like the following:

Not at all what we're trying to get to. The next section of the tutorial shows how to tweak the css file so that the menu will look and feel as intended.