CSS: Continuing the Clarification of CSS Classification
(Page 1 of 4 )
In our last CSS tutorial, published about a month ago, we covered some of the Classification properties, which allow you to display elements, position them, choose where they will appear, control their visibility, and a whole lot more. In this article we will finish the discussion.
Creating a Vertical Menu
In the last episode we learned how to make a horizontal menu with some CSS style. Here we will learn to create a vertical menu. First we will create the .css file:
<style type="text/css">
#vmenu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
width: 150px;
padding: 0px;
margin: 0px;
}
#vmenu ul {
list-style: none;
margin: 0px;
padding: 0px;
border: none;
}
#vmenu ul li {
margin: 0px;
padding: 0px;
}
#vmenu ul li a {
font-size: 80%;
display: block;
border-bottom: 1px dashed #C39C4E;
padding: 5px 0px 2px 4px;
text-decoration: none;
color: #666666;
width:160px;
}
#vmenu ul li a:hover, #vmenu ul li a:focus {
color: #000000;
background-color: #eeeeee;
}
</style>
Next we will create the HTML:
<div id="vmenu">
<ul>
<li><a href="#" tabindex="1">Home</a></li>
<li><a href="#" tabindex="2">Content</a></li>
<li><a href="#" tabindex="3">Pictures</a></li>
<li><a href="#" tabindex="4">Games</a></li>
<li><a href="#" tabindex="5">Contact Us</a></li>
<li><a href="#" tabindex="6">Links</a></li>
</ul>
</div>
You can also design the menu in one file, like so:
<html>
<head>
<title>Your Website</title>
<style type="text/css">
body {
background-color: #D5D6AE;
}
ul.vmenu {
padding: 0;
margin: 0;
list-style: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
border-bottom: 1px solid #6F3E04;
width: 100px;
background-color: #EEEEDC;
}
ul.vmenu li {
border-top: 1px solid #6F3E04;
border-left: 1px solid #6F3E04;
border-right: 1px solid #6F3E04;
}
ul.vmenu li a {
text-decoration: none;
display: block;
width: 78px;
color: #333333;
font-weight: bold;
padding: 2px 10px;
}
ul.vmenu li a:hover {
background-color: #B9BB79;
color: #EEEEDC;
}
</style>
</head>
<body>
<ul class="vmenumenu">
<li><a href="home.html">Home</a></li>
<li><a href="images.html">Images</a></li>
<li><a href="aboutus.html">About Us</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</body>
</html>
Next: Absolutely Relatively Speaking >>
More Style Sheets Articles
More By James Payne
