CSS menu

Home - Tutorials - CSS tutorials

In this tutorial I will show you how to create a vertical or horizontal menu system for your website using pure CSS.

Tutorial info:

Name:	CSS menu
Total steps:	1
Category:	CSS tutorials
Date:	2008-04-01
Level:	Beginner
Product:	See complete product
Viewed:	932

Bookmark CSS menu

Step 1 - CSS menu

CSS menu

What you need on almost every websites is a menu or navigation block. You can place this block on the top, left, right or anywhere you want. In most cases the links are organised vertically or horizontally. If you checks the source of some sites you can see that the menu items are ordered in table rows or columns. This is not a good solution as the page layout should not use tables at all. To avoid this problem some new solutions use list instead of tables. Now I will show you a clean solution without tables and lists. At the end you will get a menu like these:

Horizontal menu
Vertical menu

So let's create a main menu with the following menu items:

Home
Products
Forum
About Us

The HTML code for this is very simple:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>CSS Menu</title>
  </head>
 
  <body >
      <a href="#">Home</a> 
      <a href="#">Products</a> 
      <a href="#">Forum</a> 
      <a href="#">About Us</a> 
  </body>
</html>
CSS F1

But the output is almost useless for us. So it's time to make it better with CSS. Before starting with CSS coding first put our links in a surrounding div block like this:

Code: 
    <div id="menu">
      <a href="#">Home</a> 
      <a href="#">Products</a> 
      <a href="#">Forum</a> 
      <a href="#">About Us</a> 
    </div>
CSS F1

First try to make a menu block where the menu items are listed one under another. To do this set the width parameter for the div block and for the a tag as well. Don't forget to calculate with margin, border and padding values.

However in case of a tags it is not enough just to set the width parameter but you need to set the display parameter as well. This should be display:block. So the following CSS code results a better displayed menu.

Code: 
  <head>
    <title>CSS Menu</title>
    <style type="text/css">
      #menu {
         width:120px;
      }   
 
      #menu a {
         width:110px;
         display:block;
      }
 
    </style>
  </head>
CSS F1

We can make it much better. Let's use some border, rollover effects and colors like this:

Code: 
      #menu {
         width:120px;
      }   
 
      #menu a {
         width:110px;
         display:block;
         border:1px solid #ddd;
         background-color:#fafafa;
         padding:2px;
         margin:3px 1px;
         text-decoration:none;
      }
 
      #menu a:hover {
         background-color:#ccc;
      }
 
CSS F1

It is much better isn't it? And we didn't used any unnecessary element in our HTML code.

Horizontal alignment

If you want to display your menu horizontally you only need to edit the CSS and set the div block width value and the float property of the a tag to float:left.

Code: 
      #menu {
         width:600px;
      }   
 
      #menu a {
         width:110px;
         display:block;
         border:1px solid #ddd;
         background-color:#fafafa;
         padding:2px;
         margin:3px 1px;
         text-decoration:none;
         float:left;
      }
 
      #menu a:hover {
         background-color:#ccc;
      }
 
CSS F1

Tags: css menu system, css navigation system, css menu, css navigation

CSS menu - Table of contents
Step 1 - CSS menu

CSS F1

Help in CSS, get CSS code, scripts, tutorials

CSS menu

Tutorial info:

Bookmark CSS menu

Step 1 - CSS menu