CSS3模拟侧滑菜单

PHPABC CSS 1,070 次浏览 , 没有评论

在APP应用上,常见的一种导航方式是侧滑导航,效果类似于这样:
CSS3模拟侧滑菜单

用CSS3可以对其进行模拟,代码如下:
HTML:

  1. <nav>
  2. <div id="toggleMenu">
  3. <span id="hide"></span>
  4. <span id="show"></span>
  5. </div>
  6. <ul id="list">
  7. <li>
  8. <a href="#">首页</a>
  9. </li>
  10. <li>
  11. <a href="#">问题</a>
  12. </li>
  13. <li>
  14. <a href="#">文章</a>
  15. </li>
  16. <li>
  17. <a href="#">关注</a>
  18. </li>
  19. <li>
  20. <a href="#">发现</a>
  21. </li>
  22. </ul>
  23. </nav>

CSS:

  1. nav{
  2. width: 100%;
  3. height: 50px;
  4. background-color: rgba(26,188, 156, 0.75);
  5. position: relative;
  6. }
  7. div{
  8. position: absolute;
  9. height: 100%;
  10. width: 50px;
  11. left: 20px;
  12. cursor: pointer;
  13. -webkit-transition: transform 1s;
  14. -moz-transition: transform 1s;
  15. -ms-transition: transform 1s;
  16. -o-transition: transform 1s;
  17. transition: transform 1s;
  18. }
  19. #hide,#show{
  20. display: block;
  21. height: 3px;
  22. background-color: #FFF;
  23. position: absolute;
  24. top: 50%;
  25. -webkit-transition: opacity .5s;
  26. -moz-transition: opacity .5s;
  27. -ms-transition: opacity .5s;
  28. -o-transition: opacity .5s;
  29. transition: opacity .5s;
  30. }
  31. #show{
  32. width: 20px;
  33. left: 15px;
  34. opacity: 0;
  35. }
  36. #hide{
  37. width: 30px;
  38. left: 10px;
  39. margin-top: -1.5px;
  40. }
  41. #hide::before,#hide::after,#show::before,#show::after{
  42. content: "";
  43. display: block;
  44. height: 3px;
  45. background-color: #FFF;
  46. position: absolute;
  47. }
  48. #hide::before,#hide::after{
  49. width: 30px;
  50. }
  51. #show::before,#show::after{
  52. width: 25px;
  53. }
  54. #hide::before,#show::before{
  55. top: -10px;
  56. }
  57. #hide::after,#show::after{
  58. top: 10px;
  59. }
  60. #show::before{
  61. -webkit-transform: rotate(35deg) translateX(5px);
  62. -moz-transform: rotate(35deg) translateX(5px);
  63. -ms-transform: rotate(35deg) translateX(5px);
  64. -o-transform: rotate(35deg) translateX(5px);
  65. transform: rotate(35deg) translateX(5px);
  66. }
  67. #show::after{
  68. -webkit-transform: rotate(-35deg) translateX(5px);
  69. -moz-transform: rotate(-35deg) translateX(5px);
  70. -ms-transform: rotate(-35deg) translateX(5px);
  71. -o-transform: rotate(-35deg) translateX(5px);
  72. transform: rotate(-35deg) translateX(5px);
  73. }
  74. ul{
  75. list-style: none;
  76. background-color: #455552;
  77. position: absolute;
  78. top: 34px;
  79. left: -200px;
  80. width: 74px;
  81. -webkit-transition: all .5s ease-in-out;
  82. -moz-transition: all .5s ease-in-out;
  83. -ms-transition: all .5s ease-in-out;
  84. -o-transition: all .5s ease-in-out;
  85. transition: all .5s ease-in-out;
  86. }
  87. li{
  88. margin: 0;
  89. padding: 0;
  90. position: relative;
  91. left: -40px;
  92. text-align: center;
  93. width: 112px;
  94. }
  95. a{
  96. text-decoration: none;
  97. color:#FFF;
  98. display: inline-block;
  99. height: 40px;
  100. line-height: 40px;
  101. }
  102. li:hover{
  103. background-color: rgba(26,188, 156, 0.75);
  104. }

JavaScript控制一下事件:

  1. var toggle = document.getElementById("toggleMenu");
  2. var list = document.getElementById("list");
  3. var hide = document.getElementById("hide");
  4. var show = document.getElementById("show");
  5. var isHidden = true;
  6. window.onload = function() {
  7. toggle.onclick=function(){
  8. if(isHidden){
  9. list.style.left="0px";
  10. isHidden = false;
  11. hide.style.opacity=0;
  12. this.style.mozTransform = "rotate(180deg)";
  13. this.style.msTransform = "rotate(180deg)";
  14. this.style.oTransform = "rotate(180deg)";
  15. this.style.webkitTransform = "rotate(180deg)";
  16. this.style.transform = "rotate(180deg)";
  17. show.style.opacity=1;
  18. }else{
  19. list.style.left="-200px";
  20. isHidden = true;
  21. hide.style.opacity=1;
  22. this.style.mozTransform = "rotate(0deg)";
  23. this.style.msTransform = "rotate(0deg)";
  24. this.style.oTransform = "rotate(0deg)";
  25. this.style.webkitTransform = "rotate(0deg)";
  26. this.style.transform = "rotate(0deg)";
  27. show.style.opacity=0;
  28. }
  29. }
  30. }

效果:demo

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

Go