Home arrow HTML arrow Page 2 - Quick Web Page Menu
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
Rating: 5 stars5 stars5 stars5 stars5 stars / 8
April 30, 2008
TABLE OF CONTENTS:
  1. · Quick Web Page Menu
  2. · Strategy
  3. · Code continued
  4. · Explanation of Code

print this article
SEARCH DEVARTICLES

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


blog comments powered by Disqus
HTML ARTICLES

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials