Menu System – CSS

CSS Menu

CSS Menu

Many years ago, when I first ventured out as a web designer, I remember using HTML tables to hold both a vertical and horizontal menu systems.

Today,  I wouldn’t dream of using so much code let alone tables to hold together a collection of buttons, instead, I use simple, clean and elegant CSS (Cascading Style Sheets). Here’s how…

Let’s start by building the links for the our menu using simple HTML

<a href=”page-1.html”>Page 1</a>
<a href=”page-1.html”>Page 1</a>
<a href=”page-1.html”>Page 1</a>

Without CSS, you can hardly call this a menu. Let’s now encapsulate these links within a DIV so that we can define our CSS.

<div class=”menu”>
<a href=”page-1.html”>Page 1</a>
<a href=”page-1.html”>Page 1</a>
<a href=”page-1.html”>Page 1</a>
</div>

And here is the CSS

.menu a { float:left; width:120px; height:25px; text-align:center; background: red }

This will create a rectangular red buttons – each running to the left of one and other – the perfect solution for a horizontal menu system. If you would like this system to be a part of a vertical menu, then you will need to constrict the width of the menu DIV

.menu { float:left; width:120px; }
.menu a { float:left; width:120px; height:25px; text-align:center; background: red }

Now the width of the button is the same as the width of the container around it. This will cause each button to run beneath the previous.

How about a nice rollover effect? Very simple with CSS.

.menu a:hover { background:green }

Here is the finished HTML and CSS:

<style>
.menu { float:left; width:120px; }
.menu a { color:white; float:left; width:120px; height:25px; text-align:center; background: red; margin-top:1px }
.menu a:hover { background:green }
</style>

<div>
<a href=”page-1.html”>Page 1</a>
<a href=”page-1.html”>Page 1</a>
<a href=”page-1.html”>Page 1</a>
</div>