Archived topic
Trying to create a second slide out menu, position-bottom just for html widget
6 replies · Started by Brad on September 5, 2018
I've managed to figure out a lot with some codex and FB group assistance but can't seem to apply the slide out functionality.
Below is the code I added to create the new menu:
function j66_menu_output() {
$menu = '<button type="button" class="button" data-toggle="offCanvas">Menu-offCanvas-2</button>';
$menu .= '
$menu .= '<button class="close-button" aria-label="Close menu" type="button" data-close><span aria-hidden="true">×</span></button>';
$menu .= wp_nav_menu( array(
'menu' => 'Off Canvas Menu Bottom', // Do not fall back to first non-empty menu. Was Primary Menu
'theme_location' => 'off-canvas-menu-bottom',
'fallback_cb' => '__return_false' // Do not fall back to wp_page_menu()
)
);
$menu .= '
';
return $menu;
}
// add_action( 'generate_before_copyright', 'j66_menu_output' );
add_action( 'generate_before_copyright', 'j66_menu_output' );
// end - add off canvas menu position-bottom
// THIS IS LINE 51 - - - -
// https://www.wpbeginner.com/wp-themes/how-to-add-custom-navigation-menus-in-wordpress-3-0-themes/
function j66_off_canvas_menu_bottom() {
register_nav_menu('off-canvas-menu-bottom',__( 'Off Canvas Menu Bottom' ));
}
add_action( 'init', 'j66_off_canvas_menu_bottom' );
Any suggestion? I've been digging around to try to reverse engineer your code as well. I recently purchase GP Premium but have done a lot of customized dev work using page header; hence I'm using version 1.7.2 but not the new elements. All hooks, css, functions I write in my child theme specific files. Currently I can't push most recent site to staging as I'm using the free version of All In One Migration and just went over 512 MB. Thanks is advance for input.
___________
Alternate approach
I have Foundation 6.4 framework for sites enqueued which has nav off canvas features which in Sass is easy to change. Joints Wp theme using foundation 6.4 implemented this option in their theme.
Any thoughts on best approach strategy you'd take before diving in? Thanks in advance.
Zurb Foundation 6.4 off-canvas
https://foundation.zurb.com/sites/docs/off-canvas.html
https://codex.wordpress.org/Navigation_Menus
Note: I'm assuming I'd place the register_menu in the footer via one of these hooks?
generate_after_footer_widgets
generate_after_footer_content
generate_before_cooyright
https://docs.generatepress.com/article/using-hooks/
- - - -
This may not initiate action from bottom of viewport as required.
https://css-tricks.com/couple-takes-sticky-footer/
- - - -
https://developer.wordpress.org/refe…/functions/wp_nav_menu/
Note: Line 44 I changed hook
add_action( 'generate_before_copyright', 'j66_menu_output' );
Screenshot of functions code
https://www.dropbox.com/s/7brclgdl6lib3jc/Screen%20Shot%202018-09-05%20at%209.41.51%20AM.png?dl=0
Hi there,
I'm not seeing anything obvious that's wrong.
Is any of it working? Have you initiated the javascript? Which slideout menu library are you trying to use?
Hi Tom,
Sincere thanks for the reply. Just shut down desktop for the day but will follow back tomorrow. Where I'm lost is how to tap into the js to make this menu a slide out menu. This is a bit beyond my skill set and not really a support issue. Nevertheless, I'm looking for a solution. Love working with your theme. Just upgraded to Premium.
I'm a member of a few WP FB groups include the GP group. I have a thread up from this morning. A few different approaches where suggested for me to try to achieve my goal. If part of the group and like to read through please do. I spent about 4 hrs on this today trying the gp wp suggests with my changes. Again, I'm no expert but am learning.
Intermediate WP FB Group post screenshot
https://www.dropbox.com/s/jlodpaddafvejkd/Screen%20Shot%202018-09-05%20at%207.58.37%20PM.png?dl=0
My html5 site screenshot (link below) of what I basically want to build on this wp site. Section slides up from the bottom on button click. For this wp project, I'm really just going to through a shortcode html enabled widget in a div. Hence, maybe doing the add menu is overkill. I just couldn't figure out how to do this in wp.
My html5 site screenshot. Container on bottom slides up.
https://www.dropbox.com/s/4t9ma8q4acm5g1a/41052047_10157736920693082_932509448037990400_n.jpg?dl=0
If in the WP Group I can Cc you in comments if interested in reading others suggestions. If not, I totally understand as this goes way beyond a support per say.
Thanks for reading. Too much coffee. Coding all day. Off to unwind. Will follow up tomorrow with a more focused reply specific to your reply.
"Is any of it working? Have you initiated the javascript? Which slideout menu library are you trying to use?"
Have a great night. Thanks for your time.
Brad
Ok. New approach. Going to combine my GP addition menu code (which does work!) with a flexbox, css off-canvas solution. I'll add widget areas to the flexbox item boxes.
I couldn’t figure out the gp sliding js code aspect but no worries. Since I'm sliding the container from the bottom up and really only throwing content in there (shortcodes) this seems more streamline for me.
That looks like a great solution :)
