HTML for a Common Browser Menu - The Table Cell Contents in the DIV
(Page 3 of 4 )
A sub menu is gotten from a vertical set of table cell contents in the table in the DIV. Such a vertical set has to exist in a table column. In our code, the content of the table cell is not just the link; it is a SPAN element. Each link is in a SPAN element. Some SPAN elements have the ‘>’ sign. This symbol is outside the link (outside <a></a>), but inside the SPAN element preceded by at least one space.
Each SPAN element has an ID. The value of the display property of each SPAN element is initially set to "none." If the corresponding link is to be seen, script uses the ID of the SPAN element to set the display property to "block." If the ‘>’ sign is there, it would be seen as well. A table cell element having a SPAN element with the ‘>’ sign will produce a sub menu on its side, if the mouse pointer is over it.
The question you may ask is this: “If the value of the display property of the SPAN element is set to ‘none,’ does the table cell not collapse?” The answer is that each table cell has been given a definite width and height, so if the cell is empty, it does not collapse.
A typical SPAN element in a cell is:
<span id="S13" style="display:none"><a href="sub13.htm">Sub link 13</a></span>
The ID of each SPAN element begins with S followed by the row number and column number of the cell.
The table cells in the DIV element have IDs but I have not indicated them above. I did not want the above code segment to be too long. When you want to see the content of a table cell, the script uses the ID to give a background color to the table cell. At that point the table cell is no longer transparent, and the elements behind that particular cell are not seen. When the mouse pointer hovers over a table cell whose content is displayed, the script uses the ID to modify the background color of the table cell. The ID of each of these table cells begins with TD followed by the row number, and then the column number.
Next: The Style Sheet >>
More HTML Articles
More By Chrysanthus Forcha
