杰拉斯的博客

CSS3无图片实现华丽折页菜单效果(多浏览器兼容)

杰拉斯 杰拉斯 | 时间:2012-05-29, Tue | 27,029 views
前端开发 

昨天在做一个网站的左栏菜单的时候,突然想到,看了那么多创意CSS3导航、菜单,何不自己动手做一个纯CSS3菜单呢?于是捣鼓了一下把想法给实现了,虽然说是比较老掉牙的一个创意,不过顺便也算是锻炼了一下CSS水平。

先看看网页里的最终效果:

CSS3折页菜单

那么,教程开始了!

Step1

首先,一个菜单的结构如下:

  1. <div class="wrapper">
  2. <ul id="menu">
  3. <li><a href="javascript:void(0);">菜单1</a></li>
  4. <li><a href="javascript:void(0);">菜单2</a></li>
  5. <li><a href="javascript:void(0);">菜单3</a></li>
  6. <li><a href="javascript:void(0);">菜单4</a></li>
  7. <li><a href="javascript:void(0);">菜单5</a></li>
  8. </ul>
  9. </div>

菜单

当然,未经过CSS美化的效果相当之差,我们来开始加工——

Step2

加上该加上的,去掉该去掉的。该上色的上色,该加宽度的加宽度,该重置的重置(css reset)。

  • body颜色:#ddd
  • wrapper颜色:#eee
  • menu颜色:#0764a1
  • 链接颜色:#cde0ec

CSS菜单

虽然颜色也有了形状也有了但仍很是单调,因此——

Step3

加上光影圆角细节:

  • 菜单左上圆角:10px
  • 菜单右下圆角:10px
  • 菜单左边框颜色:#0982bd
  • 菜单上边框颜色:#0982bd
  • 菜单下边框颜色:#054685
  • 菜单阴影:3px 5px 5px rgba(0,0,0,0.5)
  • wrapper阴影:0 0 10px #222222

CSS3菜单

虽然菜单已经成型了,但怎么说都谈不上“创意”二字,作为一个追求完美的前端发烧友,自然不能止步于此——

Step4

通过margin负值来实现菜单与wrapper错开:

  • menu左端外边距:-20px

CSS3菜单

但似乎还是少了点什么?没错,就是小小的三角形折页——

Step5

如何用DIV+CSS实现三角形呢?可以利用border来实现,具体原理可参见张鑫旭的《CSS border三角、圆角图形生成技术简介》一文。

  • 翻折三角形颜色:#054685
  • 边框大小:12px 20px
  • 左端外边距:-40px(利用右边框实现多浏览器兼容三角形,因此整个DIV都应该在wrapper外,即为上面20px的两倍)
  • 顶端外边距:-12px(与上面边框大小中12px对应)

CSS3创意折页边框

整个折页菜单的效果就出来了,但为了用户体验,还应该给菜单加上交互效果——

Step6

为菜单的鼠标经过及按下加上交互效果:

  • 鼠标经过菜单颜色:#05528f
  • 鼠标经过菜单上边框颜色:#066fae
  • 鼠标经过菜单下边框颜色:#033772
  • 鼠标按下菜单颜色:#033f7e
  • 鼠标按下菜单上边框颜色:#045ca0
  • 鼠标按下菜单下边框颜色:#02275f

CSS3创意折页菜单

这里还为菜单加大了左端内边距,当然你也可以加上其它CSS3效果:

CSS3创意折页菜单

如图是加上左端外边距和放大1.05倍的效果。

Finally

最后当然是给出代码和Demo了:

CSS部分:

  1. body{
  2. margin:0;
  3. background:#ddd;
  4. }
  5. .wrapper{
  6. width:960px;
  7. height:800px;
  8. margin:0 auto;
  9. position:relative;
  10. background:#eee;
  11. -moz-box-shadow:0 0 10px #222222;
  12. -khtml-box-shadow:0 0 10px #222222;
  13. -webkit-box-shadow:0 0 10px #222222;
  14. box-shadow:0 0 10px #222222;
  15. }
  16.  
  17. #menu{
  18. margin: 0;
  19. padding:0;
  20. list-style:none;
  21. margin-top:150px;
  22. margin-left:-20px;
  23. display:inline-block;
  24. position:relative;
  25. z-index:100;
  26. }
  27.  
  28. #menu a{
  29. *zoom:1;
  30. width:120px;
  31. display:block;
  32. font-size:14px;
  33. color: #cde0ec;
  34. line-height:45px;
  35. padding-left:40px;
  36. background:#0764a1;
  37. text-decoration:none;
  38. border-left:1px solid #0982bd;
  39. border-top:1px solid #0982bd;
  40. border-bottom:1px solid #054685;
  41. -webkit-transition: all .3s;
  42. -moz-transition: all .3s;
  43. -o-transition: all .3s;
  44. transition: all .3s;
  45. -moz-box-shadow:3px 5px 5px rgba(0,0,0,0.5);
  46. -khtml-box-shadow:3px 5px 5px rgba(0,0,0,0.5);
  47. -webkit-box-shadow:3px 5px 5px rgba(0,0,0,0.5);
  48. box-shadow:3px 5px 5px rgba(0,0,0,0.5);
  49. }
  50.  
  51. #menu li:first-child a{
  52. border-top-right-radius:10px;
  53. }
  54.  
  55. #menu li:last-child a{
  56. border-bottom-right-radius:10px;
  57. }
  58.  
  59. #menu a:hover{
  60. padding-left:55px;
  61. padding-left:40px\0;
  62. *padding-left:40px;
  63. background:#05528f;
  64. border-top:1px solid #066fae;
  65. border-bottom:1px solid #033772;
  66. -webkit-transform-origin:0;
  67. -moz-transform-origin:0;
  68. -o-transform-origin:0;
  69. -moz-box-shadow:0 5px 5px rgba(0,0,0,0.5);
  70. -khtml-box-shadow:0 5px 5px rgba(0,0,0,0.5);
  71. -webkit-box-shadow:5px 5px 5px rgba(0,0,0,0.5);
  72. box-shadow:5px 5px 5px rgba(0,0,0,0.5);
  73. }
  74.  
  75. #menu a:active{
  76. background:#033f7e;
  77. border-top:1px solid #045ca0;
  78. border-bottom:1px solid #02275f;
  79. }
  80.  
  81. .triangle{
  82. width:0;
  83. height:0;
  84. position:relative;
  85. margin-top:-12px;
  86. _margin-top:-30px;
  87. margin-left:-40px;
  88. border-color:transparent #054685 transparent transparent;
  89. border-style:dashed solid dashed dashed;
  90. border-width:12px 20px;
  91. }

HTML部分:

  1. <div class="wrapper">
  2. <ul id="menu">
  3. <li><a href="javascript:void(0);">菜单1</a></li>
  4. <li><a href="javascript:void(0);">菜单2</a></li>
  5. <li><a href="javascript:void(0);">菜单3</a></li>
  6. <li><a href="javascript:void(0);">菜单4</a></li>
  7. <li><a href="javascript:void(0);">菜单5</a></li>
  8. </ul>
  9. <div class="triangle"></div>
  10. </div>

大家最喜爱的Demo

如需转载请注明出处:杰拉斯的博客

相关文章

2 条评论 »

  1. 一只路过的师弟 一只路过的师弟

    [可爱]

  2. 新知识 充电学习了 我能转载吗