Home arrow HTML arrow Layout for a Menu for All Browsers

Layout for a Menu for All Browsers

In this part of the series, I explain the nature of the menu items and how they fit into the tables of the sub menus and main menu. I spend the rest of the article talking about the style attribute of the tables of the sub menus. A lot of the design in this series lies in the configuration of the tables. In fact, we shall spend more time talking about the configuration of the tables than we shall spend talking about the JavaScript code.

Author Info:
By: Chrysanthus Forcha
Rating: 4 stars4 stars4 stars4 stars4 stars / 4
May 13, 2009
  1. · Layout for a Menu for All Browsers
  2. · The Style Attributes
  3. · Tables for the Drop Down Menus
  4. · More on the Second Drop Down Menu

print this article

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

Details of the Layout of Sub Menus

A sub menu item, like a main menu item, consists of a table cell and a link in the cell; you may also have the > character. The background color of this cell is changed when the mouse pointer comes over it.

A sub menu is a table of one column. Each row has one cell, and that cell has one link (one A element).

Ordinarily, a drop down menu is also a table of one column. Remember, drop down menus are also sub menus. I use the phrase here to make the distinction between what you get from a main menu item and what you get from the drop down menu itself.

When a drop down menu would produce a sub menu, the drop down menu is made up of a table of tables. In this case, you have one table with only one row (with its cells). The content of each of these cells is a table. Each of these tables is a sub menu.

In the case where a sub menu appears lower within the sub menu area, the table has another table; we shall see the details and reason for this later.

As I have been saying, there is a main table for the sub menus. This main table has only one row. In our example, there are five cells in the table (corresponding to the five main menu items above it). The content of each of these cells is the table for a drop down menu.

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