Home arrow HTML arrow Page 4 - A Vertical Menu for All Browsers
HTML

A Vertical Menu for All Browsers


This is the eighth part of a nine-part series that shows you how to build a menu that will work in all browsers. Let us quickly look at the design of a vertical main menu in this part.

Author Info:
By: Chrysanthus Forcha
Rating: 5 stars5 stars5 stars5 stars5 stars / 6
June 24, 2009
TABLE OF CONTENTS:
  1. · A Vertical Menu for All Browsers
  2. · Layout with Vertical Main Menu
  3. · Third, Fourth and Fifth Drop Down Menus
  4. · The Second Drop Down Menu

print this article
SEARCH DEVARTICLES

A Vertical Menu for All Browsers - The Second Drop Down Menu
(Page 4 of 4 )

This is the outline diagram of the second drop down menu.




Fig. 17.7

You have one section (main) table, having other tables inside of it. It has two rows of one cell each. The first cell has the   character. The reason for this first cell is the same as the reason for the “blank” cells given above.

The second cell in the second row has a table. This table is always displayed when the section table is displayed. The value of the display property of the section table can be changed from "none" to "block" at any time. The value of the display property of this inner table is always "block."

This table is more or less what we called the Outer Table previously. However, its ID has been given to the section table; it no longer has an ID. This table has one row and three cells. Each of these cells has the menu table that can be displayed or removed. Everything else for the second drop down menu is as we set it up previously in this series.

The JavaScript Code

Two lines are deleted in the JavaScript code. These changes are in the dropDownMenu(ID) function. For the Vertical main menu we no longer have the main table for the sub menus with the ID ‘MT’. So the following line with its preceding comment (not shown here) is removed from the JavaScript:

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

If you do not remove this line, your complete code may not work.

We no longer have the sub menu produced by the fifth column. So the following line and its preceding comment (not shown here) is removed from the JavaScript:

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

If you do not remove this line, your complete code may not work.

Image Code

You can modify the above code, as we did in the previous part, to have the corresponding image code.

You can download the complete code for the vertical main menu at:

versatileCommonMenuVertical.ZIP

You can download the complete image code for the vertical main menu at:

versatileCommonMenuVerticalImg.ZIP

Both files are in ZIP format. The second one includes two images.

We have come to the end of this part of the series. In the next, and last, part I will give you a summary of all what we have learned and then conclude.


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

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