Rollover Menu Tutorial
- The menu uses several tag elements for the HTML part of the menu. Every tag has an opening tag and a closing tag, such as <body></body>. The beginning tag expression is the <div> tag. It defines a section or division in an HTML document and uses a unique identifyer (id). The other elements for your menu will fall between these two tags <div> and </div>. With the main container component created, type out your menu list using the unordered HTML tag (ul) and <li> tag. Use the <a> (anchor) tag with a "href" attribute to specify the destination link (URL):
<body>
<div>
<ul>
<li><a href="/links/?u=URL">Home</a></li>
<li><a href="/links/?u=URL">Products</a></li>
<li><a href="/links/?u=URL">Services</a></li>
<li><a href="/links/?u=URL">Contact</a></li>
</ul>
</div>
</body> - A CSS (content style sheet) allows you to group elements together for specific tags. A style sheet uses the tags <STYLE> </STYLE> and is placed in the <head> section of the HTML document. The "type" attribute specifies the information that follows is a CSS.
Specify the basic "#nav" <div> attributes as well as the style for our unordered list <ul>, such as the margin, width and removing the bullets (list-style-type). Other attributes include setting the margin and padding to zero to remove the line indents, and defining the text style using "font-family" and "font-size":
<style type="text/css">
#nav {
width: 140px; /* Use same width size for "#nav a" section below*/
font-family: verdana, sanf-serif;
font-size: 12px;
}
#nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}
</style>
Create a little space between the menu items list <li> for better presentation. The following attribute places two pixels above every list item:
#nav li {
margin: 2px 0 0;
} - The final phase is the rollover effect, which uses classes associated to the visited, active and hover states of a link (a:link; a:active; a:visited; a:hover). The basic link attributes assigned to "#nav a" apply to all states of a link. By using a darker background color for the "a:hover" attribute, you create contrast;
#nav a {
display: block;
width:140px; /* (Width should match "#nav" section above */)
padding: 2px 2px 2px 8px;
border: 1px solid #000000;
background: #CCCCCC;
text-decoration: none; /* removes the link underlines */ }
#nav a:link, #nav a:active, #nav a:visited {
color: #000000; /* BLACK TEXT COLOR */ }
#nav a:hover {
border: 1px solid #000000;
background: #999999;
color: #FFFFFF; /* WHITE TEXT COLOR*/ } - For spice, add a background image to the menu (#nav a:hover and nav a:link):
background: #333333 url(images/background1.gif);
HTML Menu Markup
Content Style Sheet Setup
CSS Rollover Effect
Add an Image
Source...