Creating menus: Vertical Navigation > Explained

In this article I will explain how to create simple vertical navigation menu with one sub-menu. I suppose there are many explanations of how to create vertical (and horizontal) navigation menus all over the web, but when I was just a beginner I learned to write both XHTML and CSS, but never really understood why I wrote this or that (in CSS file). I will try to help you.

The code

The code for creating menus is really simple. If you know how to create an unordered list, you will surely now how to build navigation. Let’s say you have a firm and you wish to build firm’s website. In your menu you have these items: homepage, about us, projects (older and active) and contact page. Here is the code.

<div id="navigation">

<ul>
	<li><a href="#" title="Homepage" class="selected">Homepage</a></li>
	<li><a href="#" title="About us">About us</a></li>
	<li><a href="#" title="Projects">Projects</a>
		<ul>
			<li><a href="#" title="Older projects">Older projects</a></li>
			<li><a href="#" title="Active projects">Active projects</a></li>
		</ul>
	</li>
	<li><a href="#" title="Contact">Contact</a></li>
</ul>

</div>

We used an unordered list and contained id inside a DIV with ID "navigation". In the past everybody used tables for this kind of navigation, giving each cell it’s own class. The submenus were constructed with different classes than the first menu items. This worked just fine, but you had to be over the text to follow the link. When using unordered lists for displaying navigation, we can make the whole item a link, and that is certainly more accessible.

Step by step explanation of creating vertical navigation menu

First, we will just set a few ground rules. We will set the text size in our navigation menu to font-size:1.1em. Why on 1.1em? The best way of defining screen font size is to set the base value in BODY to 62.5% (this way the font-size is set to 10px). Each 0.1em we add, means the font-size is 1px higher. We also said to the browser that navigation width is 200px.

#navigation {
	font-size:1.1em;
	width:200px;
}

Next, we will remove the bullets from our lists, and reset the margin and padding to 0. Both Firefox and IE will now display the list as they should, and the menu will be 200px wide.

#navigation ul {
	list-style:none;
	padding:0;
	margin:0;
}

Now, let’s play with links. Because we want each navigation element to be in it’s own row, and so on, the navigation will be displayed as block. To remove the default underline from all the links in the navigation we used text-decoration:none;. Furthermore, we want each navigation element to be displayed with white text color:#fff; on grey background background-color:#333;, and removed from both top and down 5px, and from right and left 10px with padding:5px 10px;. We also want to remove each element from each other with 1px thin line by adding border-bottom:1px solid #fff;.

#navigation a {
	display:block;
	text-decoration:none;
	padding:5px 10px;
	background-color:#333;
	color:#fff;
	border-bottom:1px solid #fff;
	height:1%;
}

Please note: We used height:1%; because of Internet Explorer and it’s ability or better said disability to calculate proper height when you don’t use width and height values for elements. Without this value your navigation element will have approximately 10px bottom margin.

To separate the submenu, we used different background color and padding-left values. If we have more than one submenu in depth we would use #navigation li li li a { ... } and one more li for every other submenu.

#navigation li li a {
	padding-left:20px;
	background-color:#555;
}

To conclude this article, we will style up our link when mouse comes over, and when the element is selected. We grouped styles for a:hover and a.selected to show the same background color and text color, for both mouse over and selected element.

#navigation a:hover, #navigation a.selected {
	background-color:#CCC;
	color:#000;
}
#navigation a.selected {
	font-weight:bold;
}

Why I bolded the text when the element is selected and why not when the mouse is over? If you didn’t used bold text as links, and you have enough text for almost one row, when the mouse comes over the text and it gets bold, the text might slip into the next row, and we won’t that to happen, right?

The example

Creating menus example

Further reading

List examples at Listamatic
The display declaration » Learn more about display modes
Maratz » Essentials of CSS Hacking For Internet Explorer