Creating "Select A Menu"

-€Link Name
-€Link Name
-€Link Name
-€Link Name

This tutorial is going to teach you how to make a basic Select Menu. Since this will probably used for your own enjoyment the bells and whistles that The Professor used in making the Demo Page will not be discussed here.

You may used the same colors for your body color, text, tables, links and vlinks or you may choose to visit the The Professor's color chart and choose your own.

The first order of business is the <body> tag. The Professor strongly recommends the use of the hspace=0, vspace=0 and fontsize=medium attributes in the body tag in making this Menu.

Some Msn Tv only tags are used to make this Menu, so PCs will not be able to appreciate your fine efforts when viewed directly. They can, however, download the Web Tv Viewer so they can see your page as you do.

The Body Tag

<body bgcolor="#191004" text="#ffd770" link="#ffffff" vlink="#daa520" hspace=0 vspace=0 fontsize=medium>

The <noframes> Tag

Java Script is used to make the menu appear, when the menu link is clicked, so it is necessary to add the <noframes> </noframes> to the page coding. This is the code used on this page and it goes immediately after the body tag.

<noframes><br><br><font size="5"><b>Reload Page Cmd R if you see this message</b></font></noframes>

The Menu

Making the menu is really quite simple. The codes used just look complicated. Placing the menu correctly in the center <td> cell is a bit tricky but is easily accomplished by just varying the left and top pixel positions in the <div id="name" tag.

<div id="mymenu1" style="position:absolute;left:115px;top:60px;visibility:hidden;">

The menu moves right as you increase the left pixel value and left as you decrease it. The menu also moves vertically down as you increase the value of the top pixel and up as you decrease it. The Menus are actually on your page when it loads. It's that you just can't see them. That is because they are layered using css coding and are hidden by the use of a hidden attribute in the <div id="name" as shown above.

Now we must find a way of making the menu visible on demand. This is acomplished by the use of an Anchor Tag like this.

<a href="javascript:void(0)" onClick="document.all.mymenu1.style.visibility='visible'">
<font size="2"><b>Menu 1</b></font></a>

Finally once our menu is opened, we must find a way of closing it. This is accomplished by the use of a hidden attribute inside of a <form> tag

which is located in the 2nd <tr> table row of the Menu Table

This <div id="name" tag also contains the Menu Table which is inserted between the opening <div> tag and the closing </div> tag.

The Menu Table

Notice that what ever name you give to the <div id="name" tag" MUST be the same name that is used throughout your document for each menu that you create. In this tutorial, The Professor chose mymenu1 as the name. You can do the same as it makes editing easier. For example....You would use mymenu1 thru 6 if you were making 6 menus.

The location of the <div id="name" code can be placed any where on you page coding where you find it the easiest to edit. The Professor recommends that you make your menus in pairs for proper page symmetry. This tag, <div id="name" is the Key to the proper functioning of the menus.

The Main Page Table

Along with the normal web page tags, this table and the <div id="name" tags are the only coding that you need to place on your web page to create your own Select A Menu. This table is comprised of one <tr> table row which contains three <td> table data cells. The anchor tags go in the 1st & 3rd cells and the   goes in the 2nd cell. This   tag is important as the table may collapse without it.

The rowspan="1", in the 2nd <td> cell, is not required for this table. It is, however, required for each additional pairs of menus. For example------>You would set this value equal to the number of pairs of menus that you would be using. Visit The Professor's tutorial on rowspan for further information on this subject

The above table coding is the actual code used that you see at the Top of this page. The maximum table width recommended is 550 pixels. Setting the <td> width at 75 for each anchor tag, will give you 400 pixels for the center <td> cell where you will be placing the menus. The key here is that the sum of the <td> widths on each <tr> row must add up to the table width used.

The height of the table will be determined by the No of pairs of anchor tags that you will be using and the No of links in each menu. As a rule of thumb, you might allow about 60 pixels for each pair of menus.

Relax and have fun. Regards,
The Professor