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.
Next: Laying Out the Menu Items >>
More HTML Articles
More By Chrysanthus Forcha
