Side Menu Icon Expandable

Question

it’s not perfect and you’ll probably want to re-tool and modify it all a bit to get it exactly the way you want but the principals are here. (I had to end up animating the height with jQuery because the heights are dynamic and we can’t set a value in CSS.)

Here’s the HTML:

<div class="menu-risk-menu-container">
    <ul id="menu-risk-menu" class="menu">
        <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Environmental Health &amp; Safety</a>
            <ul class="dropdown-menu" role="menu" x-placement="bottom-start">
                <li><a href="http://wordpress.stackexchange.com/page/link">EH&amp;S</a></li>
                <li><a href="http://wordpress.stackexchange.com/page/link">Main</a></li>
            </ul>
        </li>
        <li class="dropdown "><a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu Heading 2</a>
            <ul class="dropdown-menu" role="menu">
                <li><a href="page/link">IIPP</a></li>
            </ul>
        </li>
    </ul>
</div>

Then we need the CSS in the stylesheet:

*{
    box-sizing:border-box;
}
a{
    text-decoration:none;
}
.menu-risk-menu-container{
    display:block;
    width:50%;
}
#menu-risk-menu{
    list-style-type:none;
    padding:1em;
    border: 1px solid #AAA;
}
#menu-risk-menu li.dropdown{
    display:block;
    width:100%;
    padding:0.5em 0.5em;
}
.dropdown-menu{
    display:block;
    position:relative;
    top:-0.5em;
    width:100%;
    overflow:hidden;
    list-style-type:none;
    -webkit-transition: opacity 1.5s ease-out, top 0.5s ease-out;
    -moz-transition: opacity 1.5s ease-out, top 0.5s ease-out;
    -o-transition: opacity 1.5s ease-out, top 0.5s ease-out;
    transition: opacity 1.5s ease-out, top 0.5s ease-out;
    height:0;
    opacity:0;
    margin-left:1em;
}
.dropdown-menu.activated{
    top:0;
    opacity:1;
    height:auto;
}
.dropdown-menu li{
    margin:0 auto;
    padding:0.25em;
}
.dropdown-toggle:before{
    content: '+';
    display:block;
    float:left;
    width:0.75em;
    height:0.75em;
    font-size:1.1em;
    color:#888;
    text-align:center;
    line-height:0.6em;
    margin:0 1em 0 0;
    padding:0.1em;
    border:1px solid #888;
    -webkit-transition:all 1s ease-out;
    -moz-transition:all 1s ease-out;
    -o-transition:all 1s ease-out;
    transition:all 1s ease-out;
}
.dropdown-toggle.is-open:before{
    transform:rotate(90deg);
    color:#444;
}

And finally the jQuery:

jQuery( document ).ready( function($) {
    var riskMenu = $( '#menu-risk-menu' );
    if( $( riskMenu ).length > 0 ) {
        $( '.dropdown-toggle' ).on( 'click', function(e) {
            e.preventDefault(); 
            $( this ).toggleClass( 'is-open' );
            $( this ).closest( '.dropdown' ).find( '.dropdown-menu' ).toggleClass( 'activated' );
            var ddHeight    = $( this ).closest( '.dropdown' ).find( '.activated' ).height();
            $( this ).closest( '.dropdown' ).find( '.dropdown-menu.activated' ).animate( {
                'height': function( index, height ) {
                    return height == ddHeight ? 0 : ddHeight;
                }
            }, 1750 );
            $( this ).attr( 'aria-expanded', function( index, attr ) {
                return attr == 'true' ? false : 'true';
            } );
        } );
    }
} );

I think a lot of the CSS will be something you want to change – I just had to write a bunch extra because I did a little test on my own server.

Hope it works for you.

Related Posts: