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

A Menu for All Browsers


The aim of this series is to come up with code that can be used by all browsers without having code segments addressing the peculiarities of different browsers. I accomplished this in part in a previous series, but I needed to use extra code segments, and there were still some problems. This nine-part series addresses those problems while accommodating more browsers.

Author Info:
By: Chrysanthus Forcha
Rating: 4 stars4 stars4 stars4 stars4 stars / 3
May 06, 2009
TABLE OF CONTENTS:
  1. · A Menu for All Browsers
  2. · Tutorial arrangement of this series
  3. · The secret of the elaborated layout approach
  4. · Overall layout
  5. · The Main Menu

print this article
SEARCH DEVARTICLES

A Menu for All Browsers - Overall layout
(Page 4 of 5 )

The main menu is a small HTML table, similar to what we had in the previous series. However, here I did not include the drop down button (cells); there are no drop-down buttons. Each main menu item is a cell, which responds to the onmouseover event, which produces the drop down menu. I made this just for the sake of change. This is the table:


<table cellpadding="0" cellspacing="0" border="1" width="900">

<tbody>

<tr>

<td class="link" id="D0" onmouseover="dropDownMenu('D0')" width="125"><a href="mainlink0.htm">Main Link 0</a></td><td class="link" id="D1" onmouseover="dropDownMenu('D1')" width="200"><a href="mainlink1.htm">Main Link 1</a></td><td class="link" id="D2" onmouseover="dropDownMenu('D2')" width="250"><a href="mainlink2.htm">Main Link 2</a></td><td class="link" id="D3" onmouseover="dropDownMenu('D3')" width="200"><a href="mainlink3.htm">Main Link 3</a></td><td class="link" id="D4" onmouseover="dropDownMenu('D4')" width="125"><a href="mainlink4.htm">Main Link 4</a></td></tr>

</tbody>

</table>


In the previous series, the sub menus (drop down menus included) were in a DIV element; they were in one table, which was in the DIV element. Here, you have a main table that replaces the DIV element. You do not have any other (main) table in between this table and the sub menus (each of which is a small table).

The outline for the table of the sub menus is:


<table id=“MT”>

<tbody>

<tr>

<td>

<!—drop down menu table -- >

</td>

<td>

<!—drop down menu table with other cells (columns) for tables on its right -- >

</td>

<td>

<!—drop down menu table -- >

</td>

<td>

<!—drop down menu table -- >

<!—sub menu table produced by last drop down menu-- >

</td>

<td>

<!—drop down menu table -- >

</td>

</tr>

</tbody>

</table>


This main table for the sub menus has only one row. Each cell has a table where the value of the display property can be changed from "none" to "block" and vice versa. The second drop down menu is also a one-row table. It has three cells. Each cell contains a table. We shall look at the details later.

The last but one cell of the main table actually has two tables. The first one is the expected drop down menu; the second one is the sub menu produced by the last drop down menu. We shall see the details for this later. Go through the above table to appreciate it.


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