Using best practices to create a menu for your website

I have now seen too many websites around the net to ignore the growing problem. There are still designers out there creating menu's from multiple images placed inside table cells. As apart of the cleaning up the net project I would like to share with all designers how to build a clean, simple and stylish menu system that uses less resources you are currently using now.

In this article I will show you HTML and CSS example's of how to build your menu and examples of existing menu's from great websites that you can easily achieve too.

Creating a common file

Your website files need to be in PHP. You can easily change the file extension to do so.

The menu is used on every page of your website. To make it easier to maintain, we will create a menu.php file that you can include in your header. In your header file (E.g. header.php) place this code inside a DIV with a class name 'menu'. This way all you have to do is adjust one file when you add a new menu item etc.

<div class='menu'>
     <? include('menu.php'); ?>
</div>

The HTML

Now that we have a common menu this is the HTML we need inside the file. We'll start with a simple menu and then have a look at drop down's later. First of all we need an unordered list, inside that list we will place our links.

<ul>
     <li><a href='index.php'>Home</a></li>
     <li><a href='about_us.php'>About Us</a></li>
     <li><a href='contact.php'>Contact</a></li>
</ul>

All it really looks like now is a bullet point list of all your website links. Now we need to style this list so it resembles the menu's you have seen browsing the net.

The CSS

In your style sheet you can place the following code, remembering that we have included this file inside a DIV with a class name 'menu'.

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

We declare that the unordered list inside the menu DIV has no bullet points and no whitespace.

Now we float the list element and the link to the left. We also style the link so it looks like a dark gray box with white text. To give a link padding you need to change it into a block element, this places the text in the center of the menu block.

There you have it. A simple menu created from an unordered list and some CSS. The advantages of doing it this way is no images to load so it's faster, you can add links without creating further images and it's made from a list so no adjusting widths of table cells.

Advanced: Drop down menu's

For drop down menu's we need to adjust the HTML slightly and add a tiny bit of javascript. The new HTML looks like:

<ul>
     <li><a href='index.php'>Home</a></li>
     <li onmouseover='this.className='over';' onmouseout='this.className='';'>
           <a href='about_us.php'>About Us</a>
           <ul>
                <li><a href='services.php'>Services</a>
                <li><a href='the_team.php'>Meet the Team</a>
           </ul>
     </li>
     <li><a href='contact.php'>Contact</a></li>
</ul>

Another list has been added inside the About Us list item. This will act as our drop down menu. The javascript is written on the mouseout and mouseover handlers to change the class name of the list item when the cursor is moved over About Us.

Now we just need to add to the previous CSS and style up the new unordered list. Here is what it will look like:

.menu ul li {
     float:left;
     position:relative;
}

Add relativity to the list element. This is so we can position the drop down menu relative to the active list element.

.menu ul li ul {
     display:none;
}

Next we want to hide the drop down menu when the user hasn't hovered over a menu item.

.menu ul li.over ul {
     display:block;
     width:180px;
     position:absolute;
     top:25px;
     left:0;
}

.menu ul li.over ul li {
     float:left;
}

.menu ul li.over ul li a {
     display:block;
     background:#333;
     color:#FFF;
     padding:8px;
     text-decoration:none;
}

Now we use CSS to style up the 'over' class. Remember our javascript names the li as 'over' when the mouse is hovered over the element. First we want to show the second unordered list when the li element is over. The links inside the drop down should inherit the styles from the top however for this demonstration we are going to style it up again.

Conclusion

There you have it. A simple CSS drop down menu made from a simple unordered list and a tiny bit of CSS. Certainly beats the 100 lines of code used with tables and Dreamweavers javascript mess.

Try changing the colours, adding background images and use the :hover pseudo class for the links to add some nice roll over effects. 

Have you got some awesome menus you have created from simple list elements and stunning CSS? Share it with us and comment on this post.

Nice CSS menu examples

http://bradcolbow.com Nice background image on this menu.

http://theswishlife.com has a great menu with a nice little arrow on current links.

http://www.chattzoo.org has a nice hover colour on their links

http://www.ru4children.org has a nice background image on the main wrapper and then colours on the links giving it a nice effect.