How to darken main content/canvas of site when side menu appears?

Question

I am currently using Bootstrap 3, specifically the Jasny Off Canvas Reveal Menu template, see here:

https://jasny.github.io/bootstrap/examples/navmenu-reveal/

All is working great but what I would like to achieve and unsure how to do as I'm not sure what click event is being fired when clicking on the hamburger menu icon to reveal the side menu but basically, I want to achieve the result here at this site, when the menu icon is pressed on the above Jasny example reveal, i.e.:

http://material-ui.com/#/

Here on the Material-UI site, the main content/canvas to the right of the menu is darkened when the menu is revealed and then returned back to it's original state when the side menu disappears.

I would like to get this going for the jasny off canvas reveal example menu click. The main thing though is, it needs to work on IE8 browser.

Answer 1

You could simply add this CSS:

.canvas-slid:after,
.canvas-sliding:after {
    content: "";
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: auto;
    z-index: 9999;
    background: rgba(0,0,0,0.5) !important;
    background: url(./alpha.png);
}

Since IE<=8 doesnt support rgba() you could use a 1x1px 50%alpha-PNG as BGimage1.