Vertical jquery menu

by labanino

HTML

<div id="vertical-menu">
    <ul>
        <li class="active">
            	<h3><span class="plus">+</span>Dashboard</h3>

            <ul>
                <li><a href="#">Reports</a>
                </li>
                <li><a href="#">Search</a>
                </li>
                <li><a href="#">Graphs</a>
                </li>
                <li><a href="#">Settings</a>
                </li>
            </ul>
        </li>
        <!-- we will keep this LI open by default -->
        <li>
            	<h3><span class="plus">+</span>Tasks</h3>

            <ul>
                <li><a href="#">Today's tasks</a>
                </li>
                <li><a href="#">Urgent</a>
                </li>
                <li><a href="#">Overdues</a>
                </li>
                <li><a href="#">Recurring</a>
                </li>
                <li><a href="#">Settings</a>
                </li>
            </ul>
        </li>
        <li>
            	<h3><span class="plus">+</span>Favorites</h3>

            <ul>
                <li><a href="#">Global favs</a>
                </li>
                <li><a href="#">My favs</a>
                </li>
                <li><a href="#">Team favs</a>
                </li>
                <li><a href="#">Settings</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

CSS

/*custom font for text*/
 @import url(http://fonts.googleapis.com/css?family=Nunito);

/*Basic reset*/
 * {
    margin: 0;
    padding: 0;
}
body {
    background: #4EB889;
    font-family: Nunito, arial, verdana;
}
#vertical-menu {
    background: #004050;
    width: 250px;
    margin: 100px auto 0 auto;
    color: white;
    /*box-shadow: 
		0 5px 15px 1px rgba(0, 0, 0, 0.6), 
		0 0 200px 1px rgba(255, 255, 255, 0.5);*/
}
/*heading styles*/
 #vertical-menu h3 {
    font-size: 12px;
    line-height: 34px;
    padding: 0 10px;
    cursor: pointer;
    /*fallback for browsers not supporting gradients*/
    background: #003040;
    background: linear-gradient(#003040, #002535);
}
/*heading hover effect*/
 #vertical-menu h3:hover {
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.7);
}
/*iconfont styles*/
 #vertical-menu h3 span {
    font-size: 16px;
    margin-right: 10px;
}
/*list items*/
 #vertical-menu li {
    list-style-type: none;
}
/*links*/
 #vertical-menu ul ul li a {
    color: white;
    text-decoration: none;
    font-size: 11px;
    line-height: 27px;
    display: block;
    padding: 0 15px;
    /*transition for smooth hover animation*/
    transition: all 0.15s;
}
/*hover effect on links*/
 #vertical-menu ul ul li a:hover {
    background: #003545;
    /*border-left: 5px solid lightgreen;*/
}
/*Lets hide the non active LIs by default*/
 #vertical-menu ul ul {
    display: none;
}
#vertical-menu li.active ul {
    display: block;
}

JavaScript

$("#vertical-menu h3").click(function () {
    //slide up all the link lists
    $("#vertical-menu ul ul").slideUp();
    //slide down the link list below the h3 clicked - only if its closed
    if (!$(this).next().is(":visible")) {
        $(this).next().slideDown();
        $(this).remove("span").append('<span class="minus">-</span>');
    }
})