Building menus with images
The following example illustrates how to use images in a menu.
1. Create images
Create images to use as menu items. You can use any image editing application (for example Selteco Photo Lab):
In this example we use 3 images: home.gif, item1.gif and item2.gif
2. Create top menu in Menu Maker
- Launch Menu Maker and create blank menu
- Double-click "Home" item and use IMG tag:
<img src="home.gif" width=80 height=20 border=0>
- Add Item 1, Item 2 and some submenu items so your menu can look like this:
3. Adjust fixed menu options
- Choose "Menu" > "Fixed Menu" (make sure this option is checked)
- Choose "Menu" > "Fixed Menu Options"
- Set "Top Menu Height" to the height of your images
- Set "Top Menu Bar Width" to the total width of all images
(in this example 3 * 80 = 240 pixels)
4. Adjust base URL
- Choose "Menu" > "Select base URL"
- Type the path to your images (in this example images are in c:/images/ folder)
5. Preview and export
You should be able to test your menu now:
To export the menu:
- Choose "File" > "Export JavaScript file" command.
- Navigate to images folder (c:/images/ in this example) and type the file name of .js file. Click OK to export.
- In HTML Include dialog click "Copy" to copy HTML code to clipboard. Click OK to close the dialog.
- Create HTML page and paste HTML code
Download project files: s1036.zip
Comments?
|
Request Support