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>
