Two menus, focus on top disables the second.

Home Forums Latest release 1.1.x Two menus, focus on top disables the second.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #3733
    Alkemist
    Participant

    Hi,

    I have two menus:

    <ul id=”main-menu” class=”sm sm-blue”>
    and…
    <ul id=”main-menu2″ class=”sm sm-prod”>

    I would like that if the mouse goes over the top menu “main-menu” that the bottom menu disappears such that the drop-downs from the top menu can be seen. When the top menu loses focus, the bottom menu appears again.
    Found the events focus and blur but can’t even get a “hello world” to trigger on focus so I’m missing something really obvious here.

    Any tips would be much appreciated!

    #3746
    admin
    Keymaster

    You could use something like this to hide/show your second menu when a sub menu of your first menu is activated:

    var $mainMenu2 = $('#main-menu2');
    $('#main-menu').on({
      'show.smapi': function(e, menu) {
        $mainMenu2.css('visibility', 'hidden');
      },
      'hideAll.smapi': function(e, menu) {
        $mainMenu2.css('visibility', '');
      }
    });

    But I’d suggest a more elegant solution – i.e. to just alter the first menu’s z-index so that its sub menus simply appear on top of the second menu:

    $('#main-menu').on({
      'show.smapi': function(e, menu) {
        $(this).css('z-index', 10000);
      },
      'hideAll.smapi': function(e, menu) {
        $(this).css('z-index', '');
      }
    });
    #3748
    Alkemist
    Participant

    Thanks for the reply!

    The latter is actually what I did however I did it in the css instead and yes, it is a more elegant solution!

Viewing 3 posts - 1 through 3 (of 3 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?