| CSS |
Explanation |
| <style type="text/css"> |
|
body {
margin: 0;
padding: 0;
} |
Setting margin and padding to 0 for the <body> tag ensures there are no ubnforseen gaps at the left, right and top margins that some browsers may put in. Some browsers add margins, others add padding. |
#menuwrap {
position: relative;
margin: 20px auto;
width: 410px;
} |
This rule sets the size of the menu to 410px wide, and centres it in the page. The "position: relative" ensures the layers used in the menu stay in the same position relative to the menu. Without this, the layers would appear to move around the page as the browser window is resized. |
#menuwrap table {
margin: 0;
border-left: 1px solid green;
border-right: 1px solid green;
border-collapse: collapse;
} |
All tables in the menu are given left and right solid, single line borders. |
#menuwrap td {
width: 100px;
text-align: center;
} |
The table cells are all set to 100px, with centred text. If 100px is not enough (allow for text resizing) then the menu container will also have to be adjusted - this is set to 400px wide, 4 main menu items at 100px each, plus 2px for the borders on each cell. |
#menuwrap td a {
display: block;
width: 100%;
text-align: center;
padding: 0;
text-decoration: none;
font-family: arial, sans-serif;
font-size: small;
border-bottom: 1px solid red;
} |
This rule styles the text links in the menu. "display: block" means that the entire table cell will be used as the hyperlink, not just the text. Underlining is also removed. Note that no provision has been made to colour the links - the browser defaults of blue for a link, red=active, purple=visited will be used.
A red bottom border is added to make things look "pretty". |
#menu {
position: absolute;
z-index: 3;
width: 410px;
} |
The main menu container is absolutely positioned. The default attributes for top and left are used positioning the menu at the top left of it's container (the <div id="menuwrap">). "z-index: 3" allows the menu to be seen over the background image - see below. |
#menu table {
border: none;
} |
The borders are removed from the main menu. Since buttons will be used here borders are superfluous. |
#menuwrap #menu a {
border: none;
} |
Remove borders from the links in the main menu. |
#menuwrap #menu td {
border: none;
} |
Borders are removed from the main menu table's cells. |
#leaf2 {
position: absolute;
top: 19px;
left: 102px;
width: 100px;
z-index: 4;
visibility: hidden;
} |
These three rules define the drop down menu leafs. Each is absolutely positioned below the corresponding main menu link.
They are given "z-index: 4" so that they will show over everything when made visible. Of course, initially these leaves are hidden. |
#leaf3 {
position: absolute;
top: 19px;
left: 204px;
width: 100px;
z-index: 4;
visibility: hidden;
} |
#leaf4 {
position: absolute;
top: 19px;
left: 306px;
width: 100px;
z-index: 4;
visibility: hidden;
} |
#bck {
position: absolute;
top: -10px;
left: -10px;
width: 430px;
z-index: 2;
visibility: hidden;
} |
This styles the background image. Whenever a menu leaf is made visible, so is this image.
The image itself is transparent, so cannot be seen even when "visible". Its job is to provide a mouseover event to close all the visible menu leaves when the mouse is moved off the leaf or main menu. The image therefore completely covers the menu, with a bit of overlap. This should be large enough to accommodate any text resizing. |
#bck img {
border: none;
} |
Remove the border from the background image |
| </style> |
|