DropDown Menu: Image Links
Menu Demo with Image Links
Calling the Script
This menu uses the following call to the DropDown Menu script:
buildMenu("h","tb","0","5");
The options used here tell the script to render the following menu:
- "h" = horizontal main menu
- "i" = image links for the main menu, with bullets
- "}" = a list indicator defined with the right curley bracket (}) which is also the default
- "6" = select main menu item six for highlighting
Defining the Links
Using images for the main navigation is not that difficult. However, a few things must be completed before they will work. First, you will need the images. Only one set is necessary, but if you expect to use the highlight feature will need to make a second highlighted set.
Next you need to define your images in the menu data file. Lets say you will be using two main menu items with highlighting, this means you will need 4 images. Here is an example:
-
Let's say we will use two menu items named: Customer and Business. Four images are made and named: customer-0.gif, customer-2.gif, business-0.gif, and business-2.gif.
The -0.gif indicates the default image and the -2.gif indicates the selected image. The naming must be done in this manner for the images to work properly, otherwise you will need to modify the script itself.
-
For the coding of the menu data file you will need to add three variables for each menu item. These are the image name (pic_#), plus its width (wth_#) and height (hgt_#) in pixels. For this example the following variables are defined:
var imgs = "images/";
td_1 = "Customer"; url_1 = "customer.php";
pic_1 = "customer"; wth_1 = "80"; hgt_1 = "24";
td_2 = "Business"; url_2 = "business.php";
pic_2 = "business"; wth_2 = "80"; hgt_2 = "24";
This makes a total of five values required for each item in the main menu with a link, four values if there is no link. You also need to define the 'imgs' variable with the location of the images so that the browser can locate these images on your server.
