javascript - 单击时，模糊我的内容

Question

有没有一种方法可以在我单击菜单按钮(并显示菜单)时背景中的内容模糊，再次单击时，内容恢复正常？

当前正在使用此 HTML:

<div class="menu">
  <div class="line"></div>
  <nav>
    <ul>
      <li><a target="_parent" href="">A</a></li>
      <li><a target="_parent" href="">B</a></li>
      <li><a target="_parent" href="">C</a></li>
      <li><a target="_parent" href="">D</a></li>
    </ul>
  </nav>
</div>

此 CSS:

$square: 50px;
* {
  @include box-sizing(border-box);
}
body {
  background: #111;
  font: 300 14px Consolas, system, monospace;
  color: #fff;
}
.menu {
  position: fixed; 
  height: $square;
  width: $square;
  cursor: pointer;
  top: 0;
  right: 0;
  background: #fff;
  @include transition(all 250ms ease-in-out);
  z-index: 100;
  overflow: hidden;
  nav {
    position: fixed;
    left: 50%;
    top: 50%;
    @include transform(translateY(-50%) translateX(-50%));
    opacity: 0;
    @include transition(all 250ms linear 250ms);
    pointer-events: none;
    ul {
      list-style-type: none;
      padding: 0;
      li a {

        display: block;
        padding: 10px;
        text-decoration: none;
        color: #000;
        text-align: center;
        &:hover {
          background: #000;
          color: #fff;
        }
      }
    }
  }
  .line {
    height: 5px;
    width: $square - 10;
    background: #000;
    position: absolute;
    top: ($square/2)-(5/2);
    left: ($square - ($square - 10))/2;
    @include transition(all 250ms linear);
    &:after, &:before {
      content: ' ';
      height: 5px;
      width: $square - 10;
      background: #000;
      position: absolute;
      @include transition(all 250ms linear);
    }
    &:before {
      top: -10px;
    }
    &:after {
      bottom: -10px;
    }
  }
  &.active {
    width: 100%;
    height: 100%;
    nav {
      opacity: 1;
      pointer-events: all;
    }
    .line {
      background: transparent;
      &:before {
        background: #000;
        @include transform(rotate(-405deg));
        top: 0px;
      }
      &:after {
        background: #000; 
        @include transform(rotate(405deg));
        bottom: 0px;
      }
    }
  }
}

这个 JS:

$('.menu').click(function(){
  $this = $(this);
  if ($this.hasClass('active')) {
    $this.removeClass('active');
  }
  else {
    $this.addClass('active');    
  }


});

如果有人能提供帮助，我将不胜感激。干杯

Answer 1

此处 codepen 的示例包括:

content {filter:blur(5px);

http://codepen.io/simoncmason/pen/ogoPXK

这个例子模糊了后面的内容，但是浏览器对此的支持并不完整(http://caniuse.com/#search=filter)不，即

但是，你可以只使用一个不透明的过滤器——我已经在例子中包含了这个)并且更好的浏览器会得到模糊——或者为了获得更多支持，使用内联模糊 SVG，或者可能是一个 js 效果，例如 http://blurjs.com/