(Note: Drop down menus are a graphical list of links that shows up when you roll your mouse over text (or an image). Look at the top of www.invisiblegold.com for an example.)
The only question is how to create them. Unlike other website features, it's not obvious.
|Step 1 - Start with a Design with a "menu" graphic.|
|Step 2 - Copy Files Into Framework Folder|
|Step 3 - Edit Your Default.htm file|
|Step 4 - Create Drop Down Menu Anchor Image|
The next step is to calculate the pixels at which the drop down menus should start and end (perhaps using "the info" window in Photoshop)(0,0 is in the top left corner on the screen: x is the horizontal axis and y is the vertical). The four values you need for each drop fown location are left x, top y, right x, bottom y. For example: 100, 2, 175, 22. This defines a box that is 75 pixels wide and 20 pixels tall. Notice that the higher y point is a lower number. It might work the other way around, but this is common in computer graphics.
|Step 5 - Insert GetHTML Call To Generate Menus|
The last step is to paste and customize the gethtml code. The GetHTML will generate text for each link. The name for each drop down must match the image map code.
It also needs to know where to place the menu relative to the image's position on the screen. To do this I usually just use the same "left" point and add a pixel or two to the bottom of the image map. For example, the first drop down menu will look like the example below. Make sure you have one for each menu on the list.
This is where you set the color for the drop down menus. You also have to choose what "id" you are pulling the list of pages from.
|Step 6 - Create the Custom Template|
|Update - The old code stopped working on FireFox 4.0+|
The old menu.js file stopped working. Do two things to fix it:
1) add style="position:relative;" to the table that surrounds the menumap image.
2) replace menu.js (in the framework's folder) with this text:
|Online Documentation Home, Advanced: Using Drop Down Menus With Calendars, New CSS Menus, Overview, Directory Structure, Frameworks, Custom Templates, Web Designer Tip: Customize the Page Title, Creating Drop Down Menus, GetHTML Tags|
| Authoring, Frameworks|