Dynamically changing bottomToTopSubMenus value

[juiceboxint]

I am building a site where the navigation will start out at the bottom of the screen and then will stick to the top once the user scrolls down a bit. I need for the menu to start out in bottomToTop (dropup) mode, but then to switch to dropdown mode once a certain scroll position has been reached.

I’ve tried destroying the menu and recreating it each time the orientation needs to change, but 1) that seems like overkill, and 2) it’s causing issues when I destroy a menu that has not yet been instantiated.

So, what I need is either a way to switch this one mode without destroying and re-instantiating, or else a reliable way of telling if the menu has already been instantiated so that I don’t try to destroy it if it doesn’t exist.

The first would be preferable, but I can probably get by with the second as well.

Thank you!

[juiceboxint]

I found a post on the 0.9.x forums that got me most of the way there and dug through the code to get the rest. Here’s what I ended up doing:

// Switch the mode of the submenu dropdowns, or instantiate the menu
// for the first time if it hasn't happened yet.
function navMode(dropMode) {

	if (typeof dropMode === 'undefined' || dropMode !== 'dropUp') {
		dropMode = 'dropDown';
	}

	// If the nav has not yet been set up, set it up with the default options.
	if (typeof jQuery('.main-menu__items').data('smartmenus') === 'undefined') {
		setupNav();
	}

	// If the mode is different than the one we passed in, change the option on the fly.
	// The subOrientation variable is global and contains the current state so we don't do the actions any more often than necessary.
	if (subOrientation != dropMode) {
		subOrientation = dropMode;
		if (dropMode == 'dropUp') {
			jQuery('.main-menu__items').data('smartmenus').opts.bottomToTopSubMenus = true;
		} else {
			jQuery('.main-menu__items').data('smartmenus').opts.bottomToTopSubMenus = false;
		}
	}
}

The setupNav() function holds the main initialization function along with as the setup of the menu animations. Now I can use this navMode() function as often as needed since it’s very low-overhead and only does something when it needs to.

[Author]

Posts