This is a quick demonstration of how to make a rollover menu. An example is shown here.
Sample Rollover Menu
My goal was to create a rollover menu with included these features:
- Item background changes when the mouse passes over.
- The entire background is clickable, not just the text.
- Small spaces between each menu item.
The menu is contained in a <div> tag with a class of RolloverMenu. The menu items are contained in a simple unordered list. The CSS styling takes only six lines, 7-12 shown below.
- Line 7 - Sets the width of the menu and defines the font size, weight, and color.
- Line 8 - Removes the bullets and indentation from the list.
- Line 9 - Sets the background color, puts a small margin around the menu items and centers the text.
- Line 10 - A little magic happens here. Setting the display type to block is what makes the entire area clickable. Otherwise, only the text is clickable. Since this is a menu, text decoration is turned off for links in the menu. A border is drawn here instead of around the
<li>tag to prevent any sort of outer box from showing when we mouse over. - Line 11 - Swap the background color when the mouse passes over.
- Line 12 - Turn off any text color changes when the mouse passes over.
Here is some sample source code demonstrating the menu on a stand alone page. Click on the pages title link to view the example. Use the view source option of your browser to get the actual source code.
RolloverCSSMenuDemo.html (demo)
RolloverCSSMenu.html (source)
1:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2: "http://www.w3.org/TR/html4/loose.dtd">
3:<html>
4:<head>
5: <title>Rollover Button List</title>
6: <style type="text/css">
7:.RolloverMenu { width:150px; font-size:11pt; font-weight:bold; color:#000000;}
8:.RolloverMenu ul{ list-style-type:none; margin:0; padding:0;}
9:.RolloverMenu li{ margin:2px; text-align:center; background:#D9E8FF;}
10:.RolloverMenu a{ display:block; margin:0; padding:4px; border:1pt solid black; text-decoration:none;}
11:.RolloverMenu a:hover{ background:#BFD9FF}
12:.RolloverMenu a:link, .RolloverMenu a:active, .RolloverMenu a:visited{ color:#000000;}
13: </style>
14:</head>
15:<body>
16: <!-- Blue #BFD9FF -->
17: <h2>Rollover Button List</h2>
18: <p>This example page demonstrates how to convert a simple unordered list into a menu like button list</p>
19:
20: <h4>Basic Unformatted List</h4>
21: <p>This list is the starting point. A simple unordered list with links to popular sites on the Net.</p>
22: <ul>
23: <li><a href="http://www.google.com" target="_blank">Google</a></li>
24: <li><a href="http://www.yahoo.com" target="_blank">Yahoo</a></li>
25: <li><a href="http://www.engadget.com" target="_blank">Engadget</a></li>
26: <li><a href="http://www.news.com" target="_blank">CNET</a></li>
27: </ul>
28:
29: <h4>Formatted List</h4>
30: <p>Below is the formatted version of the list.</p>
31: <div class="RolloverMenu">
32: <ul>
33: <li><a href="http://www.google.com" target="_blank">Google</a></li>
34: <li><a href="http://www.yahoo.com" target="_blank">Yahoo</a></li>
35: <li><a href="http://www.engadget.com" target="_blank">Engadget</a></li>
36: <li><a href="http://www.news.com" target="_blank">CNET</a></li>
37: </ul>
38: </div>
39:
40:</body>
41:</html>