CSS Rollover Tutorial
Ever wondered how people come up with those cool rollover navigation menus? Well now you're going to find out how. In this tutorial you will learn how to use link classes and the display: block property.
Horizontal Navigation
Example:So how did I create this rollover menu? Copy the code below into your style.css file first.
color: #000000;
background-color: #C0C0C0;
text-decoration: none;
font-size: 1em;
font-weight: bold;
margin-right: 10px;
}
.nav a:link, .nav a:visited {
color: #000000;
background-color: #C0C0C0;
text-decoration: none;
font-size: 1em;
margin-right: 10px;
font-weight: bold;
}
.nav a:hover, .nav a:active {
color: #0080FF;
background-color: #FFFFFF;
padding: 3px 10px 3px 10px;
margin-right: 12px;
text-decoration: none;
font-size: 1em;
margin-right: 10px;
font-weight: bold;
}
- .nav a
- Change #000000 to the color you want your text to be.
- Change #C0C0C0 to what you want the background color to be.
- Change 1em to 2,3,4 etc. if you want it bigger.
- .nav a:link, .nav a:visited
- repeat steps for .nav a.
- .nav a:hover, .nav a:active
- Change #0080FF to the color you want your text to be when you hover over the link.
- Change #FFFFFF to what you want the background color to be when you hover over the link.
- Make sure your text sizes match .nav a and nav a:link, .nav a:visited.
Next copy this code in the file where you want the navigation to show up.
<a href="http://YOURSITE.com">LINK NAME</a>
<a href="http://YOURSITE.com">LINK NAME</a>
<a href="http://YOURSITE.com">LINK NAME</a>
<a href="http://YOURSITE.com">LINK NAME</a>
<a href="http://YOURSITE.com">LINK NAME</a>
</div>
Replace http://YOURSITE.com with your site URL and LINK NAME with the name of the link.
Vertical Navigation
Example:Links
For this type of navigation menu copy this code and paste it in your style.css file.
color: #000000;
background-color: #0080FF;
font-size: 1em;
padding: 3px;
display: block;
border: 1px solid #000000;
width: 150px;
margin-bottom: 0px;
}
.block a {
color: #000000;
background-color: #C0C0C0;
text-decoration: none;
padding: 3px;
font-size: 1em;
display: block;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
width: 150px;
}
.block a:link, .block a:visited {
color: #000000;
background-color: #C0C0C0;
text-decoration: none;
padding: 3px;
font-size: 1em;
display: block;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
width: 150px;
}
.block a:hover, .block a:active {
color: #0080FF;
background-color: #FFFFFF;
padding: 3px;
text-decoration: none;
font-size: 1em;
display: block;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
width: 150px;
}
- h2 - also known as a header; Can also be called h1, h3, h4, etc.
- Change #000000 to the color you want your text to be.
- Change #0080FF to what you want the background color to be.
- Change 150px to a different width if you want the block to be longer.
- .block a
- Change #000000 to the color you want your text to be.
- Change #C0C0C0 to what you want the background color to be.
- Change 1em to 2,3,4 etc. if you want it bigger.
- Make sure the width matches the width in h2.
- .block a:link, .block a:visited
- repeat steps for .block a.
- .block a:hover, .nav a:active
- Change #0080FF to the color you want your text to be when you hover over the link.
- Change #FFFFFF to what you want the background color to be when you hover over the link.
- Make sure your text sizes and width match .nav a and nav a:link, .nav a:visited.
Place this code in the file where you want the navigation to appear.
<div class="block">
<a href="http://YOURSITE.com">LINK NAME</a>
<a href="http://YOURSITE.com">LINK NAME</a>
<a href="http://YOURSITE.com">LINK NAME</a>
<a href="http://YOURSITE.com">LINK NAME</a>
<a href="http://YOURSITE.com">LINK NAME</a>
<a href="http://YOURSITE.com">LINK NAME</a>
</div>
Replace http://YOURSITE.com with your site URL and LINK NAME with the name of the link.