What’s on the Menu?

Website navigation or menus if you will are an important, no required feature of every website. In one way or another there is going to be some grouping of hierarchical links to related or alternate pages within a directory. But, what is the best way to create a menu? Whether it be horizontal or vertical a navigation menu should always start out the same way.

The HTML base of a navigational menu is often represented with a unordered list <ul>, like so.

<ul id="primary-navigation">
	<li><a href="" title="">menu item one</a></li>
	<li><a href="" title="">menu item two</a></li>
	<li><a href="" title="">menu item three</a></li>
	<li><a href="" title="">menu item four</a></li>
</ul>

The use of an unordered list is debatable, but in my opinion an unordered list is more logical than an ordered list, because we are not always going be leaving the menu items in order. And more reasonable than a definition list, because we are not defining a list of anything, we are merely listing navigational items, however, that being said, if you were to have a more complex menu with additional text, for instance, “About Us - All About The Company and Team” that would be a good case for using a definition list.

Since we are discussing beginners topics in CSS 101, I am going to keep this super simple and only talk about best practices for horizontal and vertical menus in terms of CSS code, not visual design.

The Horizon

Horizontal menus are quite common and are terrific for creating site wide menus of potential locations within your website. Unfortunately, they are often limited to a set width and therefore can be a bad choice for heavy navigational websites. It is always best practice to have a small amount of primary navigation, but the reality is that often clients and audiences require a great deal more than will fit in a single horizontal navigation.

By default an unordered list stacks vertically in a browser, and we need the list items to sit next to each other horizontally, how might we achieve this?

Floats of course!!

The CSS for the above HTML, to create a horizontal menu should look something like this

#primary-navigation{
	list-style-type: none;
	margin: 0;
}

	#primary-navigation li{
		float: left;
		margin-right: 5px;
	}
	
		#primary-navigation a:link,
		#primary-navigation a:visited{
			background-color: #EEEEEE;
			color: #FF0000;
			display: block;
			padding: 10px;
		}
	
		#primary-navigation a:hover,
		#primary-navigation a:active{
			background-color: #FF0000;
			color: #FFFFFF;
		}

Because we have floated the list items, we need to clear those floats, if you remember from Floats & You, we can do this using the :after method by applying a new class to our HTML menu, like this.

<ul id="primary-navigation" class="float-clear">
	<li><a href="" title="">menu item one</a></li>
	<li><a href="" title="">menu item two</a></li>
	<li><a href="" title="">menu item three</a></li>
	<li><a href="" title="">menu item four</a></li>
</ul>

Horizontal menu, not so hard, well guess what, vertical is even easier!

Vertically Challenged

First, we don’t need .float-clear or floats at all. Starting with the original HTML above, we can use the following CSS to make this a vertical menu.

#primary-navigation{
	list-style-type: none;
	margin: 0;
	mwidth: 220px;
}

	#primary-navigation li{ margin-right: 5px; }
	
		#primary-navigation a:link,
		#primary-navigation a:visited{
			background-color: #EEEEEE;
			color: #FF0000;
			display: block;
			padding: 10px;
		}
	
		#primary-navigation a:hover,
		#primary-navigation a:active{
			background-color: #FF0000;
			color: #FFFFFF;
		}

See what I did there? Let me explain, first I gave the menu a width, as a vertical menu is often going to be in a sidebar, so it’s going to be restricted to a certain width, then I removed the float declaration and right margin and gave it a bottom margin instead. Amazing, flexible code powers unite… uh, sorry, got too excited there.

Why use a vertical menu? They make great sidebar menus, and secondary drop downs and long menus. Vertical menus have as many uses as his horizontal brother. Which type you choose comes down to preference and project needs based.

Now that you have this really solid HTML and CSS base for menus go out there and visually design some awesome menus!

Join me next week for a discussion about the Cascade and Importance.