点击后，模糊我的内容

Question

Is there a way when I click my menu button (and menu is revealed) my content in the background has a blur on it and when clicked again, the content goes back to normal?

Currently working with this 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>

This 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;
      }
    }
  }
}

This JS:

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


});

I would be very grateful if anyone could help. Cheers

Answer 1

Demo here .

Basically you just need to append a dynamic div (or insert manually) and set give it a fixed position with width: 100% and height: 100% with a background & opacity .

However it must be outside of the .menu container or your .menu contents will also have an opacity.

Answer 2

Example on codepen here including:

content {filter:blur(5px);

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

This example blurs the content behind, however the browser support for this isn't complete ( http://caniuse.com/#search=filter ) no ie

But, you could use just an opaque filter - I have included this in the example) and better browsers get the blur - or for more support use an inline blurred SVG, or maybe a js effect such as http://blurjs.com/

Answer 3

You can always search http://css-tricks.com for stylesheet related help as they have a good library.

You should be looking at the CSS FILTERS to create the blur effect upon clicking the menu and then turning it back to normal on release.

I had this link in my library that clearly shows what you are trying to do JSFIDDLE EXAMPLE

and here part of the stylesheet where you have the blur

This class is added to the container 
(#blurMe) when the sidebar is open.
-----------------------------------*/
.blurred {
  -webkit-transition: all 0.6s ease;
  transition: all 0.6s ease;
  -webkit-filter: blur(10px);
  filter: blur(10px);
  -webkit-filter: url(#blur);
          filter: url(#blur);
  filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='10');
}