Someone recently asked me to make them a simple horizontal CSS menu, so I figured heck, why not share it here?
The menu is incredibly simple, it doesn’t use lists nor tables. Just a DIV and some CSS magic. Because it is so basic it doesn’t allow neat effects like on the horizontal menu this blog uses (at the top of each page), but this is probably fine for most people.
Click here to see the CSS Horizontal Menu in action
Here is the code:
<html>
<head>
<style type="text/css">
#menu {
margin: 0;
background: #eeeeee;
width: 820px;
border: solid thin #aaaaaa;
padding: 2px 0 2px 0;
}
#menu a {
padding: 0 8px;
text-decoration: none;
font-family: helvetica;
color: #666666;
font-weight: bold;
font-size: 11px;
}
</style>
<body>
<div id="menu">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
<a href="#">Services</a>
<a href="#">Login</a>
</div>
</body></html>
Please subscribe, or else I will cry. Do you really want to make a programmer cry?
Leave a Reply