Side Menu Icon Expandable

Question

I've been searching for the proper way to create a dynamic side menu for my Understrap Child Theme.

I'm trying to creating something that if the menu has children then the icon will show allowing to expand the content.

---

So the title would like like this:

And once expanded it would show the menu items.

---

I've been messing around with custom Walker classes as well as bouncing back and forth between the bootstrap and wordpress documentation (using Understrap)

I just can't seem to figure it out. I can create a dropdown, but I need the content to expand and push down everything else.

Any ideas?

EDIT: Added Code

<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" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 22px, 0px);">

               <li><a href="/page/link">EH&amp;S</a></li>

               <li class="active"><a href="/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>

Answer 1

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="/page/link">EH&amp;S</a></li>
                <li><a href="/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.