标签 [ 顶部导航 ] 下的文章

极简js和css3往上滚动智能隐藏和显示的顶部导航菜单

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

  1. header class="header-navigation" id="header"
  2. 这是导航
  3. /header

CSS

  1. .header-navigation {
  2. position: fixed;
  3. top: 0;
  4. width: 100%;
  5. height: 60px;
  6. line-height: 60px;
  7. background-color: #333;
  8. text-align: center;
  9. box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  10. z-index: 9999;
  11. }
  12.  
  13. /* Slide transitions */
  14. .slideUp {
  15. /* -webkit-transform: translateY(-100px);
  16. transform: translateY(-100px);*/
  17. -webkit-transform: translateY(-100px);
  18. -ms-transform: translateY(-100px);
  19. -o-transform: translateY(-100px);
  20. transform: translateY(-100px);
  21. /*transition: transform .5s ease-out;*/
  22. -webkit-transition: transform .5s ease-out;
  23. -o-transition: transform .5s ease-out;
  24. transition: transform .5s ease-out;
  25. }
  26.  
  27. .slideDown {
  28. /*-webkit-transform: translateY(0);
  29. transform: translateY(0);*/
  30. -webkit-transform: translateY(0);
  31. -ms-transform: translateY(0);
  32. -o-transform: translateY(0);
  33. transform: translateY(0);
  34. /*transition: transform .5s ease-out;*/
  35. -webkit-transition: transform .5s ease-out;
  36. -o-transition: transform .5s ease-out;
  37. transition: transform .5s ease-out;
  38. }

More »

仿腾讯顶部代码

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


More »

最新文章

最近回复

链接