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

ttx9n

这篇主要讲利用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.jb51.net/Shili/css3%E8%8F%9C%E5%8D%95">Home</a></li>  
20.                 <li><a targe="_blank" href="https://www.jb51.net/Shili/css3%E8%8F%9C%E5%8D%95">DHTML</a></li>  
21.                 <li><a targe="_blank" href="https://www.jb51.net/Shili/css3%E8%8F%9C%E5%8D%95">CSS Library</a></li>  
22.                 <li><a targe="_blank" href="https://www.jb51.net/Shili/css3%E8%8F%9C%E5%8D%95">CSS Gallery</a></li>  
23.                 <li><a targe="_blank" href="https://www.jb51.net/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实现的菜单，是不是很简单呢，谢谢阅读，希望能帮到大家，请继续关注脚本之家，我们会努力分享更多优秀的文章。

平平安安

好人好人好人好人

mkonji

先把创新班才能下班才能下班

wqpa63gz

啊，数码撒飒飒飒飒

dingzhi521

问问问企鹅哇哇哇哇哇

95nd4ba

给爸爸爸爸爸爸爸爸爸爸八佰伴八佰伴

feiyasqhr

问问问企鹅哇哇哇哇哇

dm00ji1s

感谢楼主分享

a75620618

很好，谢谢分享

mkonji

很不错的玩意