Navigation Bars Part 1 – Simple Horizontal

A simple but effective way to make a navigation bar at the top of your web page. The end result should look a little something like this.

This is the CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#nav{
	margin:auto;
	width:600px;
}
#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;
}

The only significant lines that must be kept are 6 and 7 as they make it look like it should. Everything else are just styles to give a better demonstration of how it works, but these can be changed as you please to suit your website’s layout.

The CSS for #nav give the containing div its styling attributes, and likewise for #nav a which applies to all <a> tagged elements (i.e. the links, and in this case the nav buttons) inside of the container.

The #nav a:hover gives the links specific styles when you hover over one with your mouse. In this case, the background colour changes to orange.

And here’s the HTML:

1
2
3
4
5
6
<div id="nav">
	<a href="#link1">Link 1</a>
	<a href="#link2">Link 2</a>
	<a href="#link3">Link 3</a>
	<a href="#link4">Link 4</a>
</div>

Here we have a div element to contain our navigation links, with an id set for reference in our CSS. The links inside it will act as our buttons. The href of each link and its tag content (i.e. Link 1, Link 2, etc) can be changed to suit your site, again they’re just there for demonstration and aren’t relevant to how they work.

Note: For the links to look right when the page styles are disabled, each <a> tag must be separated by a line break as it is above, or with at least one blank space.

Other example:
Alternatively, you can use another method by creating the navigation bar with list tags. Just replace the #nav styles in your CSS with this:

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

And change your HTML to this:

1
2
3
4
5
6
<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>

The CSS removes some default styles from unordered lists like margins and padding, and removes the list style. The HTML part is a bit lengthier to write, so it’s really down to your preference in deciding which of the two to use. The end result should look like this.

That’s right, they both look exactly the same. So why, you ask, would you ever go for the slightly bulkier version if they both do the same thing? Well that I’ll answer. There is a difference in that if you disable the page styles on each, the first one will be a horizontal list of links, similar to the layout of the fully styled navigation links themselves. The second on the other hand will be in the style of a bulleted list.

The layout of these also change dependent on some mobile browsers where the styles are altered to suit the smaller interface.


One thought on “Navigation Bars Part 1 – Simple Horizontal

Comments are closed.