CSS Menu Samples:
You'll note that these are a bit different than the one I did in class. In particular, I've used the html tags <ul> and <li> (these create an "unordered list") and I've applied styles to those tags as well as to the <a href> (link) tags they contain. You may also wish to view the source code of each result below.
Keep in mind that the CSS tricks I've used below are actually very basic. You can, for instance, use background images to really open up the possibilities.
Verticle Menu
css code
<style type="text/css">
<!--
#menu {
margin:0;
padding:10px 10px 5px 10px;
list-style:none;
background:#DDDDDD;
}
#menu li {
margin:0;
padding:0;
display:inline;
}
#menu a {
display:block;
width:180px;
padding:5px;
margin-bottom:5px;
border:1px solid #FFFFFF;
font: bold 12px Verdana, Arial, Helvetica, sans-serif;
background:#3998CF;
color:#FFFFFF;
text-decoration: none;
}
#menu a:hover {
background:#80D4F8;
text-decoration: none;
}
-->
</style>
html code
<ul id="menu">
<li><a href="index.php">HOME</a></li>
<li><a href="business.php">BUSINESS & INDUSTRY</a></li>
<li><a href="healthcare.php">HEALTH CARE</a></li>
<li><a href="hospitality.php">HOSPITALITY</a></li>
<li><a href="college.php">COLLEGE & UNIVERSITY</a></li>
<li><a href="servicearea.php">SUPPLY SERVICE AREA</a></li>
<li><a href="pickup.php">PICK-UP CENTERS</a></li>
<li><a href="tips.php">TIPS & COUPONS</a></li>
<li><a href="contact.php">CONTACT US</a></li>
<li><a href="order.php">LOG - IN</a></li>
<li><a href="new.php">NEW LINK</a></li>
</ul>
Result:
vertical_menu.htm
Horizontal Menu
css code
<style type="text/css">
<!--
#menu {
margin:0;
padding:0;
list-style:none;
}
#menu li {
margin:0;
padding:0;
display:inline;
}
#menu a {
float:left;
display:block;
width:120px;
font:bold 16px Arial, Helvetica, sans-serif;
color: #000;
background-color:#CCCCCC;
margin:3px;
padding:3px;
border:1px dotted #333333;
text-decoration:none;
text-align:center;
}
#menu a:hover {
color: #000000;
background:#80D4F8;
}
-->
</style>
html code
<ul id="menu">
<li><a href="bio.php">Bio</a></li>
<li><a href="resume.php">Resume</a></li>
<li><a href="pictures.php">Pictures</a></li>
<li><a href="scores.php">Scores</a></li>
<li><a href="recordings.php">Recordings</a></li>
<li><a href="contact.php">Contact me</a></li>
</ul>
Result:
horizontal_menu.htm