Two menus, focus on top disables the second.

[Alkemist]

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!

[admin]

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', '');
  }
});

[Alkemist]

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!

[Author]

Posts