Navigational Menu Usage Information
Updated: 03/12/2005 01:32:13 PM
Contents:
Code URL:
http://www.burmees.nl/menu
Code Language: JavaScript
Implemented Version: 13.10
Implemented Version Date: June 27, 2004
Local Installation Directory: research/nav
Although this menu supports subtrees, only a single tree is used in this implementation.
If the URL for the entire site is changed, or to test the menu on a local computer, the value for the BasHref variable within the vars.js file must be changed to point to the applicable research directory. Acceptable entries include:
var BaseHref="file:///F|/Andy/research/";
The above is a sample value for testing the menu on a local computer. Here, the research directory is in the Andy directory, which is in the F drive.
var BaseHref="http://ruina.tam.cornell.edu/research/";
The above is a sample value for when the menu is used online, which is typically the case.
For a page to display the menu correctly, the following HTML code must be present in it:
Considering that style="background-attachment: fixed" is already a part of the <body> tag, it must be changed to:
style="background-attachment: fixed; margin-left: 220; margin-right: 10"
This is to ensure correct that the text in the page does not overlap with the menu.
Thus, a sample <body> tag may be the following, with emphasis on the underlined part:
<body background="images/background.jpg" style="background-attachment: fixed; margin-left: 220; margin-right: 10" link="#000080">
Note that if for any reason, the values for the margin-left and margin-right variables are changed from their currently set defaults of 220 and 10 respectively, the new values would have to be updated individually in all pages.
The following must be included immediately below the <body> tag:
<script type='text/javascript'>function Go(){return}</script>
<script type='text/javascript' src='nav/vars.js'></script>
<script type='text/javascript' src='nav/menu.js'></script>These are especially to ensure that the page knows where to look for the vars.js and menu.js files, which build the menu.
In the above lines, both instances of nav/ must be replaced with the exact location of the two js files, except if the relevant page is in the research directory itself, in which case no change would be necessary. For instance, if the relevant page is in the research/lab directory, nav/ would be replaced with ../nav/. Similarly, if the relevant page is in the research/topics/locomotion_and_robotics directory, nav/ would be replaced with ../../nav/, and so on.
If the page must highlight an item in the menu, the following must be included within the <head> </head> tags:
<script type="text/javascript">var SetMenu="7";</script>
The value for the SetMenu variable, which in this case is 7, must be replaced with the applicable value, which can be obtained from the vars.js file. For instance, if the lab/students.htm page is being added to the site, and if the entry for that page has already been made in the menu (as explained in the next section), it is seen in the vars.js file that the corresponding number for this entry in the menu is 16. Thus, in this case, in the papers.htm page, the value for the SetMenu variable will be set to 16.
Note that the menu loads only after the page and all images in the page have finished loading. Therefore, images should be limited and their sizes controlled, so the menu does not take a very long time to load. Information on one slightly complex workaround for this is available at http://www.burmees.nl/menu/examples/quickstart.htm.
To add a new item to the menu:
Open the vars.js file for editing.
Before any changes are made to this file, a backup copy of it may be made if
felt necessary.
The first section of the file, i.e. lines that start with var, are
variable declarations that control the general appearance of the menu. The
last section, i.e. lines that start with Menu, declare the items that
display in the menu. The general syntax for item declaration is present
immediately above that in the commented lines, i.e. in the lines that start
with //, with the heading Menu tree.
Each item in the menu is a unique array variable, and therefore has a unique
name. Names must be present sequentially in this order: Menu1,
Menu2, Menu3, and so on. Even blank lines in the menu, such as
the one between Andy Ruina and Research Overview, are declared
as items.
Determine where in the menu the item must go.
Insert a new blank line at that location. To make it easier to configure the
item, copy the contents of another preferably similar menu entry, and place
them in the new line.
Edit the line of this new item:
Rename the variable it so it has a
sequential and unique name, e.g. Menu7. Additional items, if
present below this new item, would now also have to be renamed to
conform with the naming standard.
If these additional items are renamed, any pages associated with those
items may have to be updated as well, although this can wait until this
new item is fully entered. Those associated pages would have to be
updated if they highlight a menu item. In that case, the menu item
number in those pages will have to be changed to reflect the new correct
value. Information for doing this is in the last subsection of the
Adding the menu to a new page
section. For instance, the line containing
SetMenu="7" may now need to
be changed to contain SetMenu="8"
instead.
Change the value for ItemText as
applicable. The value, if not blank, can be in plaintext or HTML format.
HTML format is used especially if an appropriate margin spacing
is deemed relevant, which is usually the case.
Change the value for Link as
applicable, or leave it blank and enclosed in quotation marks if the
item must not link to anything. If the link must open in a new window,
use the Link format as used for the Student humanoid robotics
design team item.
If necessary, change the value for
Height as applicable, which is usually set to 20. See values
of Height for existing similar items if needed, and try to keep
it standard.
Change the values for bgcolor,
bghighcolor, fontcolor, and fonthighcolor if and only
if they must be different from their default global menu values, as
declared above in the variables section of the menu. Again, use values
of existing similar items in this case.
For common colors, these values are specified as the color name, e.g.
red, green, blue, etc. For uncommon colors, they are specified in six
character hexadecimal format, preceded by the # character, e.g.
#6B5894.
Change the values for fontsize and
fontbold. Again, this is done if and only if they must be
different from their default global menu values. In this case, as
before, use values of existing similar items.
If further information on editing this line is
required, consult the installmenus.htm file in the research/nav/misc
directory.
Increment the value of the
NoOffFirstLineMenus variable by 1. This variable is declared in
the topmost uncommented line of the file.
Verify that the value for the
BasHref variable is accurate for the current setting, as specified in the
Changing site URL section in this
document. Save the vars.js file, and test the updated menu on
multiple browsers to ensure that it works correctly.
As relevant, edit any pages associated with
this new menu item, so that the menu is displayed and this item highlighted
when those pages are loaded. Information for doing this is in the
Adding the menu to a new page
section. Test these updated pages.
If the tests in any the above two steps were performed on the local computer only, be sure to upload the updated files to the site, and test them on the web as well. Once again, while doing this, the value for the BasHref variable must now be accurate for the web.
Changing miscellaneous menu settings
To change miscellaneous menu settings such as background color, font color, etc., edit their values in the variables section of the vars.js file. If any additional information is required, consult the installmenus.htm file in the research/nav/misc directory.