CSS menus with rollover effects are the standard for today's Web sites. In this article, you learn how to create a single-level CSS rollover menu. With this information and example code, you should be able to design your own menus.
Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022


Easy Rollover Menu Code

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>



RSS Feed RSS Feed


Follow Stephen Bucaro Follow @Stephen Bucaro


Web Design Sections

[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2016 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268