WebDevRes: SideBar Menu Tutorial

This tutorial will show you how to do several forms of left-side menu bars in HTML. It includes simple example code that should get you started on your own.

There are currently three basic methods commonly used for doing side menu bars. While there is an infinite variety of designs, most can be built from these three basic simple designs.

  1. Use a wide background image and overlay it with a table.

  2. Use a table cell with bgcolor defined for a solid color sidebar.

  3. Use images within a table cell for the sidebar.

A fourth method is sometimes used where you use CSS (Cascading Style Sheets) to completely define the layout and position, but it's seldom used at this point since browser support for CSS is still unreliable.

Read through the directions and notes to learn more about each method and some of the tricks for each. Feel free to send me any additional questions, notes, corrections or suggestions. -- jeff wilkinson

Other Notes and Resources

  1. To learn about how to assign link colors differently for your sidebar than your content area, see Link Colors By Section.

  2. I like to use &#183; (· or ·) for the side bar bullets, though you can use whatever you like including image bullets. I'd recommend against using regular html unordered lists (<UL>, <LI>) since they indent the items quite a lot.

  3. These examples leave the default page margins at their defaults. To get rid of all margins in both MSIE and Netscape, use the following attributes in the BODY tag. <body leftmargin="0" topmargin="0" rightmargin="0" marginwidth="0" marginheight="0" bgcolor="#FFFFFF">

  4. These examples use a page layout that is resizable as the browser window is resized. The tables are set as width="100%" to achieve this. If you need a fixed with design, you just change that one setting. You can center the result by then putting <DIV ALIGN=CENTER></DIV> tags around the table.

  5. As you work on your layout, I'd recommend Robert Crooks' article: Street Level: Designing Page Layout Tables.

  6. Another good article on these techniques is HTML Tips for Border Backgrounds by Shirley Kaiser.