A CSS menu (horizontal and vertical)

Semantically, a menu is nothing more than a list (<li> tag) with clickable elements. We will create a horizontal menu, knowing that a vertical menu will be based on the same principle.

A horizontal menu function the same way: you only need to place the elements side by side instead of one above the other. (View horizontal menu / View vertical menu / View menus gallery).

The technique is based on using the "float: left" attribute to make list tags floating and left aligned, our menu will appear horizontally and not vertically.

Construction of a simple horizontal menu

Note: /* these text are explanation commentaries and can be removed*/

CSS code:


body {font: 14px Verdana, Arial, sans-serif;}


ul {
list-style-type: none; /* suppression of useless elements */
width: 100%; /* precision for Opera */
}
li { float: left;} /* lists aligned to the left */

.menu a {
     margin: 0 2px;
     width: 100px; /* definition of menu button size */
     height: 20px;
     float: left;
     display: block;
     text-align: center;
     border: 1px solid gray;
     text-decoration: none;
     color: #000;
     background: #fff;
     }
	 
.menu a:hover {
     background: #ccc;
     border: 1px solid gray; 
     }

.menu a:active {
     background: gray;
     border: 1px solid gray; 
     color: #fff;
     }

There you go for CSS.

To finish, you will only need to place the menu block where you want it:

	<ul class="menu"><li><a href="">Menu 1</a></li>
	<li><a href="">Menu 2</a></li>
	<li><a href="">Menu 3</a></li>
	<li><a href="">Menu 4</a></li></ul>

And that's is!

Print article

Raphaël GOETTER
www.alsacreations.com