支持IE8的纯css3开发的响应式设计动画菜单好代码教程

网络
全世界只有一个自己，所以没必要去当别人生命的插曲。烈日当空，道路两旁，成熟的谷物在热得弯下腰，低着头。蚱蜢多得像。

　　这是一个响应式设计的菜单。单击列表图标，当你显示屏大小可以完全水平放下所有菜单项时，菜单水平显示（如图1）。当你的显示屏不能水平放置所有菜单项时，菜单垂直显示（如图2）。 而且显示的时候是以动画的型式显示。效果相当的好。

图1

图2

　　下面是实现的代码。

　　html代码：

XML/HTML Code复制内容到剪贴板
  1. <divclass="container">
  2. <!--[iflteIE8]>
  3. <style>
  5. .iconicmenu>label{
  6. border-width:7px;
  7. background:#eee;
  8. }
  10. .iconicmenu:hoverul{
  11. left:8px;/*showmenuonmouseoverinIE8andbelow*/
  12. }
  14. </style>
  15. <![endif]-->
  16. <divclass="iconicmenu">
  17. <inputtype="checkbox"id="togglebox"/>
  18. <ul>
  19. <li><atarge="_blank"rel="nofollow noopener noreferrer" href="https://www.haodaima.com/Shili/css3%E8%8F%9C%E5%8D%95">Home</a></li>
  20. <li><atarge="_blank"rel="nofollow noopener noreferrer" href="https://www.haodaima.com/Shili/css3%E8%8F%9C%E5%8D%95">DHTML</a></li>
  21. <li><atarge="_blank"rel="nofollow noopener noreferrer" href="https://www.haodaima.com/Shili/css3%E8%8F%9C%E5%8D%95">CSSLibrary</a></li>
  22. <li><atarge="_blank"rel="nofollow noopener noreferrer" href="https://www.haodaima.com/Shili/css3%E8%8F%9C%E5%8D%95">CSSGallery</a></li>
  23. <li><atarge="_blank"rel="nofollow noopener noreferrer" href="https://www.haodaima.com/Shili/css3%E8%8F%9C%E5%8D%95">JavaScript</a></li>
  24. <li>
  25. <labelfor="togglebox">
  26. </label>
  27. </li>
  28. </ul>
  29. <labelclass="toggler"for="togglebox">
  30. Menu</label>
  31. </div>
  32. </div>

　　这里加入了兼容ie8的hack 。

　　css代码：

