Change off-canvas menu with a toggle menu

Hi Thierry,

Recently, I read the UIkit documentation. As I read, I found that UIkit has toggle component. I think it will be great if the toggle component can be used to show a menu. I mean instead of showing off-canvas menu, the .uk-button.uk-hidden-large show a menu like this example or like this one.

I think and I believe it can be done with Beans. I just don't know how to make it happen. Would you mind to show how to make it?

Thanks,

Pandhu

Hi Pandhu,

Of course it can be done, pretty much everything can be done 😉

Below is an example code snippet that you would add in your child theme functions.php. Note that I did not add styling other than basic UIkit classes so it is up to you to adapt it to your needs. Kindly read to the code inline comments which explains what the code are doing.

// Remove all traces of the offcanvas.
remove_theme_support( 'offcanvas-menu' );

// Add class to hide desktop primary nav which was removed with the off-canvas support.
beans_add_attribute( 'beans_menu[_navbar][_primary]', 'class', 'uk-visible-large' );

// Add the "toggle" uikit component, make sure you don't duplicate the 'beans_uikit_enqueue_scripts' callback if you already have one.
add_action( 'beans_uikit_enqueue_scripts', 'example_enqueue_uikit_assets' );

function example_enqueue_uikit_assets() {

  beans_uikit_enqueue_components( array( 'toggle' ) );

}

// Add primary mobile nav toggle button.
add_action( 'beans_primary_menu_append_markup', 'example_primary_menu_toggle' );

function example_primary_menu_toggle() {

 ?><button class="uk-button uk-hidden-large" data-uk-toggle="{target:'#example-primary-mobile-menu'}"><i class="uk-icon-navicon uk-margin-small-right"></i><?php _e( 'Menu', 'example' ); ?></button><?php

}

// Add primary mobile nav.
add_action( 'beans_header_append_markup', 'example_primary_mobile_menu' );

function example_primary_mobile_menu() {

  ?>
  <div id="example-primary-mobile-menu" class="uk-hidden uk-container uk-container-center">
   <div class="uk-panel-box uk-panel-box-secondary uk-margin-top">
     <?php wp_nav_menu( array(
       'theme_location' => has_nav_menu( 'primary' ) ? 'primary' : '',
       'fallback_cb' => 'beans_no_menu_notice',
        'container' => '',
        'beans_type' => 'sidenav' // This is giving the sidenav menu style for the sake of the example.
     ) ); ?>
   </div>
  </div>
  <?php

}

This is just a basic example which can be adjusted to your needs. You may take it much further usage various UIkit features which I will let you look for 🙂

Happy coding,

Thanks for the code Thierry. It works great, just like what I want. Here is the menu screenshot.

With a lot of customization can be done, Beans is great theme.

Hi Thierry,

I got a problem with the toggle menu. The menu was doing well until I turned on "Compile all WordPress styles", "Compile all WordPress scripts", select "Aggressive" in "Compile all WordPress scripts" dropdown, and turned off "Enable development mode".

After doing that, the toggle menu is not work. Nothing happen when I click the toggle button. What might be happen here? Do you have any solution?

Thanks

Hey Pandhu,

The first thing that comes to my mind is a JavaScript conflict. Could you make sure to Flush Asset in Appearance->Settings. It that doesn't help, please provide a link to your side and I will take a look.

Thanks,

I have done your suggestion. It seems nothing changed.

You might be right. When I turned off the "Compile all WordPress scripts" the toggle menu was working.

This is the site.

Hi Pandhu, it looks look jQuery query isn't compile with the rest. I have sent you a Private Message so that I can take a closer look at your site and will update this post once it is sorted.

Thanks,

Hey Pandhu

It would be great if you can share the finished results code functions and the CSS so we all can learn how you did this. If you can also add some inline comments that would also be helpful. If we all share the results of what we went out to accomplish then everyone else can also benefit from the result.

Hey @paaljoachim,

I used the code @thierry provided above as I only need that. But I think you can add animation for the toggle button.

// Add primary mobile nav toggle button.
add_action( 'beans_primary_menu_append_markup', 'example_primary_menu_toggle' );

function example_primary_menu_toggle() {

    ?><button class="uk-button uk-hidden-large" data-uk-toggle="{target:'#example-primary-mobile-menu'}"><i class="uk-icon-navicon uk-margin-small-right"></i><?php _e( 'Menu', 'example' ); ?></button><?php

}

// You can add the animation on the data-uk-toggle
// data-uk-toggle="{target:'#example-primary-mobile-menu', animation:'uk-animation-slide-left, uk-animation-slide-bottom'}"

For the animation, you can see at the uikit documentation.