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 3 years ago by cw.
Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • #1307
    YellowPhoenix
    Participant

    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

    #1535
    admin
    Keymaster

    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!

    #1538
    YellowPhoenix
    Participant

    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

    #1541
    admin
    Keymaster

    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!

    #1543
    YellowPhoenix
    Participant

    Thank you so much. Works perfect 🙂

    #2293
    electricarts
    Participant

    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

    #2295
    admin
    Keymaster

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

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

    #2296
    electricarts
    Participant

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

    #2297
    admin
    Keymaster

    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.

    #2298
    electricarts
    Participant

    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.

    #2302
    admin
    Keymaster

    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.

    #2303
    electricarts
    Participant

    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.

    #2332
    electricarts
    Participant

    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

    #2335
    admin
    Keymaster

    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.

    #2627
    electricarts
    Participant

    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

    #2629
    admin
    Keymaster

    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!

    #2631
    electricarts
    Participant

    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

    #3493
    satheesh
    Participant

    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??

    #3708
    cw
    Participant

    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.

Viewing 19 posts - 1 through 19 (of 19 total)
  • You must be logged in to reply to this topic.

Register

You will be emailed a link to set your password.

Login

Lost password?