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

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 / 2
March 06, 2009
TABLE OF CONTENTS:
  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
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Creating a Common Browser Menu - Laying Out the Menu Items
(Page 3 of 4 )

We shall consider an example made up of five items in the menu bar. The TABLE in the DIV element has five rows and five columns in our example.

Outline of Main Menu

This is the outline of the main menu.


Main link 0

v

Main link 1

v

Main Link 2

v

Main Link 3

v

Main Link 4

v


You have the first item, Main link 0, followed by its drop down button, v. You have the next item, Main link 1, followed by its drop down button, v, and so on until the fifth item, Main link 4, followed by its own drop down button.

Outline of Vertical Menu List

This is the outline of the DIV element and its content:

<DIV>

Sub link 00

Sub Link 01

Sub link 02

Sub link 03

Sub link 04

Sub link 10

Sub link 11

Sub link 12

Sub link 13

Sub link 14

Sub link 20

Sub link 21

Sub link 22

Sub link 23

Sub link 24

Sub link 30

Sub link 31

Sub link 32

Sub link 33

Sub link 34

Sub link 40

Sub link 41

Sub link 42

Sub link 43

Sub link 44

</DIV>

As we said, the DIV element has the HTML TABLE inside. Assuming that each item in the vertical list from a drop down button does not have a sub vertical list, then the above table outline shows the cell contents. Each cell has a link element (<a></a>). The numbers show you how to identify them. Counting (indexing) begins from zero. The first row is row zero, the second is row 1, and so on. The first column is column zero, the second is column 1, and so on. With the identification of the links, each number begins with two digits. The first digit is the row number; the second is the column number.


blog comments powered by Disqus
HTML ARTICLES

- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5
- BBC Adopts HTML 5, Mozilla Addresses Issues
- Advanced Sticky Footers in HTML and CSS
- HTML and CSS Sticky Footers
- Strategy Analytics Predicts HTML5 Phones to ...
- HTML5 Guidelines for Web Developers
- Learning HTML5 Game Programming
- More Engaging CSS3 and HTML Background Effec...
- Engaging HTML and CSS3 Background Effects
- More Web Columns with CSS3 and HTML
- Columns with CSS3 and HTML
- Creating Inline-Block HTML Elements with CSS
- Drag and Drop in HTML5: Parsing Local Files

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 10 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials