NQ Designs - Your Graphic Resource

NQDESIGNS.X-TENSHI.COM

PORTFOLIO

RESOURCES

DESIGNS

TUTORIALS

GOODIES

How do I use rollovers to make my navigation?

Rollovers are images or text that change when you roll your mouse over them. NQ Designs' navigation bar to the left is an example of a rollover navigation. Notice how when you hover your mouse over the links, the background changes? With just css, you can make the links on your own navigation transform like that on mouseover.

What we want to accomplish:

Step #1: The Code

</style type="text/css">

#nav-menu ul
{
list-style: none;
padding: 0;
margin: 0;
}

#nav-menu li
{
margin: 0px;
padding:0px;
text-decoration: none;
}

#nav-menu li a:link, #nav-menu li a:active, #nav-menu li a:visited {
display: block;
height: 28px;
width: 140px;
border: 1px solid #AFA4FF;
background: url(activebg.gif) repeat #FFFFFF;
text-align: center;
padding-top: 10px;
text-decoration: none;
color: #6A7D96;
font-weight: normal;
}

#nav-menu li a:hover
{
color: #6D09C1;
border: 1px solid #A434FF;
background: url(hoverbg.gif) repeat #000000;
}

</style>

<body>

<div id="nav-menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Graphics</a></li>
<li><a href="#">Layouts</a></li>
</ul>
</div>

Step #2: Customization

Below is the same code but with comments that will explain what each line of code does. The code is divided into two sets. The 1st set are the css codes. They, of course, go between the <style type="text/css"> and </style> tags. The 2nd set is the HTML codes you need to display the rollover navigation. This set of code comes after the <body> tag.

The Html Component

The Links

<div id="nav-menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Graphics</a></li>
<li><a href="#">Layouts</a></li>
</ul>
</div>

Result:

* If you only use the html part of the code and not the css part, then you will see that your navigation will appear as a bulleted list of links. Now you see why the css component is necessary. Add as many extra bullets as you deem necessary.

The CSS Component

Removing the Bullets

#nav-menu ul
{
list-style: none;
padding: 0;
margin: 0;
}

* This css rule erases the bullets. Do not edit.

To pad or not to pad

#nav-menu li
{
margin: 0px;
padding:0px;
text-decoration: none;
}

* Set the margin and padding of your links. Leave them at 0 if you don't want any padding or margin.

Setting up the boxes

#nav-menu li a:link, #nav-menu li a:active, #nav-menu li a:visited {
display: block;
height: 28px;
width: 140px;
border: 1px solid #AFA4FF;
background: url(activebg.gif) repeat #FFFFFF;
text-align: center;
padding-top: 10px;
text-decoration: none;
color: #6A7D96;
font-weight: normal;
}

* The display: block command tells it to display the boxes on top of each other. You can specify the height and width of the boxes, even give it a border if you want. #FFFFFF is the hex code for the color 'white'. To find the hex code for other colors, check out this color wheel (IE only). The background command tells what the background of the boxes will be. Place the URL of the background you want to use in between the parantheses. Here is the background image I used...

Leave the parentheses blank if you do not want a background image, and instead change the hex code #FFFFFF to the color that you want to serve as the background-color of your boxes. The text-align command tells whether you want the text to pe placed on the left, center, or right, while the padding-top command tells how many pixels from the top of the box the text will be placed. Note: Be aware that increasing the padding will increase the width/height of your box. I have a padding of 10px. To ensure that the padding wont strecth my box, I had to use a different height of 28px even though the actual height of the background is 38px. Next changing the hex code in the color command will change the text color. Changing the font-weight command to bold will make the text bold if you choose to do so.

The boxes on mouseover

#nav-menu li a:hover
{
color: #6D09C1;
border: 1px solid #A434FF;
background: url(hoverbg.gif) repeat #000000;
}

* This css rule changes the look of the boxes when someone hovers their mouse over them. If you are using a background, you can use an alternate background or the same one that you used for the active rule. I used an alternate background...