Dropping In a Side Menu

As I said previously, you've basically created a website. Add some pages, link up the main menu and you're ready to rock!

So why are we still here? Take a peak at some content rich websites such as Wired.com. Click on "Technology" in the main menu located up top. You see those little links under "Technology", those are the topics related to the technology section. Think of these as folders. You have a folder named "Photos", within that folder you have sub-folders for the types of photos named "trees", "landscapes", "people" and inside those folders are the photos related to that type.

It's the same as if we have a section in the main menu called "Technology", inside that section you find topics like "Computers", "Gadgets" and "Internet" and within each topic are articles pertaining to that topic. Just some simple editorial organization, some call it information architecture but who am I to disagree.

Well what we need to do here is add a secondary menu to our page so the topics under each section are navigable to the user. Before that, we must split up the main area of the page into two columns. Sounds simple right? Again, the answer is no. There's no specification in CSS for columns, at least until CSS 3.0 shows it's face. So here's one way around that (there are many other ways if you look around, feel free).

First, add a new <div></div> above the <div id="page-contents> in your document and give the id "page-column".

All good? Great, jump into your CSS (stylesheet) document and set-up the id for "page-column", give it a width of 175 pixels and for this tutorial we'll set it to the left using the "float" property. You can always move the column to the right later.

Next, head over to the "page-contents" ID in our stylesheet. We're going to add a margin to this division. This will prevent the content of your page from wrapping around the column if the content is longer than the column. This margin will lay behind the column.

Since the column is 175 pixels wide, our margin should be the same size.

Remember back in Containing the elements and content we added a "clear: both" property and value to the footer ID? Here's the reason, clearing both means no elements can lay to the left or right of the footer <div> preventing the footer from entering the page content or column of our page. Without this, the footer could creep into the shorter division. It's along the sames lines as why we used a margin for the "page-contents" division.

Now let's add a border for good measure to separate the column and the content. It's a good idea to add a border to both the "page-column" and "page-contents" ID's so if one becomes longer than the other, the border will always extend to the end of the page.

Finally, we need the topic menu. This is almost identical to how we dropped in the main menu. The only real difference is since we want these links stacked upon each other we won't use "float: left" in our stylesheet. Alright, add your unordered list within the "page-column" <div></div>.

And here's the CSS for the unordered list, feel free to style it as you want.

All set? Double-check it, download the sample and get on to some more styling goodness.