Site Maintainance and Help : Pull Down Menus
Pull Down Menus How to create and update the menus along the top of the site
Remember to back up any files BEFORE you make any changes.
Introduction

Before proceeding please be aware that the pull down menus only work correctly in Internet Explorer, only the actual menu titles are displayed using Netscape 6.

The pull down menus that you see along the top of this site are created from 2 files, toolbars.js and toolbardetails.js, both located in the /bin directory. The main file behind the actual creation of the menus is toolbars.js whilst toolbardetails.js holds all the text and links that need to be displayed.

For creating and updating these pull down menus you only need to look at toolbardetails.js.

Opening the file in Front Page will reveal nothing in the Normal view so switch to the HTML view by selecting the HTML tab at the bottom of the screen to see the code. You'll see that the code is neatly divided into a number of chunks which relates directly to the number of pull down menus present on the site.

Note : - the following code example is an example only, the actual contents of toolbardetails.js will be different to the example used.

Creating a pull down menu

Each line of code in toolbardetails.js is built in the following fashion - Action("Menu Number", "Text displayed", "Link"); with the exception of the code to add a horizontal divider.

Each pull down menu is constructed as follows :-

addTopMenu("idOption1", "Menu List 1 ", "#");

Creates the pull down menu's title, in this case Menu List 1. Each pull down menu must have an idOption number to determine the order in which they are displayed. To link this title to another page replace the # with the link to the page. This is the only part of the pull down menus that can be seen using Netscape 6.

addTopSubMenu("idOption1", "List 1, option 1", "link1.shtml");

This line adds a submenu entry under this pull down menu titled List 1, option 1 with a link to link1.shtml. Each submenu entry must have an idOption number to link it to the correct pull down menu.

addTopSubMenu("idOption1", "List 1, option 2", "link2.shtml");
addTopSubMenu("idOption1", "List 1, option 3", "link3.shtml");

These lines add more submenu entries under the same pull down menu.

addSeperator("idOption1");

This adds a horizontal divider to break up the list of options.

These lines are then repeated as necessary to build up the required pull down menu.

addTopSubMenu("idOption1", "List 1, option 4", "link4.shtml");
addTopSubMenu("idOption1", "List 1, option 5", "link5.shtml");
addTopSubMenu("idOption1", "List 1, option 6", "link6.shtml");
addSeperator("idOption1");
addTopSubMenu("idOption1", "List 1, option 7", "link7.shtml");
addTopSubMenu("idOption1", "List 1, option 8", "link8.shtml");
addTopSubMenu("idOption1", "List 1, option 9", "link9.shtml");
addTopSubMenu("idOption1", "List 1, option 10", "link10.shtml");

To create additional pull down menus simply reuse the same chunk of code using copy and paste but remember to alter the idOption number to reflect where it appears in the order.

Updating / Adding links to a pull down menu

If you take a look at the information for creating a pull down menu then altering an exisitng menu is pretty self explanatory. You can see from the very first line that the basic structure is Action("Menu Number", "Text displayed", "Link"); so altering the actual text that is displayed in the menu and the subsequent link is very straightforward once you have created the menu structure which you require.

Adding a new link under a pull down menu is again straightforward, simply add a new addTopSubMenu line in the addTopMenu section you want it to appear and in the position you want it in the listing.

Important considerations

The pull down menus are already created and you will not need to alter the menu titles however the "Creating a pull down menu" section is there to provide an understanding of how they work to make updating and them easier.

The site will support 5 pull down menus only, and that is providing each menu title as declared in the addTopMenu() statement is no longer than 12 characters long.

Submenu entries are likewise best limited in size. Although they will support any length required however it's far better to keep them short and to the point.

All links to pages from these pull down menus must be relative to the site root and NOT the actual file itself, so to link to this page in a pull down menu you would use the path "/sitemaintenenace/pulldownmenus.shtml"

TTSL Home page - Frequently Asked Questions - Suggestions / Feedback - Sitemap
  << Back to previous page