CSS Side Menu
The side menu consists of several sections of the cascading style sheet (css). Each section is an individual class that creates each area of the box that is the side menu. This has to be done because a section can only have one image tag per class. Let's look at each of the four classes it takes to make a side menu.
The first class is the ".topsidemenu". The code looks like:
| .topsidemenu { background: url(images/border.gif) repeat-x top; } |
This class tells the computer to pull up a background image. This image can be found in the "images" folder and the file name is "border.gif". Remember this is the single pixel image we worked with in the Side Left section. (Note: Keep in mind that the cascading style sheet is run from the "includes" folder, so it does not need to put "includes/" in the file address.) Then the rule says that this image should be repeated continually on the x-axis and be placed at the top of the area these rules are placed.
The next section, called the ".sidemenu" has a bit more rules. This is because this is where most of the work is done. These rules say:
| .sidemenu { background: #FFFFFF url(images/border.gif) repeat-y left; font-family: Arial, Helvetica, sans-serif; font-size: smaller; color: #000000 margin: 1px 1px 1px 1px; vertical-align: top; } |
The first rule defines the background. It first says to make the background color white with the HTML color code "#FFFFFF". It then says to also draw an image that is located in the images folder called "border.gif". Then, create this image repeatedly on the y-axis on the left side.
The next line looks as fonts. It says to print the text in Arial. If Arial is not available on the visitor's computer, use Helvetica. And if Helvetica is not available, use Sans-Serif.
The next two lines say that the font should be smaller than the font size defined in the "body" section. The font should also be in black with a one pixel margin all the way around it.
The last line says to put all of the content at the top of the section.
The next two sections complete the last two sides of the box for the side menu. These sections say the following:
| .rightsidemenu { background: url(images/border.gif) repeat-y right; } .bottomsidemenu { background: url(images/border.gif) repeat-x bottom; } |
The rule of the ".rightsidemenu" says to repeat the "border.gif" on the y-axis repeatedly and put it on the right side.
The rule of the ".bottomsidemenu" says to repeat the "border.gif" on the x-axis repeatedly and put it on the bottom.
The only thing to really change in these sections is the "background: #FFFFFF", "font-family", the "font-size" and the font "color". Make the changes to set up the side menu the way you want it. Save the file and upload it to the server to see you work.
