Home arrow HTML arrow Background Images for a Menu for All Browsers

Background Images for a Menu for All Browsers

In this seventh part of a nine-part series on building a menu that works in all browsers, we complete the discussion of the JavaScript functions. We go on to see how we can use background images for menu items instead of background colors. We shall start winding up the series at the end of this part.

Author Info:
By: Chrysanthus Forcha
Rating: 5 stars5 stars5 stars5 stars5 stars / 2
June 17, 2009
  1. · Background Images for a Menu for All Browsers
  2. · Using Background Images
  3. · Changes to the Code
  4. · Review of the Project

print this article

Background Images for a Menu for All Browsers
(Page 1 of 4 )

The removeSubMenu() Function

The BODY element receives a click when you click it outside a sub menu item (that is, outside the drop down or sub menu). When the BODY element receives a click, this function is called. The start tag of the BODY element has the following attribute:


Now, this is the removeSubMenu() function:

function removeSubMenu()


if (subMenuJustClicked == false)

{//remove sub menus

//first remove drop down tables

for (x=0;x<5;x++)


DDID = "DDT" + x;

document.getElementById(DDID).style.display = "none";


//call the functions to remove the sub tables


//remove the main table for the sub menus

document.getElementById('MT').style.display = "none";


//reset the subMenuJustClicked variable

subMenuJustClicked = false;


The first statement is an if-statement. It verifies that the global variable, subMenuJustClicked is false; that is, it verifies that a sub menu item was not clicked. If it was not clicked, it means it has to remove any drop down and/or sub menu that was displayed. The block of the if-statement does this.

The first statement in this block is a for-loop. This loop sets the value of the display property of every drop down menu to "none." In this way, any drop down menu that was displayed is removed. The next statement in the block calls the remove2NumID() function. We know that this function also calls the remove3NumID() function. In this way, all the sub menus in our example are removed. The next and last statement in the block removes the main table that holds the drop down and sub menus.

After the if-statement, whose block we have discussed, we have one statement, which is the last in the function. The statement sets the subMenuJustClicked global variable to false, independent of whether a drop down or sub menu was removed. False is its initial and default value. The value of this variable changes depending on whether a sub menu item was clicked or not.

Whenever the toChoose(ID) function is called, the removeSubMenu() function is called immediately after. This sequence is in accordance with the clicking events triggered: the onclick event of a sub menu item, followed by the indirect onclick event of the BODY. So the subMenuJustClicked variable is true only for a short time. If it remains true after the removeSubMenu() function has been executed, the next time you click the BODY element outside the menu, the drop down or sub menus will not be removed. In other words, the if-block will not be executed.

At this point, we have discussed all the JavaScript functions of this series. What we have to do now is  see how to use images as background for the menu item cells.

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