Left bar menu : Navigation Bar « CSS Controls « HTML / CSS






Left bar menu

  

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title></title>
    <style type="text/css">
#navsite {
  font-size: 0.7em;
  width: 12em;
  border-right: 1px solid #666;
  padding: 0 0 0 0;
  margin-bottom: 1em;
  float: left;
}

#navsite ul {
  list-style: none;
}

#navsite ul li {
  border-top: 1px solid #003;
}

#navsite ul li a {
  display: block;
  padding: 2px 2px 2px 0.5em;
  border-left: 10px solid #369;
  border-right: 1px solid #69c;
  border-bottom: 1px solid #369;
  background-color: #036;
  color: #fff;
  text-decoration: none;
  width: 100%;
}

html>body #navsite ul li a {
  width: auto;
}

#navsite ul li a:hover {
  border-left: 10px solid #036;
  border-right: 1px solid #69c;
  border-bottom: 1px solid #369;
  background-color: #69f;
  color: #fff;
}

a {
  border-left: 10px solid #f33;
  border-right: 1px solid #f66;
  border-bottom: 1px solid #f33;
  background-color: #fcc;
  color: #333;
}
</style>


  </head>
  <body id="pagespk">
  <div id="navsite">
  <ul>
   <li><a href="http://www.java2s.com" >Home</a></li>
   <li><a href="http://www.java2s.com" >About</a></li>
   <li><a href="http://www.java2s.com" >Archives</a></li>
    <li><a href="http://www.java2s.com" >Writing</a></li>
   <li><a href="http://www.java2s.com" >Speaking</a></li>
   <li><a href="http://www.java2s.com" >Contact</a></li>
  </ul>
  </div>
  </body>
 </html>

   
  








Related examples in the same category

1.Left navigation bar
2.One column with top navigation bar
3.Right navigation bar
4.Horizontal menu
5.Expandable left bar
6.CSS tab based navigational bar
7.Nested List style
8.Styled tab navigation
9.Negative Margins example
10.Horizontal navigation bar with anchor and list
11.Horizontal menu with list
12.Using image only as the top navigation bar
13.Vertical Navigation
14.Horizontal Navigation
15.Highlight top navigation link when mouse hover
16.Links navigation at the bottom
17.One level top navigation bar
18.Navigation bar with selected item
19.Horizontal Nav