HTML

Quick Web Page Menu

Many applications (e.g. Microsoft Word) have a menu as their first bar. If you have a web site that has many pages, you can create a similar menu bar where, if you click a menu item, a drop-down menu with links will appear over other content on the page. You might have seen this on some web pages already. Keep reading if you would like to learn how to build this for your web site.

Author Info:

By: Chrysanthus Forcha

Poor Best

Rating:

/ 7

April 30, 2008

TABLE OF CONTENTS:

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>

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>

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";