Creating Menus with HTML & CSS | HCDE537

A computer using a graphical user interface presents menus with a combination of text and symbols to represent choices. By clicking on one of the symbols or text, the operator is selecting the instruction that the symbol represents.

Using Lists

Lists are the basis for navigation and menus and come in three styles; unordered, ordered and definition.

See Also: Using Lists & List Items | Premium Design Works

We will be using an unordered list to create the main menu in our website:

<!-- Begin Navigation -->
<div id="navigation">
<ul id="navigation-items">
<li><a href="statement.html">Statement</a></li>
<li><a href="resume.html">Resumé</a></li>
<li><a href="skills.html">Skills</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<!-- End Navigation -->

View: http://students.washington.edu/sinkum/a-multiple-page-website/index.html

Menu States

There are four basic states that we must cover when creating our link styles (you must write them in this order):

a:link: is the state of the default link
a:visited: is the state when you have previously viewed that link’s page
a:hover: is the state of the rollover effect for that link
a:active: is the state of the link when it is being clicked

#menu li a:link { color: #85898A; text-decoration: none; }
#menu li a:visited { color: #85898A; text-decoration: none; }
#menu li a:hover { color: #F20017; text-decoration: underline; }
#menu li a:active { color: #F20017; text-decoration: underline; }

See Also: Styling Links | W3 Schools

We can also create the styles to our menus with a more shorthand method as well:

#navigation-items li {
display: inline;
margin-right: 20px;
font-weight: bold;
list-style-type: none;
}
#navigation-items li a {
display: inline-block;
padding-right: 30px;
color: #000;
text-decoration: none;
}
#navigation-items li a:hover {
background-image: url(images/bg-navitems-arrow.png); /* rollover image */
background-position: right;
background-repeat: no-repeat;
}