0

Thanks in advance to anyone who can help me with this.

I am trying to have the background of my website darken when the navigation menu drops down.

I can get it to work great when I hover over the menu after it's dropped, but not just by the menu dropping.

I have a div id "darkness" with an opacity of 70%.

Here is my javascript:

$('.dropdown-menu').hover(function(){
    $('#darkness').fadeTo(200, 1);
}, function(){
    $('#darkness').fadeTo(200, 0, function(){
        $(this).hide();
    });
});
Greg Fielding
  • 517
  • 3
  • 10
  • 26
  • What is your '.dropdown-menu' class applied to? And have you tried $('.dropdown-menu').click or $('.dropdown-menu').toggle? – Turtle Aug 27 '15 at 20:41
  • @Greg - Is [**this**](http://jsfiddle.net/v0ezjLe1/) what you're looking for ? – DavidDomain Aug 27 '15 at 21:00
  • @Greg - It might be better to use the `show.bs.dropdown` and `hide.bs.dropdown` events. I have made an update to the [**fiddle**](http://jsfiddle.net/v0ezjLe1/1/) . – DavidDomain Aug 27 '15 at 21:08
  • I got i to work using this... $('.dropdown').on('show.bs.dropdown', function(e){ $('#darkness').fadeTo(200, 1); }); $('.dropdown').on('hide.bs.dropdown', function(e){ $('#darkness').fadeTo(200, 0); }); – Greg Fielding Aug 27 '15 at 23:08

1 Answers1

1

Greg Fielding Hi there.

A good way to do this would be to use toggleClass and place a wrapper around the content.

Here is the code I use for this sample. 

$(document).ready(function(){
    $(".collapsed").click(function(){
    $("#coverthishere").toggleClass("coverall");
    });
});

Here is a working Fiddle of this sample.

You will see I use the menu class collapsed as the trigger here.
And I target the ID coverthishere to add/remove the class .coverall.

This will still allow the menu to be on top and the cover to below the menu but on top of the body.

Hope this helps.

enter image description here

AngularJR
  • 2,752
  • 2
  • 16
  • 19
  • Thanks everyone... couldn't get these solutions to work correctly, but they did get me a little closer I think. I've been able to add the following JS to get my "darkness" div to fade in, but I can't figure out how to get it to fade out. Any thoughts? $(".collapsed").click(function(){ $('#darkness').fadeTo(200, 1); }); – Greg Fielding Aug 28 '15 at 17:55
  • Hi Greg, Have a look at [**this example**](http://stackoverflow.com/questions/12488099/toggle-css3-fade) it works with the transition in and out like you are looking for I think. See **Jared Farrish** answer. – AngularJR Aug 28 '15 at 23:03