JavaScripting on the Navigation Bar

Mitzrah's Get IT Right Column!!
Navbar - Module 2
Updated : Friday, August 07, 1998

This is Module 2 of the Navbar Creation Tutorial

So now that you have created your image bar, we head on to the JAVAscripting. This bit of JAVAscript is actually an applet. So we will be needing more files to be added into the mess. The JAVAscript code was not too difficult to sort out, after all, I did figure it out and if I can, I believe you can too!

For instance this is my current code... I don't expect you to understand it (I certainly don't!) but I will explain as we go along. The words in brown are the ones I made comments on. I have a ready code for you to use below, after the explanation of the code, so you needn't worry about the cut and paste, just absorb or better yet, print out this page so you can refer to it when you are coding. Here we go!

<applet code="XeoList.class" width="122" height="350">
What this line of code does is call up the XeoList.class applet. It also specifies how physically large the navbar should be, It is often advisable to make the width of the applet a little larger than the individual. My buttons were 120 x 20 so the width was chosen to be 122.
<param name="copyright" value="v1.8 (c) 1996 Patrick Chan. All rights reserved. www.xeo.com">
<param name="images" value="menu_complete.jpg">
This code calls up the image, from here, my image for the navbar is menu_complete.jpg and it resides in the same directory as the navbar.html file. Remember the locations of XeoList.class and the image file should be the same as the html file. If not then you should refer to the directories as well!
<param name="font" value="helvetica">
This code specifies the font that we should use for the items in the navbar. I don't think it is fully working though. Dunno why!.
<param name="item-height" value="13">
This says that the height of the font is about 13 pixels high..
<param name="text-color" value="fee1ab">
This code chooses the colour of the text in the navbar, do note that it only accepts ASCII colours so you need the CODE and not the actual colour! Example : DO NOT substitute fee1ab with blue say, but it is OK to substitue it with 000000 or some other colour code. If you do not have any idea what the colour codes should be, get a colour picker, you can find them at www.tucows.com choose a location nearest you and do a search for colour pickers..
<param name="hitext-color" value="7AB2F8">
This specifies the highlighted text colour when your mouse glides over the text. Same restrictions apply.
<param name="hibg-color" value="000000">
This determines the highlighted BACKGROUND colour of the highlighted text. Same restrictions apply.
<param name="bg-color" value="000000">
This tells the browser to use the colour of the navbar, I chose black in this case and black's ASCII value is 000000.
<param name="delay" value="30">
<param name="shift" value="4">
This code specifies how fast the menu cascades or closes, lower numbers usually are slower while higher numbers gets faster. Feel free to experiment!
<param name="autoclose" value="t">
<param name="indent" value="10">
This one tells the browser to indent 10 pixels for the text, feel free to alter the code to suite your needs.
<param name="sep" value="|">
<param name="header-spacing" value="0">
<param name="headers" value="0 0 120 18">
This tells the applet how to load your plates, the first plate starts from 0,0 (upper left hand corner) and to 120,18 (lower right hand corner) Obviously you need to change the 120 18 value to whatever value you chose your plates to be..
<param name="icons" value="0 0 0 0">


<param name="list" value="
0|*|1|Home| |
Now take a look at this code :
0 means that this is a PARENT heading and should be loaded as such.
|*| means that it is cascadable
Home is just the name that I provided it.
| | allows it to cascade to reveal the contents within and then back to its orignal form.
1|*|-1|Site Features| |
1 means that it is the first first and a subheading under the HOME category. It will cascade to show "Site Features" as the text..
|-1| means that this is the first level of the cascading.
Site Features will be the text that will reveal itself in the cascaded form.
Upon clicking Site Features, it will cascade to reveal its second level form, which are listed below, Introduction, Classification and the Site Map.
2|.|-2|Introduction|intro.html|
2 means that this is the second level of cascading under the Site Features sub heading.
|-2| means that this is the second level.
Introduction will the the text that reveals itself under the cascaded form.
|intro.html| Upon clicking the text "Introduction", the browser will load up the file which is called intro.html
2|.|-2|Classification|intro2.html|
2 means that this is the second level of cascading under the Site Features sub heading.
|-2| means that this is the second level.
Classification will the the text that reveals itself under the cascaded form.
|intro2.html| Upon clicking the text "Classification", the browser will load up the file which is called intro2.html
2|.|-2|Site Map|site_map.html|
2 means that this is the second level of cascading under the Site Features sub heading.
|-2| means that this is the second level.
Site Map will the the text that reveals itself under the cascaded form.
|site_map.html| Upon clicking the text "Site Map", the browser will load up the file which is called site_map.html
1|*|-1|Malaysian Stuff!| |
This is another sub heading under the HOME category and is similar to the Site Features thing.

