- basic scripting -

       Creating the Menu
.   .   .

In this next example, we'll be creating a menu that comes complete with sub-menu's. Those sub-menus slide out from the left and rest under the menu. The script will work in both Netscape and Microsoft Internet Explorer. The menu will be at the very top of the page, and the sub-menus will slide from left to right until it reaches where it needs to be.

Wait a second! Put down the chips and listen...read intensely. Did you see what the boring drabble in the above paragraph was? That was planning. I was planning exactly what the script was. Some people like to draw pictures of the script, which I sometimes do. Right now, I have a mental picture of exactly what the menu looks like. Learn from that.

So, to begin, we have to create the table with the menu in it. 


<table cellspacing=0 cellpadding=0 border=0>

   <tr>

      <td width=50 bgcolor=#004080><font color=#004080>.</font></td>

      <td width=740 bgcolor=#004080>

   <font face="arial" size=2>
   
                        <a href="#" onClick="go();"><b>Cows</b></a> 
   </font>

      </td>

</table>

This is tricky, since it is practically tailored to fit Netscapes messed-up things. You have to use a table to have a background color, and for the box to stretch across the screen. You also have to add <font color=#004080>.</font> to make that <td>'s bgcolor show in Netscape. The link is indented by the first cell. In the second cell there's the link, that when clicked calls up the function "go()". Cows...hmmmm....this is going to be interesting. Anyways, the actual html is here. Also, you should know that I added some stuff to the body tag making it look like this:

<body link=skyblue alink=skyblue vlink=skyblue topmargin=0 leftmargin=0 marginheight=0 marginwidth=0>

That tag makes it so the link is always skyblue, and the table is always in the upper left hand corner of the screen, no matter what browser.

Now that we've got the table, let's add the sliding sub-menu. In this case, the sub-menu will have other links that will do other things. So, the sub-menu looks like this:

<span id="menu1" style="width: 200px; height: 200px; position: absolute; left: -210; top: 20;"><table cellspacing=0 cellpadding=0 border=0><tr><td width=200 height=200 bgcolor=#B0C4DE>thelinks</td></table></span>

Notice that this clump of letters is just a table within the span tag, which again, compensates for the Netscape problems. The above span tag is hidden beneath the menu. I've determined that that span will stop moving at exactly top=20, left=50. So, what's next? The scripting.

next >>

.   .   .

  1. Introduction
  2. What, Exactly, is it?
  3. The [object]
  4. Detecting Browsers
  5. Accessing Properties
  6. Making a Script
  7. Making the Script in Netscape
  8. What to Change?
  9. Creating a Menu
  10. Scripting the Menu
  11. The Netscape Menu
  12. Last Words