CODEWITHSUNDEEP
jquerycsswordpress
Lee
Lee

Reputation: 4323

Show overlay in background when hovering over parent menu items

I have a CSS based dropdown menu, created within Wordpress using their menus. I'm trying to add a jQuery overlay div to be shown when a parent menu item is hovered, and the child menu shown.

I've found the following JSFiddle that helped, and that my code is based upon http://jsfiddle.net/49Qvm/28/ , but I changed the selector from ul to #menu-main-menu > .menu-parent-item so it would stay open whilst hovered on the entire sub menu.

Site without hover Abive is the site when not hovered, and below is when a parent menu item is hovered: Site with hover

Technically, it works, and the overlay div is shown/hidden. But when I hover to the next parent item with the overlay shown, it disappears when it should stay visible IE. if I then hover over 'BODY', the new sub menu appears, but the overlay disappears.

This example can be seen on the JSFiddle by changing the element from ul to li. Then when you hover from one li to the other, the overlay disappears.

How can I adapt the JS code so that the overlay will continue to show when I move from one parent menu item, to the next?

PS. If a menu item has a child menu below it, the classes menu-item-has-children and menu-parent-item are added to the li

This is my JS code I'm using:

(function($) {
$('#menu-main-menu > .menu-parent-item').hover(function(){
    $('#menu_overlay').fadeTo(200, 1);
}, function(){
    $('#menu_overlay').fadeTo(200, 0, function(){
        $(this).hide();
    });
});
})(jQuery);

Upvotes: 0

Views: 6505

Answers (2)

Lee
Lee

Reputation: 4323

I eventually managed to find what I was looking for by using the following code, which seemed to be alot simpler.

(function($) {
$("#menu-main-menu > .menu-parent-item").hover(function(){
    $('#menu_overlay').fadeToggle();
});
})(jQuery);

Although when going from one parent item to another, the overlay fades out, and then in again.. at least the overlay remains when moving from item to item.

Upvotes: 1

Rick Hitchcock
Rick Hitchcock

Reputation: 35670

You can do this completely in CSS.

Don't hide darkness, but give it an opacity of 0 in the rgba, and add a 0.2s transition:

#darkness {
  background:rgba(0, 0, 0, 0);
  transition: background 0.2s;
}

When hovering the ul, change the opacity of darkness to 0.5:

ul:hover + #darkness {
  background:rgba(0, 0, 0, 0.5) !important;
}

You can use a different hover on the lis to show submenus:

HTML:

<ul>
  <li>Home
    <ul>
      <li>Submenu 1
      <li>Submenu 2
    </ul>
  </li>
</ul>

CSS:

li ul {
  display: none;
}

li:hover ul {
  display: block;
}

Working Fiddle

Upvotes: 0

Related Questions