Quick Web Page Menu - Strategy
(Page 2 of 4 )
Strategy
Consider an HTML parent element such as the Table Cell. You can type the text of the main menu item as the first content of the table cell. Next, follow this text by typing a line break "<br />" . The line break will force the next element to appear below the text in the parent (TD) element. The next element that goes below the text should be a block level element (DIV for example) that can take in text, links, lists etc. This block level element will have the absolute position property.
However, it should not be given any position, that is, it should not be given the Left and Top CSS properties. Give your BODY element a z-index of 0. Give the block level element with the absolute position property, a very high z-index such as 20 that you think no other element in the web page can have. You can then use JavaScript to make this block level element visible or hidden when the user clicks the first content (text in this case) in the parent (TD) element.
Example
In the following example we shall create a table of one row with three table cells. This row represents the menu bar, which is your main menu. In the first and last table cell we shall create a DIV element having links. These DIV elements will be given the absolute position property but no position (no Left and Top properties). They will each be given a z-index value of 20 which we think no other element in the web page can have.
The first content in the first table cell will be the text "Pull Down First Menu." The first content of the third table cell will be the text "Pull Down Second Menu." This is the code that does the work. I explain it below:
<html>
<head>
<style type="text/css">
body {position:relative; z-index:0}
table.menu {background-color:Fuchsia; border-width:0px}
div {position:absolute;z-index:20;background-color:Fuchsia; visibility:hidden}
</style>
<script type="text/javascript">
var menuClicked = false; //to indicate whether the menu was clicked
var onlyBodyClicked = false; // to indicate that the menu bar was not clicked, but other part of body was clicked
function showHideMenu(ID)
{
//a drop down menu might be visible (opened) at this point, so we close (hide) all the menus.
document.getElementById("D1").style.visibility = "hidden";
document.getElementById("D2").style.visibility = "hidden";
//now make visible the one for the TD that was clicked
document.getElementById(ID).style.visibility = "visible";
Next: Code continued >>
More HTML Articles
More By Chrysanthus Forcha
/ 7 
