Off Canvas Multi / Sub Menu Issue

[mybigbadself]

Looking for help with an off canvas menu.

The off canvas menu works and opens up perfectly, I am running into issues when I add in the submenu tho,

you can see the demo site here: http://pluggedin.ie/wwn-new-theme/ ... You will need to resize the browser screen to see the off canvas menu option, as it is set to work for tablets screen resolution and smaller.

Currently, I am using the reverie walker to display the menu, and removing and adding the necessary classes using jquery. I am also adding the back and level 1 list items with jquery.

I have tested with the foundation off canvas sample code as well and this has the exact same issue as the menu coming from the walker. http://foundation.zurb.com/docs/components/offcanvas.html#idOfLeftMenu

Any Ideas of what is actually going wrong? I suspect it is an actual issue with the implementation of Foundation into Reverie, as the sample code didn't work either when I tested this.

[gpspake]

@AlanMc74 In my experience, the Foundation off canvas implementation is only useful in a very limited number of use cases and starts to break down whenever you want to do anything outside of it's default functionality. I could write an entire essay about this but I'll just keep it simple and say that it's definitely more of a Foundation problem than a reverie problem.

I love Foundation but the approach to off canvas has just never worked for me. I highly recommend disabling that module and either using a 3rd party library or building your own off canvas solution. I've scoured the internet for libraries and tutorials and feel like I've tried them all. What I've found is that off-canvas solutions, in general, are just prone to quirkiness - as a result, you want to make sure that whichever one you decide to go with needs to be simple, independent, and easy to change. (Foundation's definitely isn't.)

I've had a lot of success with this guys approach. I replaced a lot of it with jQuery and added a bunch of changes but after disabling Foundations off canvas module and adding this in, it fits with Foundation nicely and doesn't seem to have any issues.

Good luck.

[mybigbadself]

I have thought about just building my own off canvas solution, but as the functionality is built into foundation I thought I would give that a try first, The plan was once I had got it working to build a custom walker in wordpress for it.

Going write a jquery function to hide the submenu UL and display it when touched / tapped, not a massive job. Thanks for the advise as I think writing up the jQuery now will be quicker than trying to get foundation to play nicely.

[mybigbadself]

So instead of re-inventing the wheel. Quick fix, needs some tidying up is, but here is a quick and nasty solution to show and hide the sub menus.

jQuery( ".off-canvas-list li" ).has( "ul" ).addClass( "has-submenu" );
jQuery( ".off-canvas-list li" ).has( "ul" ).removeClass( "has-dropdown active" );
jQuery( ".off-canvas-list ul" ).has( "li" ).removeClass( "dropdown" );
jQuery( ".has-submenu ul" ).has( "li" ).addClass( "left-submenu" );

jQuery('.off-canvas-list .left-submenu, .off-canvas-list .right-submenu').before('<span class="expand-submenu">+</span>');
jQuery('.off-canvas-list .has-submenu ul').hide();
jQuery( '.expand-submenu' ).click(function() {
   if ( jQuery(this).html() === '+') {
        jQuery(this).html('-');
   } else {
       jQuery(this).html('+');
   }
  jQuery(this).next().slideToggle( "slow");
}); 

and the CSS is:

li.has-submenu { position: relative; }

span.expand-submenu { position: absolute; color: white; top: .25rem; right: 1rem; font-size: 1.5em; }