Slide Down Menu

FORKED: http://jsfiddle.net/uuGxe/2/

by colemande

HTML

<html>
<head>
<title>Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
</head>

<body>
   
  <div id="productmenu">
    <div class="submenublock" id="submenu1">
        
        <h3>
            <a href="Cate1" class="link" >Category 1</a>
            <a href='#' class="arrow" ></a>             
        </h3>
        <ul class="second_level">
           <li><a href="page1.html/test" class="link">Option 1</a></li>
           <li><a href="page2.html/test" class="link">Option 2</a></li>
        </ul>
      </div>
        
      <div class="submenublock" id="submenu2">
      
      <h3><a href="Cate2" class="link">Category 2</a></h3>
       
      </div>
        
      <div class="submenublock" id="submenu3">
          <h3>
              <a href="Cate3" class="link">Category 3</a>
              <a href='#' class="arrow" ></a>
          </h3>
           <ul class="second_level">
               <li><a href="page3.html/test" class="link">Option 1
                   </a></li>
               <li><a href="page4.html/test" class="link">Option 2
                   </a></li>
               <li><a href="page5.html/test" class="link">Option 3
                   </a></li>
           </ul>
      </div>
           
     
   </div>
    
</body>

CSS

#sidebar {
   float:left;
   width:220px;
}


#productmenu { width:220px; margin-left: 0px;}

.submenublock{
    
    margin: 0px;
    padding: 0px;
    
}

.submenublock h3{
    font-family:Arial, Helvetica, sans-serif;
    font-size:15px;
    margin: 0px; 
    border-bottom:#CCC 1px solid;
}

.submenublock h3 a{
    font-family:Arial, Helvetica, sans-serif;
    font-size:15px;
    text-decoration:none;
    color: #000000;
    
}

.submenublock h3 a:hover, .submenublock h3 a:active, .submenublock h3 a:focus
{
color: #00aeef;
}

.second_level{
    list-style-type:none;
    list-style:none;
    margin:0px;
    padding:0px;
    
}

.second_level li{
    list-style-type:none;
    list-style:none;
    display: block;
    border-bottom:#CCC 1px dashed;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    /* background:url(images/menuarrowright.gif) no-repeat right;*/
}

.second_level li a{
    display: block;
     margin-left:15px;
     text-decoration:none;
     color:#000000;
    
    
}

#productmenu ul li a:hover, #productmenu ul li a:active, #productmenu ul li a:focus
{
color: #00aeef;
}


.second_level{
  display:none;
}

a.currentPage{
  color:blue !important;
}

.link{
    padding:10px;15px;
    display:block;
}

.arrow{
   background:url(http://www.worldhypertensionleague.org/Images/SmallDownArrow.png) no-repeat right 2px;
    
    float:right;
    height:17px;
    width:13px;
    margin-top:-27px;
}

.open{
   background:url(http://www.logan.ws/images/small_up_arrow_icon.gif) no-repeat right 2px;
}


</style>

JavaScript

$(document).ready(function() {
    
    $('h3,.second_level li').each(function(){
        var href = $(this).children('a').attr('href');
        
        if(window.location.pathname.search(href) != -1) {
          $(this).children('a').addClass('currentPage')
        }
    });
        
    $('.currentPage').each(function(){
            
        var parent;
        
        if($(this).parent('h3').length > 0){
            parent = $(this).parent('h3');
        }
        else{
            parent = $(this).parents('ul').siblings('h3');
        }
        
        $(parent).children('.arrow').addClass('open');
        $(parent).siblings('ul').show();
                               
    });
   
    $('.link').click(function() {
            
        OpenParent($(this).parent('h3'));
                
        window.location = $(this).attr('href');
        
    });
            
    $('.arrow').click(function(e){
        e.preventDefault();
        OpenParent($(this).parent('h3'));
    
    });        
});
        
function OpenParent(CurrentParent){
   var currentArrow = $(CurrentParent).children('.arrow');
   
   $('.open').not(currentArrow ).removeClass('open').parent().siblings('ul').slideUp('fast');
                
   currentArrow.toggleClass('open');
        
   $(CurrentParent).next().slideToggle('fast');
            
}