スライドメニュー（vertical slide menu）

縦スライドメニューです。WordPressのサイドバーで利用することを想定して作成しています。

<!--html-->
<ul class="slmenu">
    <li><a href="#">MENU1</a>
        <ul class="children">
        <li><a href="#">SUB-MENU1</a></li>
        <li><a href="#">SUB-MENU2</a></li>
        <li><a href="#">SUB-MENU3</a></li>
        </ul>
    </li>
    <li><a href="#">MENU2</a></li>
    <li><a href="#">MENU3</a>
        <ul class="children">
        <li><a href="#">SUB-MENU4</a></li>
        <li><a href="#">SUB-MENU5</a></li>
        <li><a href="#">SUB-MENU6</a></li>
        </ul>
    </li>
    <li><a href="#">MENU4</a>
        <ul class="children">
        <li><a href="#">SUB-MENU7</a></li>
        <li><a href="#">SUB-MENU8</a></li>
        <li><a href="#">SUB-MENU9</a></li>
        </ul>
    </li>
    <li><a href="#">MENU5</a></li>
</ul>

<!--css-->
ul.slmenu {
    border-bottom: 1px solid #96d8ce;
    clear: both;
    line-height: 1.4;
    padding: 0;
}
.slmenu li {
    border-top: 1px solid #96d8ce;
    clear: both;
    list-style: none;
    overflow: hidden;
    position: relative;
}
.slmenu li li {
    border-top: 1px dashed #96d8ce;
}
.slmenu a {
    display: block;
    color: #4f7f77;
    float: left;
    padding: 1em 3%;
    width: 94%;
    text-decoration: none;
}
.slmenu a:hover {
    background: #d8f7f2;
}
.slm_btn {
    background: #b7e8e0;
    cursor: pointer;
    float: right;
    height: 3.4em;
    position: absolute;
    right: 0;
    width: 12%;
}
.slm_btn:before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 1;
}
div.slm_btn:hover {
    background-color: #d8f7f2;
}
.slmenu button {
    background: none;
    border-color: #4f7f77;
    border-style: none solid solid none;
    border-width: medium 2px 2px medium;
    cursor: pointer;
    display: block;
    height: 0.8em;
    margin: 0 auto;
    padding: 0;
    position: relative;
    top: 35%;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transition-duration: 0.2s;
    transition-property: transform, top;
    transition-timing-function: ease;
    width: 0.8em;
}
button:focus {
    outline: none;
}
button.selected {
    top: 45%;
    -moz-transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
}
.slmenu li ul {
    background: #fff;
    border: none;
    display: none;
    padding-left: 2em;
}

<!--js-->
$(function(){
    $('.slmenu li:has(ul) a:not(.children a)').after('<div class="slm_btn"><button></button></div>');
    $('.slm_btn').click(function(){
        if($('+ ul',this).css('display')=='none'){
            $('li ul:visible').slideUp('normal');//other ul slideup
            $('+ ul',this).slideDown('normal');//slidedown
            $('.slm_btn .selected').removeClass('selected');//remove .selected from other
            $(this).children('button').addClass('selected');//add .selected active
        }else{
            $('+ ul',this).slideUp('normal');
            $('.selected',this).removeClass('selected');
        }
    });
});

See the Pen jq: slidemenu by nwstcode (@nwst) on CodePen.