CSS Code复制内容到剪贴板
  1. body
  2. {
  3. padding:0;margin:0;
  4. }
  5. .container
  6. {
  7. width:600px;margin:auto;
  8. }
  9. .iconicmenu{
  10. position:relative;
  11. height:45px;
  12. overflow:hidden;
  13. }
  15. .iconicmenu,.iconicmenu*{
  16. -moz-box-sizing:border-box;
  17. box-sizing:border-box;
  18. }
  20. .iconicmenuinput[type="checkbox"]{/*checkboxusedtotogglemenustate*/
  21. position:absolute;
  22. left:0;
  23. top:0;
  24. opacity:0;
  25. }
  27. .iconicmenu>label{/*Mainlabelicontotogglemenustate*/
  28. z-index:1000;
  29. display:block;
  30. position:absolute;
  31. width:40px;
  32. height:40px;
  33. float:left;
  34. top:0;
  35. left:0;
  36. background:white;
  37. text-indent:-1000000px;
  38. border:6pxsolidblack;/*bordercolor*/
  39. border-width:6px0;
  40. cursor:pointer;
  41. -moz-transition:all0.3sease-in;
  42. -webkit-transition:all0.3sease-in;
  43. transition:all0.3sease-in;/*transitionforflippinglabel*/
  44. }
  46. .iconicmenu>label::after{/*innerstripesinsidelabel*/
  47. content:"";
  48. display:block;
  49. position:absolute;
  50. width:100%;
  51. height:18%;
  52. top:19%;
  53. left:0;
  54. border:6pxsolidblack;/*bordercolor*/
  55. border-width:6px0;
  56. -moz-transition:all0.3sease-in;
  57. -webkit-transition:all0.3sease-in;
  58. transition:all0.3sease-in;/*transitionforflippinglabel*/
  59. }
  61. .iconicmenuul{/*ULmenuinsidecontainer*/
  62. margin:0;
  63. padding:0;
  64. position:absolute;
  65. margin-left:40px;
  66. background:#eee;
  67. left:-100%;/*hidemenuintially*/
  68. height:40px;/*heightofmenu*/
  69. font:bold14pxVerdana;
  70. text-align:center;
  71. list-style:none;
  72. opacity:0;
  73. -moz-border-radius:05px5px0;
  74. -webkit-border-radius:05px5px0;
  75. border-radius:05px5px0;
  76. -moz-perspective:10000px;
  77. perspective:10000px;
  78. -moz-transition:all0.5sease-in;
  79. -webkit-transition:all0.5sease-in;
  80. transition:all0.5sease-in;/*transitionforanimatingULinandout*/
  81. }
  83. .iconicmenuli{
  84. display:inline;
  85. margin:0;
  86. padding:0;
  87. }
  89. .iconicmenuullabel{/*labelbuttoninsideULtoclosemenu*/
  90. cursor:pointer;
  91. position:relative;
  92. height:100%;
  93. text-align:center;
  94. }
  96. .iconicmenuullabel::after{/*labelbuttonx*/
  97. content:"x";
  98. display:inline-block;
  99. line-height:14px;
  100. color:white;
  101. -moz-border-radius:50px;
  102. -webkit-border-radius:50px;
  103. border-radius:50px;
  104. width:20px;
  105. height:20px;
  106. background:black;
  107. font-size:18px;
  108. margin:5px;
  109. margin-top:10px;
  110. -moz-transition:all0.3sease-in;
  111. -webkit-transition:all0.3sease-in;
  112. transition:all0.3sease-in;
  113. }
  115. .iconicmenuinput[type="checkbox"]:checked~label,.iconicmenuullabel:hover::after{
  116. -moz-transform:rotatey(180deg);
  117. -ms-transform:rotatey(180deg);
  118. -webkit-transform:rotatey(180deg);
  119. transform:rotatey(180deg);/*fliplabelsverticallyonMouseover*/
  120. }
  122. .iconicmenu>label:hover,.iconicmenu>label:hover::after,.iconicmenuinput[type="checkbox"]:checked~label,.iconicmenuinput[type="checkbox"]:checked~label::after{
  123. border-color:darkred;/*highlightcolorofmainmenulabelonMouseover*/
  124. }
  126. .iconicmenuinput[type="checkbox"]:checked~ul{
  127. left:8px;/*Animatemenuintoview*/
  128. opacity:1;
  129. -moz-box-shadow:1px1px5pxgray;
  130. -webkit-box-shadow:1px1px5pxgray;
  131. box-shadow:1px1px5pxgray;
  132. }
  134. .iconicmenulia{
  135. display:block;
  136. float:left;
  137. text-align:center;
  138. text-decoration:none;
  139. color:black;
  140. margin:0;
  141. padding:10px;
  142. padding-right:15px;
  143. height:100%;
  144. }
  146. .iconicmenulia:hover{
  147. background:black;
  148. color:white;
  149. }
  151. /*-----------------------------CSSMediaQueries-----------------------------*/
  153. /*
  154. Theserulescontrolwhichportionsofthemenugetsshownwhenthescreensizeisbelowacertainwidth.
  155. Bydefault2stagesaredefineddependingonbrowserscreenwidth.
  156. */
  158. @mediascreenand(max-width:580px){/*Hidetoggleiconwhenmenuisalreadyopen(increasesusablemenuspaceby40px)*/
  159. .iconicmenuinput[type="checkbox"]:checked~label{
  160. display:none;
  161. }
  162. .iconicmenuinput[type="checkbox"]:checked~ul{
  163. margin-left:0;
  164. }
  165. }
  167. @mediascreenand(max-width:560px){/*Converthorizontalmenutoverticaldropdowninstead(friendlyacrossallscreensizes)*/
  168. .iconicmenu{
  169. overflow:visible;
  170. }
  171. .iconicmenuul{
  172. height:auto;
  173. }
  174. .iconicmenuulli{
  175. min-width:200px;;
  176. display:block;
  177. }
  178. .iconicmenuullia{
  179. float:none;;
  180. text-align:left;
  181. }
  182. }

　以上就是一个纯用css3实现的菜单，是不是很简单呢，谢谢阅读，希望能帮到大家，请继续关注，我们会努力分享更多优秀的文章。