HCDE532 » Creating Menus with HTML & CSS
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:
1 2 3 4 5 6 7 8 9 10 |
<!-- 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 -->
|
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
1 2 3 4 5 6 7 |
#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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
#navigation-items li {
display: inline-block;
margin-right: 20px;
font-weight: bold;
list-style-type: none;
}
#navigation-items li a {
display: 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;
}
|
This portion of the Premium Design Works website is written by Mike Sinkula for the Web Design & Development students at Seattle Central College and the Human Centered Design & Engineering students at the University of Washington.
Social