Home arrow HTML arrow Choosing Sub Menus for a Common Browser Menu

Choosing Sub Menus for a Common Browser Menu

In this part of the series, we discuss how the sub menus, including drop-down menus, are removed from the screen. We shall also see how the series will progress. This is the ninth part of a ten-part series covering the creation of a common browser menu.

Author Info:
By: Chrysanthus Forcha
Rating:  stars stars stars stars stars / 0
May 01, 2009
  1. · Choosing Sub Menus for a Common Browser Menu
  2. · The removeSubMenu() Function
  3. · The Statements in the for-loops
  4. · Some Comments

print this article

Choosing Sub Menus for a Common Browser Menu
(Page 1 of 4 )

The toChoose() Function

There are four functions for the code. This is the shortest. We said that when the BODY element receives a click, any sub menu displayed (the drop down menu is also a sub menu) should go off the screen. So when you click the BODY element outside the table having the sub menus, any sub menu displayed goes off the screen as required.

When you click any cell on our table, the BODY element indirectly receives a click. So any sub menu displayed should go off. What we want to have happen is that, when you click the cell of a sub menu item, the sub menu should not go off, but when you click the cell of a non-sub menu item, the sub menu should go off. There is a global variable, named subMenuJustClicked, that is used to make this difference. This global variable works with the toChoose() function. This global variable and the toChoose() function are:

var subMenuJustClicked = false; //for removing sub menus

function toChoose(ID)


if (document.getElementById(ID).style.backgroundColor == "firebrick")

subMenuJustClicked = true;


There is the onclick attribute for every cell in our table. The onclick event calls this function. When a cell is clicked, this function is called with the ID of the cell sent as an argument. The aim of this function is to distinguish between clicking a cell that has a menu (sub) item, and clicking a cell that does not have a menu item.

Before you click a cell, your mouse pointer has to first be over the cell. If the cell has a sub menu item, then the background color of the cell should be firebrick. When this function is called as a result of clicking a cell, the function checks to see if the background color of the cell is firebrick. If it is, it means that a sub menu item has been clicked, and the sub menu should not be removed from the screen, so the functions sets the subMenuJustClicked global variable to true to indicate this.

The default and the initial value of subMenuJustClicked is false. The function to remove the sub menus verifies the value of this variable before it does anything. If the value is true, it does not remove the sub menus; if it is false, it removes the sub menus.

blog comments powered by Disqus

- 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 

Developer Shed Affiliates


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