Modal menu full screen

Hello,

I would like to know how to realize this type of menus : http://yootheme.com/demo/wordpress theme salt looking the markup i see it is related with modal element. Any idea ?

Yoothemes are all done with uikit, so i am exploring all the fancy things i can do 🙂

Hey Alex,

The Salt theme is using the modal to display the menu as you mentioned. Here is the basic code which would be a good start.

add_action( 'beans_uikit_enqueue_scripts', 'example_enqueue_uikit_assets' );

function example_enqueue_uikit_assets() {

    // Enqueue extra UIkit components.
  beans_uikit_enqueue_components( array( 'modal' ) );

 // Add style.less to the compiler.
  beans_compiler_add_fragment( 'uikit', get_stylesheet_directory_uri() . '/style.less', 'less' );

}

// Modify primary menu type to stack as it would in a sidenav.
add_filter( 'beans_primary_menu_args', 'example_primary_menu_args' );

function example_primary_menu_args( $args ) {

  return array_merge( $args, array(
   'beans_type' => 'sidenav'
 ) );

}

// Add the modal menu button.
add_action( 'beans_site_branding_after_markup', 'example_modal_menu_button' );

function example_modal_menu_button() {

  ?>
  <a class="uk-float-right" href="#example-modal-menu" data-uk-modal>
   <i class="uk-icon-navicon"></i>
 </a>
  <?php

}

// Add the modal menu with an action to which the menu will be attached.
add_action( 'beans_site_after_markup', 'example_modal_menu' );

function example_modal_menu() {

 ?>
  <div id="example-modal-menu" class="uk-modal">
      <a class="uk-modal-close uk-close"></a>
     <div class="uk-modal-dialog">
         <?php do_action( 'example_modal_menu' ); ?>
     </div>
  </div>
  <?php

}

// Change the primary menu hook to the new modal hook and remove floating class.
beans_modify_action_hook( 'beans_primary_menu', 'example_modal_menu' );
beans_remove_attribute( 'beans_primary_menu', 'class', 'uk-float-right' );

// Move the primary menu offcanvas button back to the header.
beans_modify_action_hook( 'beans_primary_menu_offcanvas_button', 'beans_site_branding_after_markup' );

Here is some basic LESS as a starter point:

#example-modal-menu {
  background: #fff;

 .uk-modal-close {
   position: absolute;
   top: 80px;
    right: 70px;
  }
}

I will let you style the menu etc. according to your needs.

In the theme they add a widget area for the menu which you can totally do too. If you want to go that root you just need to register a widget area and output it in the modal. In that case you can simply remove the primary nav and add a menu widget in your new widget area.

Have fun,

Thank you so much ! I'm going to play with that !

It works ! Thank you ! One question, i would not have found by myself the filter for the menu args, can you point me where is that in the doc. And how to change the menu structure un general.

Hey Alex,

To find these kind of filters, you either have to look in Beans Core code or look at the available hook in the code reference (for instance, here is the reference for the filter above), just like you would do for WordPress Core.

Regarding changing the menu structure, you can make modification using Beans HTML API like any other elements on the page which has a markup id. Alternatively if you want to completely modify the menu structure, you would do it by removing beans_type argument and register your own menu walker. I am not going to explain in details how the walker works as it standard WordPress and you will find a zillion tutorials about it on the web (here is a tutorial).

Happy coding,

Thank you !