Rollover menus with CSS
February 23, 2008
In this quick tutorial I am going to show you how to make some rollover effects menus with CSS, you can find previews of all of the menus here: http://help-developer.com/previews/cssrollovers/index.html :
The HTML
To start with you need to add the html to your webpage, so find an appropriate part in the code and add this:
<div id=”menu”>
<a href=”#”>Home</a>
<a href=”#”>Services</a>
<a href=”#”>Pricing</a>
<a href=”#”>About</a>
<a href=”#”>Contact</a>
</div>
You can change the links as much as you like as long as they are contained in the <div id=”menu”> and </div> commands.
Now you will need a CSS stylesheet and attach it to the html, if you know how to do this then move on to menu number 1, if you dont then I will tell you how. Create a new file and call it style.css, this is where you will put all the properties to style the layout and look of the components on your webpage.
To attach it to the html file you will need to add the following code to the are between <head> and </head>:
<link rel=”stylesheet” type=”text/css” href=”style.css” />
Make sure that you use the name you gave the CSS stylesheet as the name you put after href=”
Menu Number 1
To do this menu go to your CSS and add the following code:
#menu {
width:300px;
margin:0;
}#menu a {
width:280px;
border-left:5px #4d4d4d solid;
background-color:#CCCCCC;
padding-top:8px;
padding-left:10px;
height:25px;
font-family:Arial;
font-size:14px;
font-weight:bold;
color:#555555;
display:block;
clear:both;
text-decoration:none;
}#menu a:hover {
border-left:5px #555555 solid;
background-color:#bcbcbc;
color:#FFFFFF;
text-decoration:none;
}
Menu Number 2
To do this menu go to your CSS and add the following code:
#menu {
width:300px;
margin:0;
}#menu a {
width:280px;
border-bottom:2px #4d4d4d solid;
background-color:#FFFFFF;
padding-top:8px;
padding-left:10px;
height:25px;
font-family:Arial;
font-size:14px;
font-weight:bold;
color:#555555;
display:block;
clear:both;
text-decoration:none;
}#menu a:hover {
border-bottom:2px #555555 solid;
background-color:#bcbcbc;
color:#FFFFFF;
text-decoration:none;
}
Menu Number 3
To do this menu go to your CSS and add the following code:
#menu {
width:300px;
margin:0;
}#menu a {
width:280px;
background-color:#FFFFFF;
padding-top:8px;
padding-left:10px;
height:25px;
font-family:Arial;
font-size:14px;
font-weight:bold;
color:#555555;
display:block;
clear:both;
text-decoration:none;
}#menu a:hover {
background-color:#9ac0c3;
color:#FFFFFF;
text-decoration:none;
}
Menu Number 4
To do this menu go to your CSS and add the following code:
#menu {
width:300px;
margin:0;
}#menu a {
width:280px;
background-color:#FFFFFF;
border-bottom:2px #FFFFFF solid;
padding-top:8px;
padding-left:10px;
height:25px;
font-family:Arial;
font-size:14px;
font-weight:bold;
color:#555555;
display:block;
clear:both;
text-decoration:none;
}#menu a:hover {
border-bottom:2px #9ac0c3 solid;
text-decoration:none;
}
Conclusion
OK, now you have it, how to make rollover menus with CSS. You can change the properties in the style.css file such as changing the colours so it suits you website theme colours or making the links smaller by changing the width and height properties.
Karl
March 7th, 2008 at 11:34 am
Wouldn’t it be more semantic to have the navigation as a list rather than a DIV?
After all, navigation is a list of links………
Cam
April 7th, 2008 at 10:15 pm
This is really cool! I’ve been trying to learn CSS for a long time, this is helpful stuff.
yaddi
June 14th, 2008 at 1:00 pm
its better if you provide the instance like nettuts does