Home arrow HTML arrow Page 2 - Creating a Common Browser Menu

Creating a Common Browser Menu

When coding web pages, one always has to keep in mind that not all browsers handle the same code in the same way. This can be painful to deal with when coding certain features, such as menus with multiple drop-downs. Wouldn't you like to add a menu that features drop-downs and can be handled cleanly by any browser to your web site? Keep reading; this ten-part series walks you through building a common browser menu.

Author Info:
By: Chrysanthus Forcha
Rating: 5 stars5 stars5 stars5 stars5 stars / 5
March 06, 2009
  1. · Creating a Common Browser Menu
  2. · Horizontal Main Menu
  3. · Laying Out the Menu Items
  4. · Outline with Vertical Sub Menu Lists

print this article

Creating a Common Browser Menu - Horizontal Main Menu
(Page 2 of 4 )

Menu Description as seen by the User

There is a horizontal bar of menu items around the top of the BODY of your web page. Each menu item is a link to some web page (in the site). To the right of each menu item is a small drop down button. When you click this drop down button, you see a vertical list of menu items (links) below the item in the bar with the drop down button. This list is related to the menu item above it.

Each item in the vertical list can produce its own related vertical list to its right. However, the last vertical list from the last drop down button produces its own related vertical list on the left; we assume there is no space beyond the last drop down button (of the main menu).

The main menu (horizontal bar) may have a header or a banner above it. In other words, you can place the main menu anywhere you want on the page. Each drop down menu would cover elements in its area that are below the horizontal bar.

The Horizontal Menu Components

The main menu (horizontal bar) is in an HTML TABLE element. You place this TABLE element in the page according to the CSS normal flow. The other HTML elements of your web page are below this bar, according to the CSS normal flow. Below this horizontal bar is an HTML DIV element, which does not follow the CSS normal flow, in the sense that it is in front the HTML elements below the horizontal bar. It is this DIV element that displays the drop-down menus.

This DIV element has an HTML TABLE, made up of rows and columns. Each vertical list is a column in this TABLE. When a vertical list is shown, it is actually some cell contents in a column that are shown, while the rest of the other table contents and the table and cell borders are not shown.

The background of the DIV element and the background of the table cells are transparent. On the other hand, the background of a menu item being displayed is not transparent. In this way you can see the menu items in front the BODY elements of the CSS normal flow. You see the elements of the normal flow that are behind the TABLE cells that are transparent. You do not see the elements of the normal flow that are behind the menu items of the table.

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