|
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.
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"
|