CODEWITHSUNDEEP
javascripttwitter-bootstrap
Greg Fielding
Greg Fielding

Reputation: 557

Bootstrap Background Darken With Dropdown Event

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();
    });
});

Upvotes: 0

Views: 1069

Answers (1)

AngularJR
AngularJR

Reputation: 2762

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

Upvotes: 1

Related Questions