今流行りの(?)背景ぼかしメニューのCSS実装例 #CSS

概要

最近良く見る、下図のような、背面にあるものをボカした表現のあるモーダルメニューの実装例です。
実際に動くデモはこちら
https://s.codepen.io/skwbr/debug/eZPZZj/yPkJjGEWbvqk

コード解説

下記ボカしメニューの実装部分だけ抜粋しています。
全コードを観たい場合は codepen 参照ください。
http://codepen.io/skwbr/pen/eZPZZj

HTML


<body>
  <div id="content">
    <!-- メインコンテンツをここに全部入れる -->
  </div>
  <div id="modal-menu">
    <!-- モーダルメニュー -->
  </div>
</body>

背面に表示されるメインコンテンツをすべて #content の中に入れ込んでいます。

JS

JS(jQuery)

var $body = $('body');

$('.menu-open-btn').on('click', function(){
  $body.addClass('is-menu-open');
  return false;
});

$('.menu-close-btn').on('click', function(){
  $body.removeClass('is-menu-open');
  return false;
});

メニューボタンの押下で body に is-menu-open classがつくように、またモーダル上の閉じるボタンの押下でそのclassが外れるようにしています。

CSS

/* モーダルメニュー */
#modal-menu {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(50, 47, 45, 0.9);
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity .2s ease-out;
  pointer-events: none;  /* 透明状態でもクリックを拾ってしまうので */
}


/* bodyにis-menu-openクラスが付いたらモーダル表示 */
body.is-menu-open #modal-menu {
  opacity: 1;
  pointer-events: auto;
}

/* bodyにis-menu-openクラスが付いたら#contentをぼかしフィルター付与 */
body.is-menu-open #content {
  pointer-events: none;
  transition: all .2s ease-out;
  -webkit-filter: blur(8px);
     -moz-filter: blur(8px);
      -ms-filter: blur(8px);
          filter: blur(8px);
}

要はモーダルメニュー(#modal-menu)を透明(opacity:0)+非クリッカブルの状態で置いておいて、bodyのクラスにしたがってopacityを1にしてフェードインさせる、というもの。
同時に、背面にあるメインコンテンツ(#content)に対し、CSS3のフィルターの blur を使用して、ぼかし効果を与える、というもの。

補足

JSを使うのが嫌な場合は、メニューボタンをチェックボックスにして、
隣接セレクタを使えば CSSだけで上手いことできそうです。

応用でグレースケールなどのfilterを使った効果をすることもできそうですね。
CSS3フィルターが使用できるブラウザは下記参照。必要に応じベンダープレフィックスを補ってください。
http://caniuse.com/#search=filter