Right now, you should have a few website pages using HTML and CSS up and running, which you can access via an Internet browser. What you're missing is a menu, to navigate between those pages. This tutorial is going to go through the basics of writing a menu, still using CSS. I will show you how to write both a left hand menu, a right hand menu and a top menu, so you can choose your favourite. That said, it's not possible for me to cover every single possible menu configuration in the world. If you've got stuck adapting my tutorial to fit your website, please leave me a comment with a link to your website and I'll try to help out.

Background Information

A menu is the most important part of any website and you should spend some time thinking about it. Unless visitors can clearly and easily navigate from one page of your site to the next, they will simply leave. It's absolutely critical to think about why people are visiting your site and what they want to find. Be careful to organise your menu well - personally I think simplicity is key. The more links you have, the more chances someone will click on something they don't want, get frustrated, and leave. I also think it's important to explain where your links go. If you have a link labelled "Search", most visitors will be expecting a search box. They won't be too happy if you link them to Google. So, write "Link to Google in Russian" or "Search my site". Be as specific as you can, but don't waffle. Worse yet, don't open up your links in new pages. Most people are quite capable of opening their own new windows if they want them, or using the back button if they want to come back to your website. Finally, your menu should be clearly located so that people can instantly find it. The chances of someone finding exactly what they want on the first page they visit is slim - they need to know what their options are fast. Keep your menus consistent between pages too - don't move it around the page unnecessarily. Sometimes it helps to look at other websites for inspiration. Check out the worlds worst website to keep you on the straight and narrow.

Instructions

• Step 1: There are two parts to writing any new part of a website. First, you need to write your HTML, and then you need to write the corresponding CSS. You could write the CSS first, but that's the equivialent of painting a wall before you've built it. So, let's dive right into a HTML template. It doesn't matter which one, but I've chosen my history template.

• Step 2: Regardless of whether you want a left-hand menu or a right-hand menu, the HTML code is the same. You'll probably want to put your code below your header, but just above your content.

• Step 3: So if you look at my site you will see that the menu is in desperate need of some styling. What is more important right now is that the basic menu is correct. Have you got all the menu items you want right now? Do all the links work - you should always be the first person to click your links. Are there any spelling errors?

• Step 4: Once you're happy with your menu, you need to copy and paste the same code (from the <div id="menu"> to the </div>) into the same place for every page of your website. Highlight the code you want to copy and select "Copy" (or CTRL-C). Go to your other templates, position your cursor carefully, and select "Paste" (or CTRL-V). If you make a mistake, use the "Revision History" in the top right hand corner of the Edit Template page to undo your changes. Remember though that you're changes aren't saved until you hit "Update".

• Step 5: If you look at the diagram below, I've basically shaded all the different CSS elements that we have. First, there is the menu div (in purple), then there is the unordered list (not coloured), then there is the list items (in yellow). The green represents the list title, identifiable because it is a hyperlink. The blue represents the description div. For any link, there are also 3 possible states: an unvisited link, a visited link, and a link you're hovering your mouse over. That gives us 7 new CSS elements to play with (menu, list, list item, visited hyperlink, unvisited hyperlink, hovering hyperlink, description).

• Step 6: Now it's time to edit the CSS and make the menu look good. Since you'll only want one kind of menu, according to your preference, I'll start with the instructions for a top menu (path a, starting from step 7a), then a right menu (path b, starting from step 14b), then a left menu (path c). If you read all three paths, you may notice that we're using the same classes (such as menu and description), but just tweaking a few of the settings. This is what CSS is all about: one piece of code, infinite number of styles.

• Step 7a: Edit your CSS file, and scroll to the bottom - we'll put all the new code just after the footer class (i.e. at the very end of the document). You've probably noticed the little box called "Template Size" at the bottom of the screen before. This defines the number of lines that the main box has: since our code will get longer and longer, why not increase this value to '99'? Just enter 99, and hit update.

• Step 8a: Based on the diagram in step 5, we'll start with the outer styles and work our way in. This means that we'll start by defining what we want the menu <div> to look like. Add the following code to the bottom of the CSS template.

• Step 9a: If you look at my site at this step you'll see that the menu has moved much further to the left, and is now just underneath my heading. Now let's get rid of those ugly bullet points. Still in the CSS file, at the end, write the following:

• Step 10a: If you look at my site at this step you'll see that the bullets have just disappeared. Now we want to put everything onto one line, rather than the 4 lines it currently takes up. Still in the CSS file, at the end, write the following:

• Step 11a: If you look at my site at this step you'll see that the blue links are now left-aligned with the heading. We're ignoring the description for now, since we'll shortly be getting rid of it altogether. Right at the moment, our links are still the default blue, underlined, Times New Roman style. Let's make them a bit cuter, applying a style for when they haven't been clicked, when they have been clicked, and when you're hovering your mouse over them. Still in the CSS file, at the end, write the following:

• Step 12a: If you look at my site at this step you'll see a few changes with the links. Try hovering your mouse over a link (if the links are unvisited), or try clicking a link. Finally, let us get rid of the unsightly descriptive text. Still in the CSS file, at the end, write the following:

• Step 13a: That's it. We're done. We have a nice little top menu that fits snugly underneath the main heading. See it for yourself at my site at this step. Next up is the right hand menu.

