HTML
  Home arrow HTML arrow Page 3 - Functions for a Menu for All Browsers
Dev Articles Forums 
ADO.NET  
Apache  
ASP  
ASP.NET  
C#  
C++  
ColdFusion  
COM/COM+  
Delphi-Kylix  
Design Usability  
Development Cycles  
DHTML  
Embedded Tools  
Flash  
Graphic Design  
HTML  
IIS  
Interviews  
Java  
JavaScript  
MySQL  
Oracle  
Photoshop  
PHP  
Reviews  
Ruby-on-Rails  
SQL  
SQL Server  
Style Sheets  
VB.Net  
Visual Basic  
Web Authoring  
Web Services  
Web Standards  
XML  
Mobile Linux 
App Generation ROI 
IBM® developerWorks 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us Get Paid 
Request Media Kit
Contact Us 
Site Map 
Privacy Policy 
Support 
 USERNAME
 
 PASSWORD
 
 
  >>> SIGN UP!  
  Lost Password? 
HTML

Functions for a Menu for All Browsers
By: Chrysanthus Forcha
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating: 5 stars5 stars5 stars5 stars5 stars / 2
    2009-06-03

    Table of Contents:
  • Functions for a Menu for All Browsers
  • Names of the Functions and their Roles
  • The dropDownMenu() Function Details
  • The remove3NumID() Function Details
  • The remove2NumID() Function Details

  • Rate this Article: Poor Best 
      ADD THIS ARTICLE TO:
      Del.ici.ous Digg
      Blink Simpy
      Google Spurl
      Y! MyWeb Furl
    Email Me Similar Content When Posted
    Add Developer Shed Article Feed To Your Site
    Email Article To Friend
    Print Version Of Article
    PDF Version Of Article
     
     
    ADVERTISEMENT


    Functions for a Menu for All Browsers - The dropDownMenu() Function Details


    (Page 3 of 5 )

    This is the dropDownMenu() function:


    function dropDownMenu(ID)

    {

    //display the main table for the sub menus

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


    //remove any drop down menu that was displayed

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

    {

    //form the ID of the drop down table

    DDID = "DDT" + i;

    //un-display it

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

    }

    //remove tables for all sub menus

    remove2NumID();

    //special case to remove, due to the last column

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


    //first make sure all background colors of the main menu cells are brown.

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

    {

    //form the cell ID

    theID = "D" + i;

    document.getElementById(theID).style.backgroundColor = "brown";

    }


    //let the background of the current main menu cell be firebrick.

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


    //display the corresponding drop down menu

    //first form the ID of the drop down table

    DDID = "DDT" + ID.charAt(1);

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

    }


    Explanation of the dropDownMenu() Function

    This function receives the ID of the menu item of the main menu, on which the mouse pointer was, as an argument. As I said, the function is different from the one in the previous series. The first statement displays the main table for the sub menus. The next statement is a for-loop. This statement removes any drop down menu that was displayed by addressing all the possible drop down menus, through all the iterations. The first statement in the for-loop forms the ID. The next one sets the display property to "none."

    The next statement in the function is a call to the remove2NumID() function. This function removes any sub menu that was displayed. We shall say more about this function later.

    Now, the table for the sub menu produced by the fifth drop down menu is in the fourth cell of the main table. This table has not been fitted into the main table, the way the other tables for sub menus have. So we have to treat it in a special way. 

    The dropDownMenu() function removes any drop down menu and any sub menu before it displays the drop down menu requested. The next statement removes the table for the sub menu in the fourth cell.

    After this we have a for-loop. In our example there are five cells in a drop down menu. This for-loop does five iterations for the five cells. It makes sure that all the background colors for the cells are brown. Brown is the initial and default background color for any table cell. The first statement in the loop forms the ID, while the next statement gives the color.

    Before a drop down menu is shown, the mouse pointer has to go over a particular cell of the main menu. The background color of this cell has to be changed to firebrick. The next statement in the function does this.

    The following statement forms the ID of the menu that has to be dropped down. It uses the ID of the cell of the main menu (horizontal bar) over which the mouse pointer is hovering. The last statement displays the requested drop down menu, by setting the value of the display property of the table to "block."

    More HTML Articles
    More By Chrysanthus Forcha


     

    HTML ARTICLES

    - Comparing Browser Response to Active Client ...
    - Testing Browser Response to Active Client Pa...
    - Active Client Pages: Completing the Code for...
    - ACP and Browsers: Setting up an Example
    - How Browsers Respond to Active Client Pages
    - Completing a Tree with Active Client Pages
    - HTML Form Verification and ACP
    - Building an ACP Tree
    - Completing an ACP 3D HTML Table Image Gallery
    - Building an ACP 3D HTML Table Image Gallery
    - A Multiple Page Image Gallery with Active Cl...
    - Building an Image Gallery with Active Client...
    - Concluding a Menu for All Browsers
    - A Vertical Menu for All Browsers
    - Downloading Long HTML Pages with ACP







    © 2003-2009 by Developer Shed. All rights reserved. DS Cluster 4 Hosted by Hostway
    For more Enterprise Application Development news, visit eWeek