Feb 05

Create a Menu Tree with CSS

Filed under: Tutorials

In this article I’ll show you how to get rid of the stock disc that is on the typical unordered list <UL>. This solution will work no matter how many characters are in your list item <LI>.

You’ll create two images, throw a little CSS code in the mix, and end up with a very flexible system that will grow with almost anything you throw at it. You can use the already present colors to help your lists tie in with the design. I’ve used this on a project and the client really liked how it turned out. So continue reading and I’ll guide you step by step on how to add this customization to your toolbelt. Your clients will love you for it.

View the demo.

Step One: Create Two Images

Open up your image editor of choice and create a new file 16px wide by 100px tall, or however tall you think a single list item will be in your situation.

You can get a little creative with it, but I drew a simple 1px line. Setting the background transparent will keep your images future-proof if you ever want to change the background color of the site.

So you will end up with two images, one relatively tall with the horizontal bar at the top and another relatively square with the horizontal part ending where it meets the vertical.

Step Two: Write the CSS Code

Now open up your code editor of choice. I’ve used Dreamweaver forever, but I’m starting to use Notepad++ more often.

Clear All Inherent Styling

The first part of the CSS code is extremely important because Internet Explorer still has the majority of the browser share. It is good practice to have a reset file like this one. If you’re not going to use a reset.css file, you must clear the layout of your list.

ul {margin:0;padding:0;}

Create The Menu Container

This is optional, in case you already have a home for your menu. But all subsequent code assumes that the ’submenu’ class is applied to your list’s parent.

.submenu {
	width: 200px;
	border: 1px solid #555;
	font: normal bold 12px Verdana, Arial, sans-serif;
	padding:10px;
	color: #3877C4;
	}

UL Code

This code will format the unordered list. Add a little top and bottom padding for spacing. The left padding offsets the list from the header text.

.submenu ul {
	padding:10px 0 10px 20px;
	}

LI Code

The first line puts in a little breathing room if/when your text expands into multiple lines. Setting the ‘list-style-type’ to none gets rid of the stock icon. To end up, we apply a little bottom padding for visual goodness.

.submenu li {
	line-height:15px;
	list-style-type:none;
	padding:0 0 8px 0;
	}

Second Tier UL Code

We are now into the second level of the menu. A little top padding pushes this UL down from its LI parent. The left padding indents the UL and can be modified to your taste.

.submenu li ul {
	padding: 5px 0 0 18px;
	}

Second Tier LI Code

Now we’re into the good stuff. Most of your second tier list items will use this piece of code. Make sure you use the correct path to your image file. This is the tall graphic I had you create earlier. Of course we don’t want it to repeat. And the left padding pushes your LI text over so we can see your shiny new image.

.submenu li ul li {
	background-image:url(ul-long.gif);
	background-repeat:no-repeat;
	padding-left:18px;
	}

Second Tier LI Code – Last LI

So up until this point we have only used a single class, the one applied to the container. To be compatible with all browsers we must employ a class to put the endcap on the list. Now we use the smaller graphic of course. We reset the bottom padding to zero because the second tier UL code does this already.

.submenu li ul li.end {
	background-image:url(ul-end.gif);
	padding-bottom:0;
	}

Second Tier LI Code – :last-child

This code is not suggested for deployment. This is only for demonstration purposes.

So as you might know, Internet Explorer likes to employ its own dialect of CSS. One piece of very useful code that is missing in all IE flavors is the :last-child pseudo class. To be fair, :first-child works fine. When not in demonstration mode with three different menus you’ll want to use the code below. To facilitate the demo of :last-child alongside two other menus I have dropped a ‘lastchild’ class on the second tier UL on the demo page, third box.

Open the page in Firefox, Chrome and Safari. You’ll see no difference in the far right menu. Open in IE and you’ll get the standard LI code with the tall graphic on the last LI. Maybe they’ll add it in IE 8.1?

.submenu li ul li:last-child {
	background-image:url(ul-end.gif);
	padding-bottom:0;
	}

View the demo.

Final Thoughts

Try out some of these ideas to spruce up my simple design.

• Arrow on the right side of the images
• Curve the vertical line into the horizontal line
• Use an animated gif to make your list more dynamic
• Use a single sprite instead of two images.

If you’re going to use alpha transparency in your image, you’ll want to save as a PNG-24. Doing this will skew your colors slightly in Internet Explorer. This is because of the gamma correction saved in the image. Every browser except IE disregards the gamma value. I’ll show you how to correct this in an upcoming article.

Let me know how you liked this tutorial. Any comments and suggestions are welcome.