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

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">
<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>

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


RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro

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