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

演示here。

基本上你只需要附加一个动态div（或手动插入）并设置fixed位置width: 100%和height: 100%位置background & opacity。

但是，它必须位于.menu容器之外，否则您的.menu内容也会具有不透明度。

Answer 2

这里的codepen示例包括：

content {filter:blur(5px);

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

此示例模糊了背后的内容，但是浏览器对此的支持并不完整（http://caniuse.com/#search=filter）没有，即

但是，您可以只使用不透明的过滤器 - 我已将其包含在示例中）并且更好的浏览器可以获得模糊 - 或者更多支持使用内联模糊SVG，或者可能使用js效果，例如http://blurjs.com/

Answer 3

您可以随时搜索http://css-tricks.com样式表相关的帮助，因为它们有一个好的库。

你应该看一下 CSS FILTERS 来点击菜单然后在发布时将其恢复正常来创建模糊效果。

我的图书馆中有这个链接，清楚地显示了您要做的事情JSFIDDLE EXAMPLE

这里是你有模糊的样式表的一部分

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

点击后，模糊我的内容

3 个答案: