A Vertical Menu for All Browsers - Layout with Vertical Main Menu
(Page 2 of 4 )
The main table of this series, which held the drop down and sub menus, is not used here. Instead, the table for the main menu is given an additional cell to hold the drop down and sub menus. We now call the table for the main menu the main table.
In the previous case, the main table held the drop down and sub menus; the table for the main menu was different. The main table here has only one row and only two cells. The first cell holds the table with the main menu items. The second cell holds all the drop down and sub menus. The outline diagram for the main table is:
Table with main menu items | The rest |
Fig. 17.1
This table has the value "inline" for its display property. This allows elements on the BODY to appear on its right side, after the second cell. The next diagram shows the main table with an inner table containing the main menu items.
Fig. 17.2
Note that all the main menu items now have the ‘>’ character. This is because a drop down menu now appears on the right of its main menu item. So we have a table inside the first cell. Each cell of the inner table has a link. Each of these cells and a link form a main menu item. The next diagram includes the first drop down menu, that is, the drop down menu resulting when the mouse pointer is over the “Main Link 0” item.
Fig: 17.3
The first drop down menu is a table. The initial and default value for its display property is "none." When the mouse pointer goes over the “Main Link 0” item, it is changed to "block." All the sub menus work in this way. They are all in the second cell with the value of their display property set to "none." When any are to be seen, their display property is set to "block."
All the drop down menu tables have the value of absolute in their position property. This property is in their style attribute. None of them has the left and top properties in their style attribute. In this way, they remain at the position, where you put them in the normal flow. Any drop down menu or sub menu that is to be displayed has a z-index value of 10, so that it will appear covering other elements.
Note: make sure you give the following attribute to the second cell of the main table.
valign="top"
If you do not do this, the drop down or sub menus will appear shifted downwards.
The third, fourth and fifth drop down menus have been configured in the same way as the first. Remember that the sub menu produced from the fifth drop menu has been omitted here, for simplicity. Well, the third, fourth and fifth drop down menu tables are each in a table. This is to enable the top edge of the drop down menu to be at the same level as the top edge of the corresponding main menu item. We look at the details of this in the next section.
Next: Third, Fourth and Fifth Drop Down Menus >>
More HTML Articles
More By Chrysanthus Forcha
