Expandable left bar : Navigation Bar « CSS Controls « HTML / CSS

HTML / CSS » CSS Controls » Navigation Bar 
Expandable left bar
  
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title></title>
    <style type="text/css">
    #menulink {
      display: none;
    }

    a:link {
    color: #777;
    text-decoration: none;
    }

    a:visited {
      color: #333;
      text-decoration: none;

    }

  a:link:hover, a:visited:hover  {
    color: #777;
    background-color: #ccc;
  }

  a:link:active, a:visited:active {
    color: #ccc;
    background-color: #ccc;
  }
    </style>
    <script type="text/javascript">

      function toggle(zap) {
      if (document.getElementById) {
        var abra = document.getElementById(zap).style;
        if (abra.display == "block") {
          abra.display = "none";
          else {
          abra.display = "block"
          }
        return false
        else {
        return true
        }
      }

    </script>

  </head>
  <body>
  <div id="navsite">
  <ul>
   <li><a href="http://www.java2s.com">Home</a></li>
   <li><a href="http://www.java2s.com">Home</a></li>
   <li><a href="http://www.java2s.com">Home</a></li>
    <li><a href="http://www.java2s.com">Home</a></li>
   <li><a href="http://www.java2s.com">Home</a></li>
   <li><a href="http://www.java2s.com">Home</a></li>
  </ul>
  <h5><a href="#" onclick="return toggle('menulink');">Links (+/-)(Click me to expand)</a></h5>
  <ul id="menulink">
   <li><a href="http://www.java2s.com">Home</a></li>
   <li><a href="http://www.java2s.com">Home</a></li>
   <li><a href="http://www.java2s.com">Home</a></li>
    <li><a href="http://www.java2s.com">Home</a></li>
   <li><a href="http://www.java2s.com">Home</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.Left bar menu
5.Horizontal menu
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
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.