Home arrow Style Sheets arrow CSS: Continuing the Clarification of CSS Classification
STYLE SHEETS

CSS: Continuing the Clarification of CSS Classification


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.

Author Info:
By: James Payne
Rating: 5 stars5 stars5 stars5 stars5 stars / 4
May 12, 2008
TABLE OF CONTENTS:
  1. · CSS: Continuing the Clarification of CSS Classification
  2. · Absolutely Relatively Speaking
  3. · Changing the Way You Curse
  4. · Attack of the Invisible Man

print this article
SEARCH DEVARTICLES

CSS: Continuing the Clarification of CSS Classification
(Page 1 of 4 )

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>


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials