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.
- Use a wide background image and overlay it with a table.
- Use a table cell with bgcolor defined for a solid color sidebar.
- 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
- To learn about how to assign link colors differently for your sidebar
than your content area, see Link Colors By Section.
- I like to use · (· 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.
- 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">
- 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.
- As you work on your layout, I'd recommend Robert Crooks' article:
Street Level:
Designing Page Layout Tables.
- Another good article on these techniques is
HTML Tips for Border Backgrounds
by Shirley Kaiser.