Off-Canvas menus

Hi Thierry, Could you give mesome tips as to the best way to add off-canvas menus (left and right) to a template page?

I have downloaded your sample template and grabbed some HTML from your examples page. That appears to work but I wanted to make sure that was the proper way to do it.

Hey Steve, indeed I can help you with that! I need a abit more info from you though.

• Do you want the offcanvas to be widget areas? If yes, what would they be called?
• Is it for a specific page template or globally?
• Where do you want the buttons to open it?

Thanks,

Hi Thierry, Thanks for getting back to me. I have a non-Wordpress page on my website that used to be the homepage (https://www.soccerlotto.com/stats.php). I'd like to reproduce this page to be the homepage of my WP installation but with the side menus converted to off-canvas. I would still have a WP horizontal menu as well. I guess (ideally) I'd like the side menus to be configurable from the WP menu setup page. If that's a bit too involved for a support forum question then I could hard code the menu options to begin with.

Thanks, Steve.

No worries, let's do it properly 🙂 So what we need to do is register two widget areas (sidebars). For that, add the code below in your child theme functions.php:

// Register widget areas.
add_action( 'widgets_init', 'beans_child_widget_areas' );

function beans_child_widget_areas() {

  beans_register_widget_area( array(
    'name' => 'Primary Off-canvas',
   'id' => 'primary_offcanvas',
    'beans_type' => 'offcanvas'
 ) );

  beans_register_widget_area( array(
    'name' => 'Secondary Off-canvas',
   'id' => 'secondary_offcanvas',
    'beans_type' => 'offcanvas'
 ) );

}

That will add it to your Admin->Appearance->Widgets in which you will be able to drop any widgets, custom menus in your case (see an example here). This is assuming that you have created your menus via Admin->Appearance->Menus

Then we have to output it in the frontend. Below is the code to paste in a "Sample Template" page template file but you could add it to your functions.php if you wanted it added to your website on all pages (in which case you will not remove beans_load_document() from the code below.

<?php
/* Template Name: Sample Template */

// Add off-canvas buttons before the main grid as an example.
add_action( 'beans_main_grid_before_markup', 'beans_child_view_offcanvas_buttons' );

function beans_child_view_offcanvas_buttons() {

 ?>
  <div class="uk-margin-bottom">
    <a class="uk-button" href="#primary_offcanvas" data-uk-offcanvas><i class="uk-icon-bars uk-margin-small-right"></i> Primary Offcanvas</a>
   <a class="uk-button" href="#secondary_offcanvas" data-uk-offcanvas><i class="uk-icon-bars uk-margin-small-right"></i> Secondary Offcanvas</a>
 </div>
  <?php

}

// Add the off-canvas widget area afther the site closing markup.
add_action( 'beans_site_after_markup', 'beans_child_view_offcanvas' );

function beans_child_view_offcanvas() {

  echo beans_widget_area( 'primary_offcanvas' );
  echo beans_widget_area( 'secondary_offcanvas' );

}

// Add uk-offcanvas-bar-flip to the secondary off-canvas so that it opens from the right.
beans_add_attribute( 'beans_widget_area_offcanvas_bar[_secondary_offcanvas]', 'class', 'uk-offcanvas-bar-flip' );

// Load the document which is always needed at the bottom of page templates.
beans_load_document();

You will see that the buttons are added before the main grid but you may output it anywhere. Let me know if you need help with that 🙂 You will see that we add the uk-offcanvas-bar-flip to the secondary sidebar so that opens from the right as per the UIkit documentation.

If you have sub-menu items, you might see that the arrow are flushed to the side which isn't supposed to be the case. This little bug slipped through when we updraging UIkit in Beans 1.3.0 but it is fixed for the next version. In the mean time, you may download this patched version which address the issue. You won't have to do anything when you update as it will automatically fix it.

Please let me know if you have any questions or if you need the script to be adapted to your needs.

Happy coding,

Thank you Thierry. That is just brilliant. Making them widget areas means I can drop other functionality into there as well. Superb!

This also gives me some examples of Beans function calls in action. I think I now have a better idea of how they are used. I'm going to revisit your docs section now and experiment with some of the functionality.

I've read some very positive comments (on here and other websites) by some people who are obviously very capable and experienced developers. That fills me with confidence that Beans is definitely worth persevering with.

Would you consider doing a blog with some examples/tutorials such as the one you have given me here? Maybe accept some from other developers on this forum? Videos maybe nice but not essential. Although that might attract some new users from Youtube.

I am an older developer (52) and have a lot of years of programming under my belt but I'm fairly new to working under the hood with Wordpress. I think I might be quite useful to you as a 'guinea pig' test subject. Like I said, I'll revisit the docs section and let you know how I'm getting on.

Thanks again Thierry. You've done amazing work here. I hope it's a massive success for you.

Hey Steve, I am glad to hear that I could help!

Writing tutorials is definitely on the road map. I believe in doing thing properly and everything is going very quickly since Beans was launched. One of the priority was to get the Community Forum going so that other users can benefit from answers and it seems like it is going well since it was launched last week. This also gives us an idea of what people are after and will help writing targeted tutorials.

As you suggested, contributors are definitely welcome to send or share their tutorials like @chris did in this article. Some users have offered to contribute financially too so I have opened a Paypal account and a section will be added to Beans home page soon. In fact, driving contributions (tutorials, dev, interntionalization, fundings etc.) is high up on the list as it will make Beans grow faster and better.

Please don't hesitate to ask if you have any questions or suggestions 🙂

PS: do you receive email notifications when I reply to this topic?

No I haven't been receiving emails.

Hey Steve, thanks for your reply.

I have done some work on that side and you should receive notifications from now onward. Kindly let me know if you don't.

Thanks 🙂

Yep. Receiving emails now. Thanks Thierry.

Hi Thierry, How can I make the menu items dropdown on hover rather than click?

Hey Steve,

Are you refering to the off-canvas menu? If yes, UIkit doesn't have any hover state for the off-canvas menu. Usually it is used for mobiles which don't have over states. You would have to write a little bit if JS to trigger to open state.

Thanks Thierry, I get your point. I am using off-canvas for two menus (left and right) packed with lots of options. Using Off-canvas leaves us loads of space to use for other things. I'll look into a little bit of J.S.

Hi Thierry, Could you tell me how I can increase the size of the central column and reduce the outer columns. E.g. 1-6, 4-6, 1-6

I have tried:

beans_replace_attribute( 'beans_primary', 'class', 'uk-width-medium-2-4', 'uk-width-4-6' );
beans_replace_attribute( 'beans_sidebar_primary', 'class', 'uk-width-medium-1-4', 'uk-width-1-6' );
beans_replace_attribute( 'beans_sidebar_secondary', 'class', 'uk-width-medium-1-4', 'uk-width-1-6' );

but although that did replace the attributes the page did not format correctly.

Ah! I think I might have it. The push/pull attribs?

beans_replace_attribute( 'beans_primary', 'class', 'uk-width-medium-2-4', 'uk-width-medium-4-6' );
beans_replace_attribute( 'beans_primary', 'class', 'uk-push-1-4', 'uk-push-1-6' );

beans_replace_attribute( 'beans_sidebar_primary', 'class', 'uk-width-medium-1-4', 'uk-width-medium-1-6' );
beans_replace_attribute( 'beans_sidebar_primary', 'class', 'uk-pull-2-4', 'uk-pull-4-6' );

beans_replace_attribute( 'beans_sidebar_secondary', 'class', 'uk-width-medium-1-4', 'uk-width-medium-1-6' );

seems to do the trick. Is that the correct way of doing it?

Hey Steve,

That would work but there is a simpler way of doing it using the beans_layout_grid_setting filter. In your example you would add

add_filter( 'beans_layout_grid_settings', 'example_modify_grid' );

function example_modify_grid( $args ) { 

    return array_merge( $args, array(
        'grid' => 6,
        'sidebar_primary' => 1,
        'sidebar_secondary' => 1,
        'breakpoint' => 'medium' // medium is the default but you may change to breackpoint to small or large
    ) );

}

See we are setting the total grid to 6 and then each sidebar to 1. The content is then automatically calculated, 4 in this example 🙂

Hope that helps,

PS: kindly create new discussions when it is a new topic so that it can easily be searched and identified.

Thanks Thierry.