Drop Down Generator

Drop Down Menu 1 | Drop Down Menu 2 | Pull Down Menu (Popup) | Drop Down Generator | webGFX Nav-O-Mat

Drop Down Generator

Description:

Thanks to fellow Trellixer, Curtis Gilbert, for providing a drop down menu generator on his site. It's fairly easy to use. You select a title, background colors, fonts as well as entering a list of web sites or pages to link to.

I address on this page some specifics that may not be intuitive for implementing this drop down menu onto your Trellix page, such as:

When entering the URLs for your links in the code generator, be sure to include http:// if the URL is external to your own web site.

When inserting the generated code into the BYOWG, be sure to modify all references to the image files to include ^GEMDIR/

Insert the generated images into the BYOWG using the 'Files for this gem..' option

Note: you should have both your browser and Trellix Web open simultaneously.

How to use:

1. Go to Curtis's web site and create your drop down menu.

http://www.cmg02.com/webmasters.htm

If the link you are adding is to another page on your own web site, simply type in the name of the page, like 'id25.htm', But, if the link is to an external web site, enter the full URL, including the http:// prefix.

2. Once you've created your drop down menu, you will be displayed a page with the HTML script and graphic images you will need.

3. Right click on each of the graphic images, and click 'Save picture as' to save them to your PC. Here are the four files I had to save:

4. Then go to Trellix Web to the page you wish to insert your drop down box, and insert a 'Build your own web gem' (BYOWG). Copy and paste the generated HTML code into the BYOWG.

5. Now we must modify the HTML code provided. Locate each place in the code that reference the various .png and .gif files that you just downloaded, and insert ^GEMDIR/ immediately before the name of each of those files.

6. Before closing the BYOWG, click on the 'Files for this gem' button, and select to add the 4 image files you previously saved in step 3 above.

7. Publish and enjoy!

Example:

Download the code

right click on link, then click on 'Save target (or frame) as'

n/a

Other information:

BTW, you may wish to compare the code generated with this code generator with the code I provide in Drop Down Menu 1&2!

Source code:

Note: the code that is bold faced will need to be modified by inserting ^GEMDIR/

just after the opening double quotes. For example:

background="boxtopA.png"

should be modified to look like this:

background="^GEMDIR/boxtopA.png"

<!--

.combobox {

background-color: #FFFFFF;

color: #808080;

font-size: 10pt;

font-family: arial;

font-weight: bold;

}

-->

</style>

<form>

</table>

</td><td width="98%" background="boxbackB.png">

<option selected>Click on a link </option>

<option value="http://cafe.trellix.com">Trellix Cafe</option><option value="http://www.swgalleries.com">SWGalleries</option><option value="tutorials.htm">KW 's Tutorials</option><option value="http://www.bravenet.com">Bravenet</option>

</select>

</td></tr>

</table>

</td></tr>

</table>

</form>

Here's another link to the same code generator:

http://www.guistuff.com/tools/sitemapgen/mappera1.htm