How to Make a Rollover Menu
Rollover menus are an efficient method for organizing website content, making your site easier for users to navigate. Web design software usually includes tools for making rollover menus, but these menus can also be created using a simple text editor and either the cascading style sheets method or the tables method.
Other People Are Reading
Instructions
-
Cascading Style Sheets
-
1
Set up the basic HTML document framework:
<html>
<head>
</head>
<body>
</body>
</html>
-
2
Insert the following code between the <head> and </head> tags:
<LINK href="rollovers.css" type="text/css" rel="stylesheet">
-
-
3
Create the stylesheet by creating a new text document titled "rollovers.css."
-
4
Type the following HTML code to create the space to contain the menu and define the menu width:
<div id="list-menu">
</div>
#list-menu {
width: 132px;
}
-
5
Create the menu links in an unordered HTML list:
<ul>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
-
6
Remove the indents and default bullets:
#list-menu ul {
margin: 0;
padding: 0;
list-style-type: none;
}
-
7
Define the text styles by adding the following code to the above CSS:
font-family: verdana, arial, sanf-serif;
font-size: 12px;
-
8
Create styles for the links in the menu:
#list-menu a {
display: block;
width:120px;
padding: 2px 2px 2px 10px;
border: 1px solid #000000;
background: #dcdcdc;
text-decoration: none;
}
Change the width, padding, border, background and text decoration values accordingly, depending on your preference.
-
9
Create the rollover effect by defining the visited, active and hover states for the links:
#list-menu a:link, #list-menu a:active, #list-menu a:visited {
color: #000000;
}
#list-menu a:hover {
border: 1px solid #000000;
background: #333333;
color: #ffffff;
}
Tables
-
10
Create the links with each link contained in a table cell:
<div class="menu">
<table summary="" cellpadding="1" cellspacing="1" class="menu">
<tr>
<td><a href="#" onfocus="this.blur()"> Link 1</a></td>
</tr>
<tr>
<td><a href="#" onfocus="this.blur()"> Link 2</a></td>
</tr>
<tr>
<td><a href="#" onfocus="this.blur()"> Link 3</a></td>
</tr>
<tr>
</table>
</div>
-
11
Specify a style for the table with the desired width:
table.menu a {
width:125px;
border:1px solid #333333;
display: block;
}
-
12
Specify the base style for the "div" menu class:
div.menu a {
color: #333333;
background: #ffffff;
text-decoration:none;
font-size:11px;
line-height:16px;
font-family: Tahoma, verdana, sans-serif;
padding: 2px 5px;
}
Change the color, background, text decoration, font size, line height, font family and padding values accordingly, depending on your preference.
-
13
Specify the link colors and the hover styles to create the highlight effect:
div.menu a:link {
color: #333333;
background: #cccc99;
}
div.menu a:active {
color: #000000;
background: #cccc99;
}
div.menu a:visited {
color: #333333;
background: #cccc99;
}
div.menu a:hover {
color: #eeeeee;
background: #333333;
border:1px solid #000000;
}
-
1
