title: How can I lower the opacity of website when slide-menu is clicked?
body: <p>i have a slide-menu that works well but i want it to lower the opacity of the rest of the website when clicked, what i'm i missing? here's the slide-menu js</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    $('.slideout-menu-toggle').on('click', function(event) {
      event.preventDefault();
      // create menu variables
      var slideoutMenu = $('.slideout-menu');
      var slideoutMenuWidth = $('.slideout-menu').width();
  
      // toggle open class
      slideoutMenu.toggleClass("open");
  
      // slide menu
      if (slideoutMenu.hasClass("open")) {
        slideoutMenu.animate({
          left: "0px"
        });
      } else {
        slideoutMenu.animate({
          left: -slideoutMenuWidth
        }, 250);
      }
  
      if (slideoutMenu.hasClass("open")) {
        $('body').animate({
          'margin-left': slideoutMenuWidth
        });
      } else {
        $('body').animate({
          'margin-left': "0px"
        }, 250);
      }
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.slideout-menu {
    position: fixed;
    top: 0;
    left: -250px;
    width: 250px;
    height: 100%;
    background: #333;
    z-index: 100;
  }
  .slideout-menu h3 {
    position: relative;
    padding: 20px 10px;
    color: #999;
    font-size: 1.2em;
    font-weight: 400;
    border-bottom: 0px solid #222;
  }
  .slideout-menu .slideout-menu-toggle {
    position: absolute;
    top: 12px;
    right: 10px;
    display: inline-block;
    padding: 6px 9px 5px;
    font-family: Arial, sans-serif;
    font-weight: bold;
    line-height: 1;
    background: #222;
    color: #999;
    text-decoration: none;
    vertical-align: top;
  }
  .slideout-menu .slideout-menu-toggle:hover {
    color: #fff;
  }
  .slideout-menu ul {
    list-style: none;
    font-weight: 300;
    border-top: 1px solid #151515;
    border-bottom: 1px solid #454545;
  }
  .slideout-menu ul li {
    border-top: 1px solid #454545;
    border-bottom: 1px solid #151515;
  }
  .slideout-menu ul li a {
    position: relative;
    display: block;
    padding: 10px;
    color: #999;
    text-decoration: none;
  }
  .slideout-menu ul li a:hover {
    background: #000;
    color: #fff;
  }
  .slideout-menu ul li a i {
    position: absolute;
    top: 15px;
    right: 10px;
    opacity: .5;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="slideout-menu"&gt;
    &lt;h3&gt;Last Week&lt;a href="#" class="slideout-menu-toggle"&gt;&amp;times;&lt;/a&gt;&lt;/h3&gt;
    &lt;center&gt;
      &lt;img border="0px" draggable="false" align="middle" src="img/fbump.png" alt="dundaah_logo" width="220" height="220"&gt;
    &lt;/center&gt;
    &lt;ul&gt;
      &lt;li&gt;
        &lt;a href="http://dundaah.com/docs/mon.html"&gt;Dundaah&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href="http://pics.dundaah.com/docs/mon.html"&gt;Pics&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href="http://vidz.dundaah.com/docs/mon.html"&gt;Videos&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href="http://music.dundaah.com/docs/mon.html"&gt;Music&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>thanks </p>