DHTML menu & Javascript menu creator - Powerful web menu solutions

The first step is to create the menu in our image editor. You can use a bitmap or vector design application for this purpose as long as you are able to export slices as PNG, GIF or JPG files.

In this example, we will show the development of our Windows Vista menu:

 

 

All item text and foreground images (like small program icons at the left of the submenu items) have nothing to do with theme creation since they will be added later (in AllWebMenus).

So, lets clean up the image:

 

 

What we need is to create all possible distinct instances for the Normal, Mouse Over and Mouse Click item states.

In our example we have applied Normal and Mouse Over states.

Moreover, as seen in the image below, in the above example we have created the the following elements:

 

 

1. Left edge (or Header) for the Main Menu Group

2. Right edge (or Footer) for the Main Menu Group

3. Background for the Main Group Item (Normal State)

4. Background for the Main Group Item (Mouse Over State)

5. Background for the Sub Group Item (Normal State)

6. Background for the Sub Group Item (Mouse Over State)

7. Separator Image for the Sub Group

Note: Arrows displayed with a green border will be used as "Has Submenu" Images (which imply the presence of a submenu in specific items).

 

Images (1), (2), (7) and arrows should be exported in a single state since they will appear when the menu is loaded and no mouse event is effective upon them.

These Images are:

 

main-header.jpg

Usage: Main Group Style -> Has Header -> Foreground Image (copied in ALL mouse states)

 

main-footer.jpg

Usage: Main Group Style -> Has Footer -> Foreground Image (copied in ALL mouse states)

 

separator.jpg

Usage: Create "dummy" item AFTER the item where the separator should be visible BELOW it. Add the image as "Foreground Image" and copy in ALL mouse states. Content Padding must be set to zero values.

 

indicator.png

Usage: Main Items Style -> "Has Submenu" Image (copied in ALL mouse states)

 

hassubmenu.gif

Usage: Sub Items Style -> "Has Submenu" Image (copied in ALL mouse states)

Note: The Indicator image is exported as a 32bit PNG file because its shape should be smooth and anti-alias will make its shadow blend with the item background. PNG is the only file format where such an effect can be achieved. Simple, flat color images should be saved as GIF to keep file size small while gradients require a compressed JPEG format.

 

Images (3), (4), (5) and (6) require more attention.

If you check the "Windows Vista" menu example, you will notice that when you hover a main group item, the background gradient switches to a more complicated "buttonish" shape with a thin border around the text.

We want to make ALL item backgrounds to have a FLEXIBLE width in order to accommodate text of any length.

For the Normal State, we only need a Tile image, sliced in such a way that it will give AllWebMenus the ability to strech it across the full item width (which is the default behavior for images used in Background Tile property):

 

main-button-tile.jpg

Usage: Main Items Style -> Background Tile Image (Normal State Only)

 

On Mouse Over, the background of the item will be assembed by 3 different images:

 

main-buttonOver-left.jpg

Usage: Main Items Style -> Background Image 1 (Mouse Over and Mouse Click states only)

 

main-buttonOver-right.jpg

Usage:Main Items Style -> Background Image 2 (Mouse Over and Mouse Click states only)

 

main-buttonOver-tile.jpg

Usage: Main Items Style -> Background Tile Image (Mouse Over and Mouse Click states only)

 

The above concept is aslo applied to Submenus, however in the Normal State a set of 3 images should used as well:

 

sub-button-left.jpg

Usage: Sub Items Style -> Background Image 1 (Normal State Only). This image is large enough for a small foreground icon to be inserted when needed.

 

sub-button-tile.jpg

Usage: Sub Items Style -> Background Tile Image (Normal State Only)

 

sub-button-right.jpg

Usage: Sub Items Style -> Background Image 2 (Normal State Only)

 

sub-buttonOver-left.jpg

Usage: Sub Items Style -> Background Image 1 (Mouse Over and Mouse Click states only). This image is large enough for a small foreground icon to be inserted when needed.

 

sub-buttonOver-tile.jpg

Usage: Sub Items Style -> Background Tile Image (Mouse Over and Mouse Click states only)

 

sub-buttonOver-right.jpg

Usage: Sub Items Style -> Background Image 2 (Mouse Over and Mouse Click states only)

Note: Sub Items Style images have a 1px border for demo purposes only. Actual files are borderless for the item background to be displayed correctly.

 

When the menu is ready, you can use the command Theme --> Save Custom Theme, to save the menu as a new theme:

 

 

Note that ONLY values, set in the Style Editor, can be embeded into a theme. That means the "separator" items will not be saved since they are inserted in random places.

You will have to choose a unique name for the new theme under which it will be stored in the Theme Gallery: