Vertical menu expanded on page load

[YellowPhoenix]

Hi there,

Firstly I have to say that this menu is awesome! The best one I have seen online.

I’ve been working on a vertical menu and wondering if it’s possible to load the menu expanded to the page level on load? I have the child and parent levels tagged with the ‘current’ class

Thank you

[admin]

Hi,

Just expanding the menu on load is as simple as using the following (after the menu is initialized):

$('#main-menu').smartmenus('itemActivate', $('#main-menu a.current').eq(-1));

But I suspect you probably would like the menu to behave a bit differently than the others. For example, hide it when some other sub menu is shown but show it again automatically after the other one is hidden (i.e. make it sort of sticky). So if you need further tweaks, please explain in details how exactly it should work and also it would help very much if you could post a live example so I could test your exact code.

Cheers!

[YellowPhoenix]

Thanks for the quick reply. I have applied the function you suggested and it works well however yes I would prefer it it stayed ‘sticky’ as once you click on the page, the menu collapses again. Here is the test site example: http://www.gjsmachinery.com.au/test/equipment/new/c244/UV_Printers/?test=1

Cheers

[admin]

OK, as far as I can see, you will just need to use the hideOnClick: false option – i.e.:

	$('#left-menu').smartmenus({
		subMenusSubOffsetX: 1,
		subMenusSubOffsetY: -8,
		hideOnClick: false
	});

Let me know if you have any questions.

Cheers!

[YellowPhoenix]

Thank you so much. Works perfect 🙂

[electricarts]

Hi,

is this behavior limited to a specific level? I’ve a 3 level menu. And the menu is only expanding to the 2nd level and not to the (previously selected) active item at the 3rd level.

Cheers
Mario

[admin]

Nope, it should work fine with any level – e.g.:

https://gjs.co/equipment/new/c133/Dryers/

[electricarts]

Yes, but only in the vertical menu left. In the top main menu not.

[admin]

That’s because @YellowPhoenix doesn’t use the expand logic for the top dropdown menu (it doesn’t make sense to be used for a dropdown menu really), just for the left collapsible menu – i.e. they use just this:

$("#left-menu").smartmenus("itemActivate",$("#left-menu").find("a.current").eq(-1));

If you are having troubles, please post an URL to some kind of demo. On theory it should work, so there must be something wrong with your code.

[electricarts]

Hi Vasil,

i’ve uploaded a quick version of the site to a dev-server:

http://holeben.fomalhaut.uberspace.de/

I’m sure that i’ve made something wrong, but can’t figure out what it is.

[admin]

The following code:

$("#main-menu").smartmenus("itemActivate",$("#main-menu").find("a.current").eq(-1));

must be executed ondomready. So you need to change it like this:

$(function() { $("#main-menu").smartmenus("itemActivate",$("#main-menu").find("a.current").eq(-1)); });

However, unlike @YellowPhoenix, you are using a dropdown menu and not a collapsible one and it doesn’t make big sense to expand it on page load. You can see what I mean, when you fix the above.

[electricarts]

Hi Vasil,

many thanks for your reply! But this was not the behavior i expected. 😉

The client (in contrast to me) wants it like that: A dropdown or collapsible menu which expands when clicking and/or hovering. When the menu entry is selected (or clicking somewhere else) the menu tree is closing. After the page is loaded and he hovers again the menu, he wants the menu expanded to the active page. Something like at @YellowPhoenix site, but only expanding the menu on hover to the active page.

[electricarts]

Hi,

sorry for asking again. 😉 Is it possible to expand the Menu on mouse-hover/click to the active page, which is at the 3rd level? Like in the screenshot below. Right now it only expands to the 2nd level when clicking on the 1st level entry.

Cheers
Mario

http://extras.electricarts.de/snaps/smartmenu-3rdlevel.png

[admin]

Yep, you can achieve it by using the following mod:

$(function() {
	$('#main-menu').bind('activate.smapi', function(e, item) {
		var $deepestCurrent = $('#main-menu a.current').eq(-1);
		if ($(item).is('#main-menu > li > a.current') && item != $deepestCurrent[0]) {
			setTimeout(function() { $('#main-menu').smartmenus('itemActivate', $deepestCurrent); });
		}
	});
});

Let me know if you have any troubles.

[electricarts]

Hi Vasil,

sorry for the delay in replying. But the client didn’t respond and drives me crazy. 😡 😉

The menu now expands to the active page. Thanks for your help!

And now the client asks, if it’s possible to have that behavior in the collapsed mobile version to. So that the collapsed mobile menu expands to the the active page in a 3 level structure when the menu shows up (after tapping the hamburger to activate the menu).

Cheers
Mario

[admin]

Yep, replace the following:

  $('#menu-btn').click(function() {
    var $this = $(this),
        $menu = $('#main-menu');
    if (!$this.hasClass('collapsed')) {
      $menu.addClass('collapsed');
      $this.addClass('collapsed');
    } else {
      $menu.removeClass('collapsed');
      $this.removeClass('collapsed');
    }
    return false;
  }).click();

with the following:

  $('#menu-btn').click(function() {
    var $this = $(this),
        $menu = $('#main-menu');
    if (!$this.hasClass('collapsed')) {
      $menu.addClass('collapsed');
      $this.addClass('collapsed');
    } else {
      $menu.removeClass('collapsed');
      $this.removeClass('collapsed');
      $("#main-menu").smartmenus("itemActivate",$("#main-menu").find("a.current").eq(-1));
    }
    return false;
  }).click();

Cheers!

[electricarts]

Yee-haw! 😀

Thank you so much for your help! Works like a charm!

I know why i’m using SmartMenus since 1 year in all my projects. Many thanks for your fantastic script!

Cheers
Mario

[satheesh]

I’m using this as a vertical flyout menu. I want to retain the Current class but I don’t want the flyout menu open on page load. any solutions??

[cw]

Sorry if this question is at a low level, but I dont find solution in the forums, Am trying to get mobile page menu to open with full top level of menu expanded (from hamburger icon to first level menu categories) automatically. The method of : $('#main-menu').smartmenus('itemActivate', $('#main-menu a.current').eq(-1)); explained above does not seem to have this effect although it does work in desktop config to expand submenus. Again, just looking to display on load the top level menus not submenus, and apologies if I have overlooked something obvious.

[Author]

Posts