Home arrow HTML arrow Concluding a Menu for All Browsers
HTML

Concluding a Menu for All Browsers


At last we have a web page menu code that can be used for any browser without any of its code segments being specific to any particular browser. I called the design approach of the previous series the Simple Layout Approach. I call the design approach in this series the Elaborated Layout Approach. In this last part of the series I give you a summary of the two design approaches. I also give you the advantages and disadvantages of the two approaches. Everything in these two series is my conception.

Author Info:
By: Chrysanthus Forcha
Rating: 5 stars5 stars5 stars5 stars5 stars / 5
July 01, 2009
TABLE OF CONTENTS:
  1. · Concluding a Menu for All Browsers
  2. · Important Attributes
  3. · Elaborated Layout Approach
  4. · Advantages of the Simple Layout Approach

print this article
SEARCH DEVARTICLES

Concluding a Menu for All Browsers
(Page 1 of 4 )

Introduction

The aim of these two series is to come up with web page menu code that can be used by all browsers, without any of its code segments being specific to any particular browser. We have achieved this, from a practical point of view.

Simple Layout Approach

The Layout

We look at the summary of the Simple Layout Approach here. The main menu (horizontal bar) is in a single row table. You have another table of rows and columns for the sub menus. A link is in a SPAN element. You can have more than one SPAN element in a cell, but only one can be shown at a time. A sub menu is displayed by showing SPAN elements in consecutive table cells in a column.

You have three other tables having the same structure as the table for the sub menus. One of the tables is called the Copy Table, another is called the Boolean table and the third is called the Number table. The value of the display property of these three tables is "none." So they are not seen on the web page.

The Copy table holds copies of the SPAN elements at their original states. None of the SPAN element at its original state can be seen. Whenever you need to clear the table for the sub menus, you just make a copy of the corresponding SPAN elements from the copy table to the table for the sub menus.

For each cell showing a SPAN element, the corresponding cell in the Boolean Table has the content "true." The JavaScript code uses this in order to show or remove sub menu items. For each cell showing a SPAN element, the corresponding cell in the Number table has the number part of the ID of the SPAN element. The JavaScript code uses this in order to show or remove sub menu items.


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-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials