Vertical Menu slider

by secretgspot

HTML

<div class="container">
    <ul class="inner">
    
        <li>
            <h2 class="slider-header"><a href="#">Category 1</a></h2>
            <ul class="slider-content" style="display: none; ">
                <li><a href="#">Subcategory 1</a></li>    
                <li><a href="#">Subcategory 2</a></li>    
                <li><a href="#">Subcategory 3</a></li>    
                <li><a href="#">Subcategory 4</a></li>    
                <li><a href="#">Subcategory 5</a></li>    
                <li><a href="#">Subcategory 6</a></li>    
            </ul>
        </li>
        
        <li>
            <h2 class="slider-header"><a href="#">Category 2</a></h2>
            <ul class="slider-content" style="display: none; ">
                <li><a href="#">Subcategory 1</a></li>    
                <li><a href="#">Subcategory 2</a></li>    
            </ul>
        </li>
        
        <li>
            <h2 class="slider-header active"><a href="#">Category 3</a></h2>
            <ul class="slider-content" style="display: block; ">
                <li><a href="#">Subcategory 1</a></li>    
                <li><a href="#">Subcategory 2</a></li>    
                <li><a href="#">Subcategory 3</a></li>    
                <li><a href="#">Subcategory 4</a></li>            
            </ul>
        </li>
        
        <li>
            <h2 class="slider-header"><a href="#">Category 4</a></h2>
            <ul class="slider-content" style="display: none; ">
                <li><a href="#">Subcategory 1</a></li>    
                <li><a href="#">Subcategory 2</a></li>    
                <li><a href="#">Subcategory 3</a></li>    
                <li><a href="#">Subcategory 4</a></li>    
                <li><a href="#">Subcategory 5</a></li>    
            </ul>
        </li>
        
        <li>
            <h2 class="slider-header"><a href="#">Category 5</a></h2>
            <ul class="slider-content" style="display: none; ">
                <li><a...

CSS

body {
    font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 100px 0 0 0;
    background: #dedfe1 url('images/background.png') repeat;
}

.container {
    width: 300px;
    margin: 0 auto;
    background: #4b5057;
    -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
    -moz-box-shadow: inset 0px 0px 1px rgba(255, 255, 255, 0.5);
    -webkit-box-shadow: inset 0px 0px 1px rgba(255, 255, 255, 0.5);
    box-shadow: inset 0px 0px 1px rgba(255, 255, 255, 0.5);
    border: 1px solid #4b5057;
}

ul.inner {
    list-style: none;
    background: #fff;
    -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
    width: 286px;
    margin: 6px;
    padding: 1px;
}

h2.slider-header {
    padding: 0; 
    font-size: 14px;
    margin: 3px;
    height: 44px;
    line-height: 44px;
    width: 278px;
    border: 1px solid #cccaca;
    -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
    background: #f9f9f9;
    background: -moz-linear-gradient(top, #f9f9f9 0%, #eaeaea 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(100%,#eaeaea));
    background: -webkit-linear-gradient(top, #f9f9f9 0%,#eaeaea 100%);
    background: -o-linear-gradient(top, #f9f9f9 0%,#eaeaea 100%);
    background: -ms-linear-gradient(top, #f9f9f9 0%,#eaeaea 100%);
    background: linear-gradient(top, #f9f9f9 0%,#eaeaea 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#eaeaea',GradientType=0 );
    -moz-box-shadow: inset 0px 0px 0px 1px #fff;
    -webkit-box-shadow: inset 0px 0px 0px 1px #fff;
    box-shadow: inset 0px 0px 0px 1px #fff;
}

h2.slider-header:hover {
    background: #ffffff;
    background: -moz-linear-gradient(top,  #ffffff 0%, #f1f1f1 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f1f1f1));
    background:...

JavaScript

$('.slider-content').hide();
$('.slider-header:first').addClass('active').next().show();
$('.slider-header').click(function(){
    if( $(this).next().is(':hidden') ) { 
        $('.slider-header').removeClass('active').next().slideUp(); 
        $(this).toggleClass('active').next().slideDown();
    }
    return false;
    });