Hello Thierry,
Is there an easy way to make a dropdown menu using the uk-dropdown-width-3 without coding the menu in the functions.php? and how do you distribute the items in each corresponding panel?
Thanks Thierry for helping us all.
Hey Mike,
I think the best approach is to create a separate menu for each columns. Then you append the dropdown with the dropdown grid HTML structure and call the menus in each columns. You could even use menu posititions for each column so that it is easy to assign it in the admin.
Do you feel ready to take on the challenge or do you need a hand with that?
Thanks,
Hi Thierry,
I just finished the menu with the uk-dropdown-width-3. This is the code I use and it works perfectly. Any suggestions how can I improve it?
// Add content for dropdown
add_action( 'beans_menu_item_link[_100]_after_markup', 'beans_add_dropdown_menu' );
function beans_add_dropdown_menu() {
?>
<div class="uk-dropdown uk-dropdown-width-3">
<div class="uk-grid uk-dropdown-grid">
<?php wp_nav_menu( array(
'menu' => 'Menu I',
'menu_class' => 'uk-nav uk-nav-dropdown uk-panel',
'container' => 'div',
'container_class' => 'uk-width-1-3',
'theme_location' => 'menu-panel-1',
'beans_type' => 'dropdown' // Using this beans_type because without it beans wouldn't add data-markup-id.
) ); ?>
<?php wp_nav_menu( array(
'menu' => 'Menu II',
'menu_class' => 'uk-nav uk-nav-dropdown uk-panel',
'container' => 'div',
'container_class' => 'uk-width-1-3',
'theme_location' => 'menu-panel-2',
'beans_type' => 'dropdown'
) ); ?>
<?php wp_nav_menu( array(
'menu' => 'Menu III',
'menu_class' => 'uk-nav uk-nav-dropdown uk-panel',
'container' => 'div',
'container_class' => 'uk-width-1-3',
'theme_location' => 'menu-panel-3',
'beans_type' => 'dropdown'
) ); ?>
</div>
</div>
<?php
}
// Add header and divider for panel 1.
add_action( 'beans_menu_item[_213]_before_markup', 'beans_add_header_divider_panel_1' );
function beans_add_header_divider_panel_1() {
?>
<li class="uk-nav-header">Header 1</li>
<li class="uk-nav-divider"></li>
<?php
}
// Add header and divider for panel 2.
add_action( 'beans_menu_item[_214]_before_markup', 'beans_add_header_divider_panel_2' );
function beans_add_header_divider_panel_2() {
?>
<li class="uk-nav-header">Header 2</li>
<li class="uk-nav-divider"></li>
<?php
}
// Add header and divider for panel 3.
add_action( 'beans_menu_item[_218]_before_markup', 'beans_add_header_divider_panel_3' );
function beans_add_header_divider_panel_3() {
?>
<li class="uk-nav-header">Header 3</li>
<li class="uk-nav-divider"></li>
<?php
}Hey Mike,
Awesome stuff, this is exactly what I had in mind 🙂 It is indeed very specific to your website since it uses your menu ID's but others may totally use your example and adapt it to their websites.
Great example of using Beans wisely, well done Mike 😉
Hi, I am trying to have a drop down menu with two sub menu's using the code below:
// Add content for dropdown
add_action( 'beans_menu_item_link[_172]_after_markup', 'beans_add_dropdown_menu' );
function beans_add_dropdown_menu() {
?>
<div class="uk-dropdown uk-dropdown-width-3">
<div class="uk-grid uk-dropdown-grid">
<?php wp_nav_menu( array(
'menu' => 'Program menu',
'menu_class' => 'uk-nav uk-nav-dropdown uk-panel',
'container' => 'div',
'container_class' => 'uk-width-1-3',
'theme_location' => 'menu-panel-1',
'beans_type' => 'dropdown' // Using this beans_type because without it beans wouldn't add data-markup-id.
) ); ?>
<?php wp_nav_menu( array(
'menu' => 'Methodology menu',
'menu_class' => 'uk-nav uk-nav-dropdown uk-panel',
'container' => 'div',
'container_class' => 'uk-width-1-3',
'theme_location' => 'menu-panel-2',
'beans_type' => 'dropdown'
) ); ?>
</div>
</div>
<?php
}When I check the html I see the menu's appearing under the link but on screen they are hidding and the menu lacks hover functionality to make the menus visible + to show the arrow symbol indicating submenu's. What should i add to get that working?
Thanks Bas
Hey Bas,
This is a little bit complex and there are two ways to approach it.
First option
You add a flag that your menu item has children using the as follow:
add_filter( 'wp_nav_menu_objects', 'example_add_menu_children_flag' );
function example_add_menu_children_flag( $menu_items ) {
$menu_item = wp_filter_object_list( $menu_items, array( 'ID' => 172 ) );
// Add children flag for the targeted menu item.
if ( ! empty( $menu_item ) ) {
$key = array_keys( $menu_item );
$menu_items[ $key[0] ]->classes[] = 'menu-item-has-children';
}
return $menu_items;
}Second option
You add a placeholder menu item in the admin menu and then use that dropdown hooks to add your content, classes etc. and remove the menu item via the code using Beans HTML API.
Have fun,
Thanks Thierry, will try this.
hello, here I post my solution for menu with 2 columns
// Register menu for blog grid
add_action( 'init', 'register_blog_submenus' );
function register_blog_submenus() {
register_nav_menu( 'blog-col-1', __( 'blog-col-1' ) );
register_nav_menu( 'blog-col-2', __( 'blog-col-2' ) );
}
// Add dropdown grid 2x to Blog menu
$blog_menu_id = 573;
add_action( 'beans_menu_item_link[_' . $blog_menu_id . ']_after_markup', 'beans_add_dropdown_menu' );
function beans_add_dropdown_menu() {
?>
<div class="uk-dropdown uk-dropdown-navbar uk-dropdown-width-2">
<div class="uk-grid uk-dropdown-grid">
<?php wp_nav_menu( array(
'menu' => 'Menu I',
'menu_class' => 'uk-nav uk-nav-dropdown uk-panel',
'container' => 'div',
'container_class' => 'uk-width-1-2',
'theme_location' => 'blog-col-1',
'beans_type' => 'dropdown'
) ); ?>
<?php wp_nav_menu( array(
'menu' => 'Menu II',
'menu_class' => 'uk-nav uk-nav-dropdown uk-panel',
'container' => 'div',
'container_class' => 'uk-width-1-2',
'theme_location' => 'blog-col-2',
'beans_type' => 'dropdown'
) ); ?>
</div>
</div>
<?php
}
// Flag Blog menu has dropdown children
beans_add_attribute( 'beans_menu_item[_' . $blog_menu_id . ']', 'class', 'menu-item-has-children uk-parent' );
beans_add_attribute( 'beans_menu_item[_' . $blog_menu_id . ']', 'data-uk-dropdown', '' );
// Add caret to dropdown menu
add_action( 'beans_menu_item_link[_' . $blog_menu_id . ']_append_markup', 'add_dropdown_menu_caret' );
function add_dropdown_menu_caret() {
echo '<i class="uk-icon-caret-down uk-margin-small-left"></i>';
}
Hope I'm not too late to jump on this thread.
I'm trying to duplicate what Mike M put together, but I can't figure out what the "100" in beans_menu_item_link[_100]_after_markup pertains to. Putting the menu ID in here does nothing, and putting any menu item makes the <div class="uk-dropdown uk-dropdown-width-3">...</div> part appear in the wrong place.
Hi Kevin,
The 100 correspond to the menu id under which you would like the mega menu to be added. I just tried the code snippet with one of my menu id and it works as expected. Remember to assign menus to the location blog-col-1 and blog-col-2 in the backend (if you are using the snippet above as is).
If that still doesn't work for you, feel free to share a link to your dev install page and I will gladly take a look 😉
Thanks,
Thanks for clarifying! Okay, so the menus assosiated with blog-col-__ are actually partials. That actually makes a lot of sense.
Great, I am glad to here it is more clear to you now 🙂
Have fun,
Is anyone getting this error on page load?
Uncaught TypeError: Cannot read property 'lists' of undefined
at HTMLUListElement.<anonymous> (235c459-ef9c984.js?ver=4.7.1:14)
at MutationObserver.<anonymous> (235c459-ef9c984.js?ver=4.7.1:2)
at a (235c459-ef9c984.js?ver=4.7.1:2)
(anonymous) @ 235c459-ef9c984.js?ver=4.7.1:14
(anonymous) @ 235c459-ef9c984.js?ver=4.7.1:2
a @ 235c459-ef9c984.js?ver=4.7.1:2In addition, I get this error when clicking on any element in the mega menu and (sometimes) when hoving over certain elements.
Uncaught TypeError: Cannot read property 'focus' of undefined
at Object.o.Utils.focus (235c459-ef9c984.js?ver=4.7.1:2)
at i.show (235c459-ef9c984.js?ver=4.7.1:23)
at HTMLDivElement.<anonymous> (235c459-ef9c984.js?ver=4.7.1:23)
at HTMLDivElement.dispatch (jquery.js?ver=1.12.4:3)
at HTMLDivElement.r.handle (jquery.js?ver=1.12.4:3)The errors occur in a script associated with UIKit (not beans). Perhaps UIKit doesn't like what I'm doing to menus?
I've isolated the error to this block of code, although I've also tried using Manuel P.'s code altering just the menu names - same error either way. Tried this using Beans theme and also child theme with minimal customisations.
function beans_add_dropdown_menu() {
?>
<div class="uk-dropdown uk-dropdown-width-3 uk-cover-background" data-uk-dropdown="{delay: 1}" style="background-image: url('https://placeholdit.imgix.net/~text?txtsize=20&txt=200%C3%97400&w=600&h=500');">
<div class="uk-grid uk-dropdown-grid">
<div class="uk-width-1-2">
<?php wp_nav_menu( array(
'menu' => 'Menu I',
'menu_class' => 'uk-nav uk-nav-dropdown uk-panel',
'container' => 'div',
// 'container_class' => 'uk-width-1-1',
'theme_location' => 'menu-panel-1',
'beans_type' => 'dropdown'
) ); ?>
<?php wp_nav_menu( array(
'menu' => 'Menu II',
'menu_class' => 'uk-nav uk-nav-dropdown uk-panel',
'container' => 'div',
// 'container_class' => 'uk-width-1-1',
'theme_location' => 'menu-panel-2',
'beans_type' => 'dropdown'
) ); ?>
<?php wp_nav_menu( array(
'menu' => 'Menu III',
'menu_class' => 'uk-nav uk-nav-dropdown uk-panel',
'container' => 'div',
// 'container_class' => 'uk-width-1-1',
'theme_location' => 'menu-panel-3',
'beans_type' => 'dropdown'
) ); ?>
</div>
<div class="uk-width-1-2">
<img src="https://placeholdit.imgix.net/~text?txtsize=20&txt=200%C3%97400&w=200&h=400" />
</div>
</div>
</div>
<?php
}
add_action( 'beans_menu_item_link[_38]_after_markup', 'beans_add_dropdown_menu' );False alarm! It was this:
data-uk-dropdown="{delay: 1}"
Remove it and things work fine. I was trying to change the delay dropdown time.
Hi Kevin, adding a delay should break anything. That said you should set it in milliseconds so 1000 would mean 1 second.
the only problem with hooking into beans_menu_item_link[_' . $blog_menu_id . ']_after_markup is that offcanvas menu is affected too
how can we check if we are in offcanvas or not?