Expand the menu to current site on page load for mobile view only

[Frank]

Thanks for your fantastic and multifunctional menu which I really like a lot!
How can the menu be expanded to the current site on page load only for the mobile view?

So far I added
$('#main-menu').smartmenus('itemActivate', $('#main-menu a.current').eq(-1));
and set hideOnClick: false

Both executed ondomready as described here http://www.smartmenus.org/forums/topic/vertical-menu-expanded-on-page-load/

It works fine for the desktop and mobile view, the result can be seen on this developmental site: http://tinyurl.com/q4cy5xh

Because it really doesn’t make sense to expand the dropdown menu in dektop view on page load, I want to apply this function only to the mobile version of the menu. The reason is that I find it very practical for the mobile menu, because the user doesn’t have to expand all levels manually when browsing a multilevel menu in deeper sections.

Any help would be appreciated!

Kind regards,
Frank

[admin]

Hi, glad you like the script! 🙂

You could use something like this ondomready instead:

var $mainMenu = $('#main-menu'),
	smObj = $mainMenu.data('smartmenus');
if (smObj.isCollapsible()) {
	$mainMenu.smartmenus('itemActivate', $mainMenu.find('a.current').eq(-1));
}

Cheers!

[Frank]

Thank you very much!

I implemented it and tested it: It works with Chrome and Firefox, also with IE 11, 10 and 9.
However in IE 8 (IE 7 and 6 are neglected), the menu is shown on page load in desktop view (Screenshot: http://tinyurl.com/p8tqpam). I tested IE 8 also via Browserstack, which shows the same result.

Do you have any idea how to get the wanted behaviour also in IE 8?

Cheers,
Frank

[admin]

Sorry for the late reply! Although, it’s a bit difficult to test it right away, I guess this is caused by Respond.js which most probably applies the desktop styles in IE8 after the domready event. So, I would suggest to just exclude IE7/8 like this:

if (!window.respond) {
	var $mainMenu = $('#main-menu'),
		smObj = $mainMenu.data('smartmenus');
	if (smObj.isCollapsible()) {
		$mainMenu.smartmenus('itemActivate', $mainMenu.find('a.current').eq(-1));
	}
}

This means that the menu will not be expanded just for IE7/8 mobile users (if there are any of those at all nowadays).

[Frank]

Thanks again!! With this conditional statement the menu is now collapsed in desktop view on page load in IE8.

Testing it in IE10 with browser modus IE8 or with IETester (http://www.my-debugbar.com/wiki/IETester/HomePage), there is a little delay in IE8 on page load concerning the media queries: Some elements with “display: none;” are hidden with a very short delay, maybe some milliseconds, but this doesn’t really matter. The number of people using IE8 is happily very low and will soon be irrelevant.

[admin]

Yep, most devs I know actually don’t worry about IE7/8 at all any more. Now that major services do not support them, it’s pretty obvious to any user of those browsers that they can’t expect perfect experience on any modern website.

[Author]

Posts