V4 Menu CSS

Sponsors - Spoono Host

Setting up the Unorganized List
If you've ever taken a peak at our source code, you'll notice that our navigation menu appears as a beautiful and incredibly simple unorganized list (the UL tag). Through the wonders of CSS, we are able to make the list itmes (LI tags) of an unorganized list display all on the same line (inline) instead of the normal one item per line (block) format. We also remove the default circles that appear to the left of each list item. To do that we define the following style. (Don't copy and paste it yet because we'll add more to it later in the tutorial).

#nav ul, #nav li {
	display: inline;
	list-style-type: none;
}

After implementing that style, a UL with the id of "nav" will display as the following:

• First
• Second
• Third

Menu Buttons, Hover States, and Active States
The next step is to define your the colors, borders, fonts, and spacing that will make up your menu buttons and their hover states. For this tutorial, I'll explain the menu we use for our Cocoa flavor. The two styles we use are:

#nav a, #nav a:link {
	background: #ebd3b4;
	border: 1px solid #b28448;
	border-left: 5px solid #b28448;
	color: #4c2e00;
	display: inline;
	font: bold 10px verdana, arial, sans-serif;
	line-height: 22px;
	margin: 0 0 0 2px;
	padding: 2px 3px;
	text-decoration: none;
}

#nav a:hover {
	background: #ffefda;
	border: 1px solid #a67433;
	border-left: 5px solid #a67433;
}

#nav a.active, #nav a:link.active, #nav a:hover.active {
	background: #fff;
	border: 1px solid #520;
	border-left: 5px solid #520;
	color: #000; }

The first style defines a light brown background color, 1 pixel border (and on all sides but the left with is defined to have a 5 pixel width), a bold 10 pixel font, and various spacing attributes. The second style makes the background and borders change to lighter colors when hovered over. The third style controls the way the menu buttons appear after they are clicked and a submenu is displayed. Note that the third class defines a new class called "active" which will be called by the Javascript which accompanies the menu. Class "active" makes the background turn when, the borders darken, and the text inside the menu turn black.

Tweaking
If all browsers played nicely, the code as it is might work, but in order to sort our a few minor differences in how browsers interpret margins, floating, and such, we added a basic #nav style that covers the full menu and a margin and padding attribute to the #nav a and #nav a:link styles we defined above. So, now we have:

#nav {
	display: inline;
	float: none;
	height: 20px;
	margin: 0;
	padding: 0;
	text-align: left;
}

#nav ul, #nav li {
	display: inline;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

Putting It Together
Now you can create an html file, link to your stylesheet, and write the html part of the menu. The html should look like this:

<ul id="nav">
<li><a href="http://www.spoono.com/">Home</a></li>
<li><a href="javascript:;" onclick="buttonClick(event, 0)">Graphics</a></li>
<li><a href="javascript:;" onclick="buttonClick(event, 1)">Programming</a></li>
<li><a href="/webhosting/">Web Hosting</a></li>
<li><a href="/interviews/">Interviews</a></li>
<li><a href="javascript:;" onclick="buttonClick(event, 2)">Information</a></li>
</ul>
<div id="subs"></div>

Notice that there is a div defined below the tutorial with the id "subs." This controls the area where the submenus display. Basically, you just need to set it so the font and spacing looks pleasing to your eye. We added the following style for it (naturally you have to change some attributes like the width and others according to your menu):

#subs {
	background: #fff;
	float: left;
	font: bold 10px verdana, arial, sans-serif;
	margin-bottom: 5px;
	padding: 5px 0 0 0;
	text-align: left;
	width: 451px;
}

That is pretty much it for the CSS. You'll notice that there are some Javascript functions called in the CSS, and there will also be an external Javascript file referenced in the complete code. That's all explained in the corresponding Javavscript tut. Now you might want to view a working example of the menu or download the full CSS code for it. And if you haven't been there already, head on over to the V4 Menu Javascript tutorial.