Website Navigational Menu’s

Navigational menus are the most important aspect of a website. Look at any website you go to. In some form or another, there is a navigational menu. Go figure, since it’s what directs visitors around. Without one, you leave you visitors to search for links on your pages in order to advance through your site.

Why are menu’s so important? BECAUSE THEY ARE! ;) Without them you leave it to your visitors ability to direct themselves through your site. Trust me, you’re giving your visitors far too much credit. When it comes to structuring your navigation, it’s always best to structure it with idiots in mind (good rule of thumb when creating any soft of user interface I say). Never assume people will be able to figure something out. If someone can’t figure out your navigation almost immediately, they move on from your site.

To put this simply, you MUST have some sort of main navigation for your site if you want to retain your visitors.

Now what is the best way to construct a menu? There are countless ways to make the navigation on your website. But the best, and most standard way, is an unordered list.

Why an unordered list? There are many reasons. Already, the <ul> and <li> are block elements, so you can size, position, and float to your hearts content without adding extra <div>’s. Another reason, is when either viewed in code, or if a visitor has CSS turned off, the inherited properties of an unordered list will display your menu in a navigational fashion. For example. If you use only <a> tags, with CSS turned off, your menu will appear as any other link on the page, whereas if you use an unordered list, it will be indented, bulleted, and broken up with line breaks.

Here is the basic html.

1
2
3
4
5
6

<ul>
  <li><a href="{url}">{title}</a></li>
  <li><a href="{url}">{title}</a></li>
  <li><a href="{url}">{title}</a></li>
  <li><a href="{url}">{title}</a></li>
</ul>

Feel free to add any tags you deem necessary for how you will design your menu. If you feel you need a <span> element within your <a> tag, then go for it!

There are countless ways to style your navigation, but here are a few tips to get your started:

Remove Default Formatting

You’ll want to remove the default style’s when it comes to your menu. That means the default padding, margins, and list types of the $lt;ul> and <li> elements.

1
2
3
4
5
6
7

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

Floats

If you want your navigation to be on one line, you’ll need to float your <li> items. Why the <li> tag and not the <a> tag? You can float your <a> tags all you want but they will be restricted to the display area of their parent tag, which would be <li>. Since the <li> tags are the elements with the block display attribute already, they are the ones that need to be floated in order to get all your navigation onto on line.

It is also recommended to either add a fixed height to the <ul> element or a clearing element inside it. For example:

1
2
3
4
5
6
7
8
9

ul {
  margin:0;
  padding:0;
}
li {
  list-style:none;
  float:left;
  background: #444;
}

1
2
3
4
5
6
7

<ul>
  <li><a href="#">Menu Item 1</a></li>
  <li><a href="#">Menu Item 2</a></li>
  <li><a href="#">Menu Item 3</a></li>
  <li><a href="#">Menu Item 4</a></li>
  <div style="clear:both;"></div>
</ul>

If you set the <ul> tag’s height, then you don’t need to have the clearing <div>. But because all the elements within the <ul> element are being floated, they don’t affect the height of <ul> like any other element usually would. You either need to manually set the height of <ul>, or add a element that clears the floats.

Padding and Margins

There’s a simple rule to use when applied margins and padding to your navigation. Add margins to your <li> elements, and padding to your <a> elements. Why? You want your <li> and <a> items to be the same size, and adding margins to your <a> elements will make your <li> elements larger. And for the same reason you add padding to your <a> elements. You always want to apply padding to the inner-most element, in this case the <a> element.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

ul {
  margin:0;
  padding:0;
}
li {
  list-style:none;
  float:left;
  margin-right:2px;
  background: #444;
}
li a {
  padding: 2px 5px;
  display:block;
}

1
2
3
4
5
6
7

<ul>
  <li><a href="{url}">{title}</a></li>
  <li><a href="{url}">{title}</a></li>
  <li><a href="{url}">{title}</a></li>
  <li><a href="{url}">{title}</a></li>
  <div style="clear:both;"></div>
</ul>

Don’t forget to set the display attribute to block if adding a padding to your <a> elements.

Images

At some point, you may want to style your navigation will images. There are many ways to do this. You can apply an different image to each menu item. Or, in this example, apply one image using sprites to hangle varying widths.

The image to the left is the ones we’ll be working with. The top 3 bars are the normal, hover and selected states respectively for the left site of the menu, and the bottom three are the right side.

We’ll be using the background position to change the image when hovered over and selected. This method also requires the addition of the <span> element inside the <a> tag.

1
2
3
4
5
6
7

<ul>
  <li><a href="{url}"><span>{title}</span></a></li>
  <li><a href="{url}"><span>{title}</span></a></li>
  <li><a href="{url}"><span>{title}</span></a></li>
  <li><a href="{url}"><span>{title}</span></a></li>
  <div style="clear:both;"></div>
</ul>

We’ll be applying the image to both the <a> and <span> tags. Yes, you could use the <li> and <a> tags, but then in your CSS you’d have to use li:hover which is not supported in Internet Explorer below 7. Only the <a> element can have the :hover state applied to it in Internet Explorer 6 and below. So for cross browser purposes, I’m using the more compatible method.

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

ul {
  margin:0;
  padding:0;
}
li {
  list-style:none;
  float:left;
  margin-right:2px;
}
li a, li a span {
  background-image: url(menu.gif);
  background-repeat: no-repeat;
  display:block;
}
li a {
  background-position: 0 0;
}
li a span {
  padding: 2px 5px;
  background-position: right -78px;
}
li a:hover {
  background-position: 0 -26px;
}
li a:hover span {
  background-position: right -104px;
}
li.selected a {
  background-position: 0 -52px;
}
li.selected a span {
  background-position: right -130px;
}

Advanced Navigation: Sub Menu’s

Here is code for creating sub menus in your navigation.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<ul>
  <li><a href="{url}"><span>{title}</span></a></li>
  <li><a href="{url}"><span>{title}</span></a>
    <ul>
      <li><a href="{url}"><span>{title}</span></a></li>
      <li><a href="{url}"><span>{title}</span></a></li>
      <li><a href="{url}"><span>{title}</span></a></li>
      <li><a href="{url}"><span>{title}</span></a></li>
      <div style="clear:both;"></div>
    </ul>
  </li>
  <li><a href="{url}"><span>{title}</span></a></li>
  <li><a href="{url}"><span>{title}</span></a></li>
  <div style="clear:both;"></div>
</ul>

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
40
41
42
43
44

ul {
  margin:0;
  padding:0;
}
li {
  list-style:none;
  float:left;
  margin-right:2px;
  position:relative;
}
li a, li a span {
  background-image: url(menu.gif);
  background-repeat: no-repeat;
  display:block;
  color:#FFFFFF;
}
li a {
  background-position: 0 0;
}
li a span {
  padding: 2px 5px;
  background-position: right -78px;
}
li a:hover {
  background-position: 0 -26px;
}
li a:hover span {
  background-position: right -104px;
}
li.selected a {
  background-position: 0 -52px;
}
li.selected a span {
  background-position: right -130px;
}
ul li ul {
  display:none;
  position:absolute;
  width:400px;
  left:5px;
}
ul li:hover ul {
  display:block;
}

Notice the position attribute is called into play for this one. It’s best to handle sub menu’s like this with JavaScript, as it gives you more control and freedom to show and hide your submenu.

This is just the basic setup for your navigation. You can add images, adjust positions, paddings, ect. There are countless ways to apply this method. Here are some websites that use an unordered list as their method: