Skip to content

Instantly share code, notes, and snippets.

@bradpotter
Last active January 4, 2016 11:09
Show Gist options
  • Save bradpotter/8613163 to your computer and use it in GitHub Desktop.
Save bradpotter/8613163 to your computer and use it in GitHub Desktop.
Combine Primary and Secondary Menu into one Responsive Menu
/* Make sure your Menus are named Primary Navigation and Secondary Navigation in Appearance > Menus */
(function( window, $, undefined ) {
'use strict';
$('.nav-primary').before('<button class="menu-toggle" role="button" aria-pressed="false"></button>'); // Add toggles to menus
$('nav .sub-menu').before('<button class="sub-menu-toggle" role="button" aria-pressed="false"></button>'); // Add toggles to sub menus
// Show/hide the navigation
$('.menu-toggle, .sub-menu-toggle').click(function() {
if ($(this).attr('aria-pressed') == 'false' ) {
$(this).attr('aria-pressed', 'true' );
}
else {
$(this).attr('aria-pressed', 'false' );
}
$(this).toggleClass('activated');
$(this).next('nav, .sub-menu').slideToggle('fast', function() {
return false;
// Animation complete.
});
});
var isMobile = window.innerWidth <= 768; // set the variable
isMobile = !isMobile; // force the first resize
$(window).resize(function() {
if(window.innerWidth > 768 && isMobile) {
isMobile = false; // this IS NOT a mobile size
$("#menu-secondary-navigation").appendTo(".nav-secondary .wrap");
$("nav.nav-secondary").show();
}
else if(window.innerWidth <= 768 && !isMobile) {
isMobile = true; // this IS a mobile size
$("#menu-secondary-navigation").insertAfter("#menu-primary-navigation");
$("nav.nav-secondary").hide();
}
});
// check the size when its adjusted...
$(window).trigger('resize');
})( this, jQuery );
@bradpotter
Copy link
Author

Modified code above based on work from https://twitter.com/OzzyR and https://twitter.com/brianbourn

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment