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

这里加入了兼容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开发的响应式设计动画菜单详细教程这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！