The first time I achieved this effect (about 6 years ago) I felt just like when I found a $20 dollar bill on a jacket I hadn’t worn in 1 year. I know it’s simple, but for a beginner, it’s the beggining of the path to CSS Wonderland.
The code will be easily customizable. After you go over this tutorial I suggest you start playing around with the code by changing color, padding, font-size, etc.
Click here to view an example of how this horizontal navigation CSS menu with mouseover effect works.
There is nothing complicated about this effect. You can just copy and paste the code in your text editor, save the file as a html document and view it in your browser. Then you can start customizing the code to your needs. When you start customizing the CSS code, if you change the value of some key attributes, you may get some unwanted results. That’s why I suggest you go over the following brief explanation.
The following code could be placed between the HEAD tags or thrown into an external CSS file…
#menu {
width:100%;
font-family:Tahoma, Verdana, Arial;
}
.button {
color:#FFFFFF;
font-size:8pt;
font-weight:bold;
text-decoration:none;
background-color:#000033;
padding-top:5px;
padding-bottom:5px;
padding-right:20px;
padding-left:20px;
line-height:2;
border-right:1px solid #FFFFFF;
}
.button:hover {
background-color: #FF6600;
}
</style>
The button class will specify how we want the buttons to look. The color, font-size, font-weight, text-decoration, background-color, padding and border attributes are all customizable.
The line-height attribute sets the distance between lines. We gave it a value of 2, which means the line height of the text will be twice the current font size. If you remove the line-height attribute you will see no change to the buttons if you view it with Safari or Firefox. But when you view it with Internet Explorer, the button will look short. So we add the line-height attribute and set its value to 2, so the button will be a bit taller when viewed with the Internet Explorer browser.
The section .button:hover tells the browser how you want the button to look when the mouse cursos moves over it. You can even set a different font-size!
Place the following HTML code on the body of your HTML document…
We use a div named “menu” to contain the buttons. Every link is a member of class “button”. All links should be on the same line to avoid an extra white space to appear between the buttons.
It’s good to review how your website looks on different major browsers, since it will vary according to your visitors preference.
The code provided has been tested on the following browsers and operating systems:
- Firefox version 3.0.1 on a Windows Vista
- Internet Explorer 7 Version 7.0.6001.18000 on a Windows Vista
- Safari Version 3.1.2 on a Windows Vista
- Safari Version 3.1.1 on a Mac OS X Version 10.5.2
Tags: CSS