Easy Rollover Menu Code
By Stephen Bucaro
CSS (Cascading Style Sheets) menus with rollover effects are the standard for
today's Web sites. In this article, you'll learn how to create a single-level
CSS rollover menu. If you follow through and create the example menu, you'll
acquire an understanding of the process, which will allow you to design your own menus.
The example menu will be created by placing links in an unordered list (ul)
element that is contained within a div element. The first thing we need to
do is select the colors for the menu. we'll select dark colors for the background
and text of inactive menu items, and light colors for the background and text
of menu items when the user moves the mouse pointer over them.
For borders, we'll use the convention of light coming from the upper-left side
of the screen. We'll use a light color for borders receiving light, and dark
colors for borders in shadow. We'll need seven different colors. To keep the
example simple, I'll use seven different shades of gray.
We could use color names to define our colors, but we would need to make
sure the names where standard, and even then we would have limited color definition
capability. We could the rgb method to define colors. In that case we would
define a color using three decimal numbers between 0 and 255, representing the
amount of red, green, and blue in the color. However, the standard way to define
colors on the Web is hexadecimal notation.
Hexadecimal notation is similar to decimal notation in that you use three numbers
to define a color, but the numbers are between 00 and FF. If you don't understand
hexadecimal notation, you can still work this example, but you may need to review
hexadecimal notation to design your own menus. below is a list of the hexadecimal
notation for the seven shades of gray used for this example.
#000000 Dark text color (black)
#0a0a0a Dark border color
#606060 Dark background color
#707070 Intermediate border color
#909090 Light background color
#a0a0a0 Light border color
#ffffff Light text color (white)
• Note that the # sign signifies that the color is defined in hexadecimal notation.
Shown below is the html code for the menu. Note that it consists of links in an
unordered list (ul) element that is contained within a div element.
<div id="sitenav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
Paste this html in the <body> section of your webpage. We will now create
the style code for the menu. All the style code should be placed between a set of
style tags (as shown below) in the <head> section of your webpage.
<style type="text/css">
style code goes here
</style>
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
RSS Feed
Follow @Stephen Bucaro
General Web Design
