A A A A A

Vertical Navigation Bar Example

Accessibility Features of Example

Example

W3C Web Resources

HTML Code

<h2 class="offscreen">W3C Web Resources</h2>
<div id="vmenu">
<ul>
  <li><a href="http://www.w3.org/Consortium/activities">W3C Activities</a></li>
  <li><a href="http://www.w3.org/TR/">W3C Technical Reports</a></li>
  <li><a href="http://www.w3.org/Consortium/siteindex">W3C Site Index</a></li>
  <li><a href="http://www.w3.org/Consortium/new-to-w3c">New Visitors</a></li>
  <li><a href="http://www.w3.org/Consortium/">About W3C</a></li>
  <li><a href="http://www.w3.org/Consortium/join">Join W3C</a></li>
  <li><a href="http://www.w3.org/Consortium/contact">Contact W3C</a></li>
</ul>  
</div>

CSS Code

/* CSS Document */

.offscreen {
  position: absolute;
  top: -30em;
  left: -300em;
}

div#vmenu {
   margin: 0;
   padding: .25em 0em .25em 0em;
   border: solid 1px #30c9e0;
   background: #fcac4c;
   width: 13.5em;
}

div#vmenu ul {
   margin: 0;
   padding: 0;
   list-style: none;
}

div#vmenu ul li {
   margin: 0;
   padding: 0;
   list-style: none;
}

div#vmenu ul a:link {
   margin: 0;
   padding: .2em 0em .2em .4em;
   text-decoration: none;
   font-weight: bold;
   font-size: medium;
   background-color: #fcac3c;
   color: #0059a0;
   display: block;
}

div#vmenu ul a:active {
   margin: 0;
   padding: .25em .5em .25em .5em;
   text-decoration: none;
   font-weight: bold;
   font-size: medium;
   background: #4d8cba;
   color: #ffffff;
   display: block;
}

div#vmenu ul a:visited {
   margin: 0;
   padding:  .25em .5em .25em .5em;
   text-decoration: none;
   font-weight: bold;
   font-size: medium;
   background: #4d8cba;
   color: #ffffff;
   display: block;
}

div#vmenu ul li a:hover {
   margin: 0;
   padding: .2em 0em .2em .4em;
   text-decoration: none;
   font-weight: bold;
   font-size: medium;
   background-color: #30c9e0;
   color: #ffffff;
   display: block;
}

Navigation

Other HTML Best Practices

Working Group