纯css3开发的响应式设计动画菜单详细教程

这篇文章主要讲解了“纯css3开发的响应式设计动画菜单详细教程”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“纯css3开发的响应式设计动画菜单详细教程”吧！

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

图1

图2

　　下面是实现的代码。

　　html代码：

XML/HTML Code复制内容到剪贴板

1. <div class="container">  

2.         <!--[if lte IE 8]>  

3. <style>  

4.   

5.         .iconicmenu > label{   

6.         border-width: 7px;   

7.         background: #eee;   

8.         }   

9.            

10.         .iconicmenu:hover ul{   

11.             left: 8px; /* show menu onmouseover in IE8 and below */   

12.         }   

13.   

14. </style>  

15. <![endif]-->  

16.         <div class="iconicmenu">  

17.             <input type="checkbox" id="togglebox" />  

18.             <ul>  

19.                 <li><a targe="_blank" href="https://www.yisu.com/Shili/css3%E8%8F%9C%E5%8D%95">Home</a></li>  

20.                 <li><a targe="_blank" href="https://www.yisu.com/Shili/css3%E8%8F%9C%E5%8D%95">DHTML</a></li>  

21.                 <li><a targe="_blank" href="https://www.yisu.com/Shili/css3%E8%8F%9C%E5%8D%95">CSS Library</a></li>  

22.                 <li><a targe="_blank" href="https://www.yisu.com/Shili/css3%E8%8F%9C%E5%8D%95">CSS Gallery</a></li>  

23.                 <li><a targe="_blank" href="https://www.yisu.com/Shili/css3%E8%8F%9C%E5%8D%95">JavaScript</a></li>  

24.                 <li>  

25.                     <label for="togglebox">  

26.                     </label>  

27.                 </li>  

28.             </ul>  

29.             <label class="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.     }   

14.   

15. .iconicmenu, .iconicmenu * {   

16.     -moz-box-sizing: border-box;   

17.     box-sizing: border-box;   

18.     }   

19.   

20. .iconicmenu input[type="checkbox"] { /* checkbox used to toggle menu state */  

21.     position: absolute;   

22.     left: 0;   

23.     top: 0;   

24.     opacity: 0;   

25.     }   

26.   

27. .iconicmenu > label { /* Main label icon to toggle menu state */  

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: 6px solid black; /* border color */  

39.     border-width: 6px 0;   

40.     cursor: pointer;   

41.     -moz-transition: all 0.3s ease-in;   

42.     -webkit-transition: all 0.3s ease-in;   

43.     transition: all 0.3s ease-in; /* transition for flipping label */  

44.     }   

45.   

46. .iconicmenu > label::after { /* inner stripes inside label */  

47.     content: "";   

48.     display: block;   

49.     position: absolute;   

50.     width: 100%;   

51.     height: 18%;   

52.     top: 19%;   

53.     left: 0;   

54.     border: 6px solid black; /* border color */  

55.     border-width: 6px 0;   

56.     -moz-transition: all 0.3s ease-in;   

57.     -webkit-transition: all 0.3s ease-in;   

58.     transition: all 0.3s ease-in; /* transition for flipping label */  

59.     }   

60.   

61. .iconicmenu ul { /* UL menu inside container */  

62.     margin: 0;   

63.     padding: 0;   

64.     position: absolute;   

65.     margin-left: 40px;   

66.     background: #eee;   

67.     left: -100%; /* hide menu intially */  

68.     height: 40px; /* height of menu */  

69.     font: bold 14px Verdana;   

70.     text-align: center;   

71.     list-style: none;   

72.     opacity: 0;   

73.     -moz-border-radius: 0 5px 5px 0;   

74.     -webkit-border-radius: 0 5px 5px 0;   

75.     border-radius: 0 5px 5px 0;   

76.     -moz-perspective: 10000px;   

77.     perspective: 10000px;   

78.     -moz-transition: all 0.5s ease-in;   

79.     -webkit-transition: all 0.5s ease-in;   

80.     transition: all 0.5s ease-in; /* transition for animating UL in and out */  

81.     }   

82.   

83. .iconicmenu li {   

84.     display: inline;   

85.     margin: 0;   

86.     padding: 0;   

87.     }   

88.   

89. .iconicmenu ul label { /* label button inside UL to close menu */  

90.     cursor: pointer;   

91.     position: relative;   

92.     height: 100%;   

93.     text-align: center;   

94.     }   

95.   

96. .iconicmenu ul label::after { /* label button x */  

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: all 0.3s ease-in;   

111.     -webkit-transition: all 0.3s ease-in;   

112.     transition: all 0.3s ease-in;   

113.     }   

114.   

115. .iconicmenu input[type="checkbox"]:checked ~ label, .iconicmenu ul label:hover::after {   

116.     -moz-transform: rotatey(180deg);   

117.     -ms-transform: rotatey(180deg);   

118.     -webkit-transform: rotatey(180deg);   

119.     transform: rotatey(180deg); /* flip labels vertically onMouseover */  

120.     }   

121.   

122. .iconicmenu > label:hover, .iconicmenu > label:hover::after, .iconicmenu input[type="checkbox"]:checked ~ label, .iconicmenu input[type="checkbox"]:checked ~ label::after {   

123.     border-color: darkred; /* highlight color of main menu label onMouseover */  

124.     }   

125.   

126. .iconicmenu input[type="checkbox"]:checked ~ ul {   

127.     left: 8px; /* Animate menu into view */  

128.     opacity: 1;   

129.     -moz-box-shadow: 1px 1px 5px gray;   

130.     -webkit-box-shadow: 1px 1px 5px gray;   

131.     box-shadow: 1px 1px 5px gray;   

132.     }   

133.   

134. .iconicmenu li a {   

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.     }   

145.   

146. .iconicmenu li a:hover {   

147.     background: black;   

148.     color: white;   

149.     }   

150.   

151. /* ----------------------------- CSS Media Queries ----------------------------- */  

152.   

153. /*  

154. These rules control which portions of the menu gets shown when the screen size is below a certain width.  

155. By default 2 stages are defined depending on browser screen width.  

156. */  

157.   

158. @media screen and (max-width: 580px) { /* Hide toggle icon when menu is already open (increases usable menu space by 40px) */  

159.     .iconicmenu input[type="checkbox"]:checked ~ label {   

160.         display: none;   

161.         }   

162.     .iconicmenu input[type="checkbox"]:checked ~ ul {   

163.         margin-left: 0;   

164.         }   

165.     }   

166.     

167. @media screen and (max-width: 560px) { /* Convert horizontal menu to vertical drop down instead (friendly across all screen sizes) */  

168.     .iconicmenu {   

169.         overflow: visible;   

170.         }   

171.     .iconicmenu ul {   

172.         height: auto;   

173.         }   

174.     .iconicmenu ul li {   

175.         min-width: 200px;;   

176.         display: block;   

177.         }   

178.     .iconicmenu ul li a {   

179.         float: none;;   

180.         text-align: left;   

181.         }   

182.     }  

感谢各位的阅读，以上就是“纯css3开发的响应式设计动画菜单详细教程”的内容了，经过本文的学习后，相信大家对纯css3开发的响应式设计动画菜单详细教程这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！