CSSでメニューの裏の背景をぼかす

iOSとかでよくある演出です。Chromeで御覧ください。
filterのblurがポイントですね。

DEMO

HTML

<header id="header">
    <div id="btn"></div>
</header>
<ul id="menu">
    <li>MENU A</li>
    <li>MENU B</li>
    <li>MENU C</li>
    <li>MENU D</li>
    <li>MENU E</li>
</ul>
<div id="content">
    <p class="ttl">ELEFANT</p>
</div>

SCSS

* {
  margin: 0;
  padding: 0;
  border: 0;
}

html {
    height: 100%;
}

body {
    height: 100%;
    font: 20px HelveticaNeue-UltraLight;
    background: #e3e3e3;
}

#header {
    position: absolute;
    width: 100%; height: 50px;
    background: linear-gradient(#444, #333);
    box-shadow: 0 5px 5px rgba(0, 0, 0, .1);
    z-index: 10;
}

#btn {
    position: absolute;
    top: 50%; right: 15px;
    margin-top: -10px;
    width: 30px; height: 20px;
    background: #fff;
    cursor: pointer;
    
    &:before {
        display: block;
        position: absolute;
        top: 4px; left: 0;
        width: 30px; height: 4px;
        content: "";
        background: #333;
    }
        
    &:after {
        display: block;
        position: absolute;
        bottom: 4px; left: 0;
        width: 30px; height: 4px;
        content: "";
        background: #333;
    }
}

#menu {
    position: relative;
    width: 100%; height: 0;
    background: rgba(255, 255, 255, .4);
    overflow: hidden;
    transition: height .2s ease-in-out;
    z-index: 5;
    
    li {
        padding: 0 10px;
        height: 44px;
        line-height: 44px;
        cursor: pointer;
        
        &:first-child {
            margin-top: 50px;
        }
            
        &:nth-child(odd) {
             background: rgba(255, 255, 255, .5);
        }
    }
    
    .menu & {
        height: 100%;
    }
}

#content {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: url(http://jsrun.it/assets/p/Z/T/k/pZTkc.jpg) center -100px no-repeat;
    background-size: cover;
    z-index: 1;
    
    .ttl {
        position: absolute;
        width: 100%;
        bottom: 20px;
        color: #fff;
        font-size: 60px;
        text-align: center;
    }
    
    .menu & {
        -webkit-filter: blur(5px);
        filter: blur(5px);
    }
}

JavaScript

(function(win, doc) {

    "use strict";
    
    doc.getElementById("btn").addEventListener("click", function() {
        doc.body.classList.toggle("menu");
    }, false);
    
})(this, document);