1

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:

enter image description here

And once expanded it would show the menu items.

enter image description here


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>
6
  • 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 Apr 16 '20 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 Apr 17 '20 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 Apr 17 '20 at 17:52
  • @TonyDjukic No rush at all. Thank you so much sir! – Rocket_Mouth Apr 17 '20 at 18:05
  • Did you get it working? Just following up. – Tony Djukic Apr 21 '20 at 3:10
0

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.

2
  • Wow! Thank you for this. I have it somewhat implemented but it doesn't seem to "expand" and push the content below it down. It's more of a dropdown overlay? – Rocket_Mouth Apr 19 '20 at 17:27
  • That's probably a positioning issue in the existing CSS. If the items are floated or positioned 'absolute' they won't push down the other content, they'll expand without impacting the rest of the elements around them. – Tony Djukic Apr 19 '20 at 17:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.