blah blah blah

0|*|12|E-Mail| |
1|.|-1|E-Mail Me!|http://www.oocities.org/cgi-bin/geoguide/emailMe|
As you can see here, we can also use absolute URLs instead of just .html files.l
1|.|-1|ICQ Me!|icq.html|
1|.|-1|View SiteBook 1|geobook.html|
1|.|-1|View SiteBook 2|geobook2.html|
This is the last category and so is nothing special.l
">
<param name="state" value="15 30">
<param name="target" value="main">
This string of code tells the browser which frame to load up the files that have been clicked. So in this case I have my main window named as main. So whenever any visitors click the items, the frame on the right, named main will load up the html files.
</applet>

Looks a mess huh? Right I know! I will ready a template for the code below here so you can just cut and paste and use the code below. So what do you think? Complicated? Yup!

<param name="list" value="
0|*|1|Category 1| |
1|*|-1|Sub Heading 1| |
2|.|-2|Item 1|item/URL1.html|
2|.|-2|Item 2|item/URL2.html|
2|.|-2|Item 3|item/URL3.html|
1|*|-1Sub Heading 2| |
2|*|-2|Child Sub Heading 1| |
    3|.|-3|Item 1|item/URL1.html|
    3|.|-3|Item 2|item/URL2.html|
    3|.|-3|Item 3|item/URL3.html|
2|*|-2|Child Sub Heading 2| |
    3|.|-3|Item 1|item/URL1.html|
    3|.|-3|Item 2|item/URL2.html|
    3|.|-3|Item 3|item/URL3.html|

0|*|1|Category 2| |
1|*|-1|Sub Heading 1| |
2|.|-2|Item 1|item/URL1.html|
2|.|-2|Item 2|item/URL2.html|
2|.|-2|Item 3|item/URL3.html|
1|*|-1Sub Heading 2| |
2|*|-2|Child Sub Heading 1| |
    3|.|-3|Item 1|item/URL1.html|
    3|.|-3|Item 2|item/URL2.html|
    3|.|-3|Item 3|item/URL3.html|
2|*|-2|Child Sub Heading 2| |
    3|.|-3|Item 1|item/URL1.html|
    3|.|-3|Item 2|item/URL2.html|
    3|.|-3|Item 3|item/URL3.html|
">
<param name="state" value="15 30">
<param name="target" value="main">
</applet>

Well you should be able to handle this now, I hope this section wasn't too wordy or too techy, now you need the final thing to make the whole enssemble complete! Let's go to Module 3!

Notes from Alex:

If you found my tutorial helpful, please drop a note by my guestbook! So I know that you have dropped by and benefitted from my efforts, it took me quite sometime to get these tutorial up! Click on home and then SIGN GUESTBOOK! I will also visit your homepage at GeoCities and sign your guestbook if you sign mine!


[ Emiri Nakayama \| Sailor Mars, Rei \| About Me \| Photo Gallery ] [ WWW Resources \| HTML Tutorials \| Hints & Tips \| Banner Exchange ] [ Awards \| Win My Award \| Home \| Links \| Change Music \| E-Mail Me ]

LinkExchange Member

Free Home Pages at GeoCities