HTML5 Canvas和jQueryUI模糊隐藏侧边栏特效

blurry-menu是一款效果非常酷的HTML5 canvas和jQueryUI模糊隐藏侧边栏特效。该侧边栏特效可以将它下面的HTML元素进行模糊处理。模糊效果是动态加入的，任何在侧边栏下方的HTML元素都将被模糊。

该特效的模糊效果是通过html2canvas和Superfast Blur这两个插件来完成的。

制作方法

使用该模糊隐藏侧边栏插件需要引入以下的一些依赖文件。

<script src="jquery-1.11.3.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="html2canvas.js"></script>
<script src="ext_fastblur.js"></script>
<script src="js/blurry-menu.js"></script>                
              

HTML结构

侧边栏的HTML结构如下：

<div id="menu">
  <!--这个图片不会被显示。-->
    <img id="captured-image" src="img/">

    <!--canvas占位，模糊的图形会设置在这里-->
    <canvas id="blurred-bg-canvas"></canvas>

    <!-- 侧边栏的内容 -->
    <div id="menu-content">
        <ul>
            <li class="first">Menu 1</li>
            <li>Menu 2</li>
            <li>Menu 3</li>
        </ul>
    </div>
</div>             
              

你可以创建一个汉堡包图标用于打开和关闭侧边栏菜单。

<div id="hamburger" onclick="BlurryMenu.openMenu()">
  <div></div>
  <div></div>
  <div></div>
</div>                
              

CSS样式

需要给侧边栏菜单一些基本的CSS样式。

#menu {
  box-shadow: 5px 5px 30px #000000;
  position: absolute;
  width: 0px;
  overflow: hidden;
  top: 0px;
  left: -7px;
  color: #ffffff;
}

#menu-content { position: relative; }

#blurred-bg-canvas { position: absolute; }

#captured-image { display: none; }                
              

初始化插件

可以简单的通过下面的方法来触发侧边栏菜单。

BlurryMenu.openMenu();