Start a new discussion
To start a new discussion please visit the discussions section of the GitHub home page of the project.
You can also search our old self-hosted forums for any useful information below but please note that posting new content here is not possible any more.
Vertical menu expanded on page load
Home › Forums › Older releases › 0.9.x › Vertical menu expanded on page load
- This topic has 18 replies, 5 voices, and was last updated 7 years ago by cw.
-
AuthorPosts
-
February 11, 2014 at 19:02 #1307YellowPhoenixParticipant
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
February 14, 2014 at 01:55 #1535adminKeymasterHi,
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!
February 16, 2014 at 16:14 #1538YellowPhoenixParticipantThanks 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
February 17, 2014 at 02:25 #1541adminKeymasterOK, 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!
February 17, 2014 at 14:14 #1543YellowPhoenixParticipantThank you so much. Works perfect 🙂
February 25, 2015 at 16:25 #2293electricartsParticipantHi,
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
MarioFebruary 25, 2015 at 16:45 #2295adminKeymasterNope, it should work fine with any level – e.g.:
February 25, 2015 at 16:55 #2296electricartsParticipantYes, but only in the vertical menu left. In the top main menu not.
February 25, 2015 at 19:07 #2297adminKeymasterThat’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.
February 25, 2015 at 20:07 #2298electricartsParticipantHi 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.
February 26, 2015 at 13:24 #2302adminKeymasterThe 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.
February 26, 2015 at 17:31 #2303electricartsParticipantHi 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.
March 16, 2015 at 12:11 #2332electricartsParticipantHi,
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
MarioMarch 17, 2015 at 14:34 #2335adminKeymasterYep, 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.
July 3, 2015 at 21:02 #2627electricartsParticipantHi 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
MarioJuly 6, 2015 at 12:13 #2629adminKeymasterYep, 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!
July 6, 2015 at 12:43 #2631electricartsParticipantYee-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
MarioMarch 11, 2017 at 16:15 #3493satheeshParticipantI’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??
September 22, 2017 at 08:38 #3708cwParticipantSorry 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. -
AuthorPosts
- The forum ‘0.9.x’ is closed to new topics and replies.