演示请看本站导航，不支持IE678。
HTML（header-navigation是用来指定导航样式的，id=header是用来驱动js的，这里id要和下面js里的document.getElementById相同）

header class="header-navigation" id="header"
 这是导航
/header

CSS

.header-navigation {
      position: fixed;
      top: 0;
      width: 100%;
      height: 60px;
      line-height: 60px;
      background-color: #333;
      text-align: center;
      box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
      z-index: 9999;
    }

/* Slide transitions */
    .slideUp {
     /* -webkit-transform: translateY(-100px);
      transform: translateY(-100px);*/
      -webkit-transform: translateY(-100px);
      -ms-transform: translateY(-100px);
      -o-transform: translateY(-100px);
      transform: translateY(-100px);
      /*transition: transform .5s ease-out;*/
      -webkit-transition: transform .5s ease-out;
      -o-transition: transform .5s ease-out;
      transition: transform .5s ease-out;
    }

    .slideDown {
      /*-webkit-transform: translateY(0);
      transform: translateY(0);*/
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      -o-transform: translateY(0);
      transform: translateY(0);
      /*transition: transform .5s ease-out;*/
      -webkit-transition: transform .5s ease-out;
      -o-transition: transform .5s ease-out;
      transition: transform .5s ease-out;
    }

More »

2008-7-8 就整理了，一直没发布上博客，发布到论坛了。现在转上来！
演示效果见腾讯顶部，源链接：http://www.qqwe.cn/thread-1616-1-4.html

More »