jQuery和css3全屏导航菜单特效插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

有时候为了更好的用户体验，你可能会使用一张高分辨率的背景图片结合一些好看的字体来呈现给用户。这种做法是当前UI设计的一种趋势。对于这个插件，我们想：既然我们已经在手机app中实现了某些简单的效果，为何不能将它移植到桌面设备上去呢？

CSS3 transitions 和 animations是这种转换变得十分容易实现。一个值得探讨的问题是：我们应该考虑是合并一些移动和桌面用户体验方面的经验，还是应该把他们分开？

HTML结构

我们使用<main>元素包住所有的可见元素。导航菜单在<main>元素之外，它将从页面顶部滑出。.cd-shadow-layer用于在<main>元素缩小时在其上制作一个阴影，使其看起来更具有3D效果。

.cd-blurred-bg将被用来制作模糊图像层。

<main>
  <section>
    <h1><!-- title here --></h1>
 
    <header>
      <!-- logo and menu icon here -->
    </header>
    <div class="cd-blurred-bg"></div>
  </section> 
</main>
 
<div class="cd-shadow-layer"></div>
 
<nav>
  <ul>
    <li><!-- ... --></li>
  </ul>
</nav>

CSS样式

为了实现这个动画效果，我们在<main>和<nav>元素上结合使用CSS3 Transformations 和CSS3 Transitions。translate 和 scale属性使我们能够移动菜单和模拟3d移动效果。Transitions属性就像黄油一样可以使两个属性值平滑地从状态A过渡到状态B。

#cd-main-content { /* this is the main element */
  transition-property: transform;
  transition-duration: 0.5s;
}
#cd-main-content.move-out {
  transform: scale(0.6);
}
#main-nav { /* this is the navigation */
  transform: translateY(-100%);
  transition-property: transform;
  transition-duration: 0.5s;
}
#main-nav.is-visible {
  transform: translateY(0);
}

关于模糊效果，我们使用相同的背景克隆了一个<section>元素。为了达到模糊效果，我们需要将部分内容遮罩住。这里需要CSS 的clip属性，现在唯一的问题是，我们不知道它到顶部偏移了多少。我们需要使用jQuery来传递clip属性的值。这部分内容留到后面：

.cd-blurred-bg {
  /* we use jQuery to apply a mask to this element - CSS clip property */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../img/bg-img.jpg") no-repeat center center;
  background-size: cover;
  filter: blur(4px);
}

JAVASCRIPT

我们没有使用太多的jQuery代码，唯一值得关注的地方是设置 .cd-blurred-bg元素的clip属性的函数：

function set_clip_property() {
  var $header_height = $('.cd-header').height(),
    $window_height = $(window).height(),
    $header_top = $window_height - $header_height,
    $window_width = $(window).width();
  $('.cd-blurred-bg').css('clip', 'rect('+$header_top+'px, '+$window_width+'px, '+$window_height+'px, 0px)');
}