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.
Next: Outline with Vertical Sub Menu Lists >>
More HTML Articles
More By Chrysanthus Forcha