Page 3 - 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

Poor Best

Rating:

/ 7

April 30, 2008

TABLE OF CONTENTS:

See Also:

print this article

SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement

Quick Web Page Menu - Code continued
(Page 3 of 4 )

menuClicked = true;

onlyBodyClicked = true;

}

function hideMenus()

{

if ((onlyBodyClicked == true)&&(menuClicked == false))

{

document.getElementById("D1").style.visibility = "hidden";

document.getElementById("D2").style.visibility = "hidden";

}

//reset the menuClicked flag

menuClicked = false;

}

</script>

</head>

<body onclick="hideMenus()">

<table class="menu">

<tr>

<td onclick="showHideMenu('D1')">

Pull Down First Menu <br />

<div id="D1" style="visibility:hidden">

<a href = "http://www.website.com">First Link </a><br />

<a href = "http://www.website.com">Second Link</a><br />

<a href = "http://www.website.com">Third Link</a><br />

<a href = "http://www.website.com">Fourth Link</a>

</div>

</td>

<td>

 

</td>

<td onclick="showHideMenu('D2')">

Pull Down Second Menu <br />

<div id="D2" style="visibility:hidden">

<a href = "http://www.website.com">First Link </a><br />

<a href = "http://www.website.com">Second Link</a><br />

<a href = "http://www.website.com">Third Link</a><br />

<a href = "http://www.website.com">Fourth Link</a>

</div>

</td>

</tr>

</table>

Many elements will go here. This can include Paragraphs, links tables, etc.

</body>

</html>

Next: Explanation of Code >>

blog comments powered by Disqus

HTML ARTICLES

- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5
- BBC Adopts HTML 5, Mozilla Addresses Issues
- Advanced Sticky Footers in HTML and CSS
- HTML and CSS Sticky Footers
- Strategy Analytics Predicts HTML5 Phones to ...
- HTML5 Guidelines for Web Developers
- Learning HTML5 Game Programming
- More Engaging CSS3 and HTML Background Effec...
- Engaging HTML and CSS3 Background Effects
- More Web Columns with CSS3 and HTML
- Columns with CSS3 and HTML
- Creating Inline-Block HTML Elements with CSS
- Drag and Drop in HTML5: Parsing Local Files

Find More HTML Tutorials

Dev Articles Forums

Weekly Newsletter
Developer Updates
Free Website Content

Privacy Policy
Support

© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 9 - Follow our Sitemap

Popular Web Development Topics

All Web Development Tutorials