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>

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>

• menus
• css
• twitter-bootstrap

• Can you post the mark-up that outputs in the widget, I can probably put together a jQuery script that can manage this with some CSS. Since you're creating the menu's in WP you have the ability to designate what is a parent and what is a child, so that's parts taken care of, the rest we can do with jQuery and CSS. – Tony Djukic Commented Apr 16, 2020 at 22:43
• @TonyDjukic Here is the code. But would using jQuery be the "proper" way? I've considered just doing it all in CSS but haven't seen a way to make it smooth... – Rocket_Mouth Commented Apr 17, 2020 at 15:44
• It's not much different than sub-menus in header navigation. You want to leverage the CSS transitions and animations to get the smooth feel you want, but you use the jQuery to dynamically add and remove classes based on user input. I'll cobble something together, I just have to meet a deadline for end-of-business today - but once I'm done I'll revisit. Sorry about the delay. – Tony Djukic Commented Apr 17, 2020 at 17:52
• @TonyDjukic No rush at all. Thank you so much sir! – Rocket_Mouth Commented Apr 17, 2020 at 18:05
• Did you get it working? Just following up. – Tony Djukic Commented Apr 21, 2020 at 3:10

1 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.