• Step 14b: Now we're going to implement a right hand menu. There is some overlap between the top menu above, so it might be worth your while just glancing over it, in case I say something different! First, let's have a look at our menu as it stands now (if you've implemented steps 1-6 in path b). Check out my site at this step. Now, edit your CSS template, and scroll to the very bottom, right after the last curly bracket.

• Step 15b: Based on the diagram in step 5, we'll start with the outer styles and work our way in. This means that we'll start be defining what we want the menu <div> to look like. Add the following code to the bottom of the CSS template. We'll move the menu to the right hand side, we'll give it a border, and a background colour to make it stand out, and sort out the margins so that the main text doesn't overlap the menu.

• Step 16b: If you look at my site at this step you'll see that the menu has moved to a grey box on the right hand side. However, there are still bullet points that seem to be taking up a lot of space so we're going to get rid of them, and move the text margin over to the left (using a negative value) so that they overlap the hidden bullet points. This step bears close ressemblance to steps 9a and 10a, so refer back to those for further clarification. Still in the CSS file, at the end, write the following:

• Step 17b: If you look at my site at this step you'll see that the bullets have gone, making more room for our text. However, our links are still the default blue, underlined, Times New Roman style. Let's make them a bit cuter, applying a style for when they haven't been clicked, when they have been clicked, and when you're hovering your mouse over them. Still in the CSS file, at the end, write the following:

• Step 18b: If you look at my site at this step you'll see a few changes with the links. Try hovering your mouse over a link (if the links are unvisited), or try clicking a link. Finally, let us make the descriptive text look a little nicer. Still in the CSS file, at the end, write the following:

• Step 19b: That's it. We're done. We have a nice little right hand menu that stands out from the rest of the text, but doesn't take up too much room. See it for yourself at my site at this step. Next up is the left hand menu.

• Step 20c: Finally we'll implement a left hand menu. There is some overlap between the two menus above, so it might be worth your while just glancing over them too, just in case I say something different! First, let's have a look at our menu as it stands now (if you've implemented steps 1-6 in path b). Check out my site at this step. Now, edit your CSS template, and scroll to the very bottom, right after the last curly bracket.

• Step 21c: Based on the diagram in step 5, we'll start with the outer styles and work our way in. This means that we'll start be defining what we want the menu <div> to look like. Add the following code to the bottom of the CSS template.

• Step 22c: If you look at my site at this step you'll see that the menu has moved to fit the space on the left hand side and the main text is back where it was. However, just like in the other paths, there are those pesky bullet points that seem to be taking up a lot of space so we're going to get rid of them. However, we're not so desperate for space so we won't move the text margin over to the left to overlap the hidden bullet points as in step 16b. Still in the CSS file, at the end, write the following:

• Step 23c: If you look at my site at this step you'll see that it's looking more beautiful by the minute. The text is all nicely centered in the space we left for it, the bullets are gone, and we have lovely borders. Now we want to upgrade the boring fonts to something a little bit snazzier. Oh yeah! Still in the CSS file, at the end, write the following:

• Step 24c: If you look at my site at this step you'll see the links are looking good. Don't forget to try hovering your mouse over a link (if the links are unvisited), or try clicking a link. Finally, let us make the descriptive text look as cool as their linked neighbours. Still in the CSS file, at the end, write the following:

• Step 25c: That's it. We're done. We have a beautiful left hand menu that stands out from the rest of the text, but doesn't overly demand attention. See it for yourself at my site at this step.

• Step 22c: If you look at my site at this step you'll see that the menu has moved to fit the space on the left hand side and the main text is back where it was. However, just like in the other paths, there are those pesky bullet points that seem to be taking up a lot of space so we're going to get rid of them. However, we're not so desperate for space so we won't move the text margin over to the left to overlap the hidden bullet points as in step 16b. Still in the CSS file, at the end, write the following:

• Step 23c: If you look at my site at this step you'll see that it's looking more beautiful by the minute. The text is all nicely centered in the space we left for it, the bullets are gone, and we have lovely borders. Now we want to upgrade the boring fonts to something a little bit snazzier. Oh yeah! Still in the CSS file, at the end, write the following:

• Step 24c: If you look at my site at this step you'll see the links are looking good. Don't forget to try hovering your mouse over a link (if the links are unvisited), or try clicking a link. Finally, let us make the descriptive text look as cool as their linked neighbours. Still in the CSS file, at the end, write the following:

• Step 25c: That's it. We're done. We have a beautiful left hand menu that stands out from the rest of the text, but doesn't overly demand attention. See it for yourself at my site at this step.

• Step 22c: If you look at my site at this step you'll see that the menu has moved to fit the space on the left hand side and the main text is back where it was. However, just like in the other paths, there are those pesky bullet points that seem to be taking up a lot of space so we're going to get rid of them. However, we're not so desperate for space so we won't move the text margin over to the left to overlap the hidden bullet points as in step 16b. Still in the CSS file, at the end, write the following:

• Step 23c: If you look at my site at this step you'll see that it's looking more beautiful by the minute. The text is all nicely centered in the space we left for it, the bullets are gone, and we have lovely borders. Now we want to upgrade the boring fonts to something a little bit snazzier. Oh yeah! Still in the CSS file, at the end, write the following:

• Step 24c: If you look at my site at this step you'll see the links are looking good. Don't forget to try hovering your mouse over a link (if the links are unvisited), or try clicking a link. Finally, let us make the descriptive text look as cool as their linked neighbours. Still in the CSS file, at the end, write the following:

• Step 25c: That's it. We're done. We have a beautiful left hand menu that stands out from the rest of the text, but doesn't overly demand attention. See it for yourself at my site at this step.

• Step 22c: If you look at my site at this step you'll see that the menu has moved to fit the space on the left hand side and the main text is back where it was. However, just like in the other paths, there are those pesky bullet points that seem to be taking up a lot of space so we're going to get rid of them. However, we're not so desperate for space so we won't move the text margin over to the left to overlap the hidden bullet points as in step 16b. Still in the CSS file, at the end, write the following: