Navigation Bars Part 2 – Simple Vertical

This time I’ll show you how to make your own vertical navigation bar complete with similar effects as before, and thankfully just about as simple. The final compiled code should produce this page.

If you followed the horizontal nav bar tutorial you’ll find this to be a very simple transition, as there’s very little difference in code. If you didn’t, it might be worth your while to as it will help to understand this one a bit better.

The CSS consists of:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
#container{
	margin:auto;
	width:600px;
	background-color:#fd5;
	border:2px solid #e80;
}
#nav{
	width:150px;
}
#nav a{
	display:block;
	float:left;
	width:144px;
	background-color:#eee;
	border:3px solid #555;
	text-align:center;
	text-decoration:none;
	color:#000;
}
#nav a:hover{
	background-color:#fb0;
}
.clear{
	clear:both;
}
br{
	display:none;
}

It has a few additions to before.

The container attributes are just to show it more in the context of being in a page. For the navigation bar to work you don’t actually need it, so you can remove this set of styles and its corresponding div from the below lines of code. Likewise, the clear class attribute of clear:both is only needed for this div, but is useful to make note of when you put this code into your own site as it fixes things like divs not stretching to the height they should be.

The nav element has been reduced to 150px wide as we will only need it to be as big as that number, but as usual you can change your own code to suit.

The br tag attribute is new but is only important in making the list show properly with styles disabled and in some mobile browsers.

HTML:

1
2
3
4
5
6
7
8
9
<div id="container">
    <div id="nav">
        <a href="#link1">Link 1</a><br />
        <a href="#link2">Link 2</a><br />
        <a href="#link3">Link 3</a><br />
        <a href="#link4">Link 4</a><br />
        <div class="clear"></div>
    </div>
</div>

Looks familiar doesn’t it. Stripped of the line breaks (<br> tags) the code’s identical to what we had for the horizontal links (apart from the container and clear divs but as I said before, we don’t necessarily need those).

All the stuff in there should be pretty straight forward, especially if you’ve already looked at the previous tutorial, so I’ll move swiftly onto the next part.

The result:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<style type="text/css">
#container{
	margin:auto;
	width:600px;
	background-color:#fd5;
	border:2px solid #e80;
}
#nav{
	width:150px;
}
#nav a{
	display:block;
	float:left;
	width:144px;
	background-color:#eee;
	border:3px solid #555;
	text-align:center;
	text-decoration:none;
	color:#000;
}
#nav a:hover{
	background-color:#fb0;
}
.clear{
	clear:both;
}
br{
	display:none;
}
</style>
<div id="container">
    <div id="nav">
        <a href="#link1">Link 1</a><br />
        <a href="#link2">Link 2</a><br />
        <a href="#link3">Link 3</a><br />
        <a href="#link4">Link 4</a><br />
        <div class="clear"></div>
    </div>
</div>

So just bung this into your favourite HTML editor and have a mess about with it and see what you can come up with.

Note: if you view the page that I linked to above in IE it aligns the container to the left instead of centring it like in other browsers. This is due to it not being contained in a <body> tag (which I’m assuming you know about and are using along with the code in these tutorials, and not just the code on its own). So just add your normal page tags and it will fix itself.

Other example:
Also similar to my last tutorial is a listed style alternative. It can be achieved with similar methods and should look like this when you’re done.

Replace the #nav styles with:

1
2
3
4
5
6
#nav{
	width:150px;
	margin:0;
	padding:0;
	list-style:none;
}

Note: you won’t need the br tag styles for this version, so you can remove them if you like.

Replace the HTML with the following:

1
2
3
4
5
6
7
8
9
<div id="container">
    <ul id="nav">
        <li><a href="#link1">Link 1</a></li>
        <li><a href="#link2">Link 2</a></li>
        <li><a href="#link3">Link 3</a></li>
        <li><a href="#link4">Link 4</a></li>
    </ul>
    <div class="clear"></div>
</div>

And you’re done. So now you can add two types of navigation bars to your site in two variations a-piece. Spoiled for choice really.