实列教程 一款基于jquery和css3的响应式二级导航菜单

之前分享了很多纯css的导航菜单，今天给大家分享一款基于jquery和css3的响应式二级导航菜单，这款导航是传统的基于顶部，鼠标经过的时候显示二级导航，还采用了当前流行的响应式设计。效果图如下：

实现的代码。

html代码：

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

1. <div id="header">  
2.         <div class="logo">  
3.             <a href="#">Responsive Nav</a>  
4.         </div>  
5.         <nav>  
6.             <form class="search" action="search.php">  
7.             <input name="q" placeholder="Search..." type="search">  
8.             </form>  
9.             <ul>  
10.                 <li><a href="">Home</a> </li>  
11.                 <li><a href="">About</a>  
12.                     <ul class="mega-dropdown">  
13.                         <li class="row">  
14.                             <ul class="mega-col">  
15.                                 <li><a href="#">About</a></li>  
16.                                 <li><a href="#">About</a></li>  
17.                                 <li><a href="#">Contact</a></li>  
18.                                 <li><a href="#">Contact</a></li>  
19.                             </ul>  
20.                             <ul class="mega-col">  
21.                                 <li><a href="#">Help</a></li>  
22.                                 <li><a href="#">Pricing</a></li>  
23.                                 <li><a href="#">Team</a></li>  
24.                                 <li><a href="#">Services</a></li>  
25.                             </ul>  
26.                             <ul class="mega-col">  
27.                                 <li><a href="#">Coming Soon</a></li>  
28.                                 <li><a href="#">404 Error</a></li>  
29.                                 <li><a href="#">Search</a></li>  
30.                                 <li><a href="#">Author Page</a></li>  
31.                             </ul>  
32.                             <ul class="mega-col">  
33.                                 <li><a href="#">Full Width</a></li>  
34.                                 <li><a href="#">Right Column</a></li>  
35.                                 <li><a href="#">Left Column</a></li>  
36.                                 <li><a href="#">Maintenance</a></li>  
37.                             </ul>  
38.                         </li>  
39.                     </ul>  
40.                 </li>  
41.                 <li class="dropdown"><a href="">Contact</a>  
42.                     <ul>  
43.                         <li><a href="#">About Version</a></li>  
44.                         <li><a href="#">About Version</a></li>  
45.                         <li><a href="#">Contact Us</a></li>  
46.                         <li><a href="#">Contact Us</a></li>  
47.                     </ul>  
48.                 </li>  
49.                 <li><a href="">Portfolio</a> </li>  
50.                 <li><a href="">Team</a> </li>  
51.             </ul>  
52.         </nav>  
53.     </div>  

css3代码：

CSS Code复制内容到剪贴板

1. *, *:before, *:after   
2.         {   
3.             -moz-box-sizing: border-box;   
4.             -webkit-box-sizing: border-box;   
5.             box-sizing: border-box;   
6.             margin: 0;   
7.             padding: 0;   
8.         }   
9.         body   
10.         {   
11.             background: #bdc3c7;   
12.             line-height: 1.5;   
13.             font-family: sans-serif;   
14.             text-transform: uppercase;   
15.             font-size: 16px;   
16.             color: #fff;   
17.         }   
18.         a   
19.         {   
20.             text-decoration: none;   
21.             color: #fff;   
22.         }   
23.         #header  
24.         {   
25.             background: #1E262D;   
26.             width: 100%;   
27.             position: relative;   
28.         }   
29.         #header:after   
30.         {   
31.             content: "";   
32.             clear: both;   
33.             display: block;   
34.         }   
35.         .search   
36.         {   
37.             float: rightright;   
38.             padding: 30px;   
39.         }   
40.         input   
41.         {   
42.             border: none;   
43.             padding: 10px;   
44.             border-radius: 20px;   
45.         }   
46.         .logo   
47.         {   
48.             float: left;   
49.             padding: 26px 0 26px;   
50.         }   
51.         .logo a   
52.         {   
53.             font-size: 28px;   
54.             display: block;   
55.             padding: 0 0 0 20px;   
56.         }   
57.         nav   
58.         {   
59.             float: rightright;   
60.         }   
61.         nav > ul   
62.         {   
63.             float: left;   
64.             position: relative;   
65.         }   
66.         nav li   
67.         {   
68.             list-style: none;   
69.             float: left;   
70.         }   
71.         nav .dropdown   
72.         {   
73.             position: relative;   
74.         }   
75.         nav li a   
76.         {   
77.             float: left;   
78.             padding: 35px;   
79.         }   
80.         nav li a:hover   
81.         {   
82.             background: #2C3E50;   
83.         }   
84.         nav li ul   
85.         {   
86.             display: none;   
87.         }   
88.         nav li:hover ul   
89.         {   
90.             display: inline;   
91.         }   
92.         nav li li   
93.         {   
94.             float: none;   
95.         }   
96.         nav .dropdown ul   
97.         {   
98.             position: absolute;   
99.             left: 0;   
100.             top: 100%;   
101.             background: #fff;   
102.             padding: 20px 0;   
103.             border-bottom: 3px solid #34495e;   
104.         }   
105.         nav .dropdown li   
106.         {   
107.             whitewhite-space: nowrap;   
108.         }   
109.         nav .dropdown li a   
110.         {   
111.             padding: 10px 35px;   
112.             font-size: 13px;   
113.             min-width: 200px;   
114.         }   
115.         nav .mega-dropdown   
116.         {   
117.             width: 100%;   
118.             position: absolute;   
119.             top: 100%;   
120.             left: 0;   
121.             background: #fff;   
122.             overflow: hidden;   
123.             padding: 20px 35px;   
124.             border-bottom: 3px solid #34495e;   
125.         }   
126.         nav li li a   
127.         {   
128.             float: none;   
129.             color: #333;   
130.             display: block;   
131.             padding: 8px 10px;   
132.             border-radius: 3px;   
133.             font-size: 13px;   
134.         }   
135.         nav li li a:hover   
136.         {   
137.             background: #bdc3c7;   
138.             background: #FAFBFB;   
139.         }   
140.         .mega-col   
141.         {   
142.             width: 25%;   
143.             float: left;   
144.         }   
145.         #menu-icon  
146.         {   
147.             position: absolute;   
148.             rightright: 0;   
149.             top: 50%;   
150.             margin-top: -12px;   
151.             margin-right: 30px;   
152.             display: none;   
153.         }   
154.         #menu-icon span   
155.         {   
156.             border: 2px solid #fff;   
157.             width: 30px;   
158.             margin-bottom: 5px;   
159.             display: block;   
160.             -webkit-transition: all .2s;   
161.             transition: all .1s;   
162.         }   
163.         @media only screen and (max-width: 1170px)   
164.         {   
165.             nav > ul > li > a   
166.             {   
167.                 padding: 35px 15px;   
168.             }   
169.         }   
170.         @media only screen and (min-width: 960px)   
171.         {   
172.             nav   
173.             {   
174.                 display: block !important;   
175.             }   
176.         }   
177.         @media only screen and (max-width: 959px)   
178.         {   
179.             nav   
180.             {   
181.                 display: none;   
182.                 width: 100%;   
183.                 clear: both;   
184.                 float: none;   
185.                 max-height: 400px;   
186.                 overflow-y: scroll;   
187.             }   
188.             #menu-icon  
189.             {   
190.                 display: inline;   
191.                 top: 45px;   
192.                 cursor: pointer;   
193.             }   
194.             #menu-icon.active .first   
195.             {   
196.                 transform: rotate(45deg);   
197.                 -webkit-transform: rotate(45deg);   
198.                 margin-top: 10px;   
199.             }   
200.             #menu-icon.active .second   
201.             {   
202.                 transform: rotate(135deg);   
203.                 -webkit-transform: rotate(135deg);   
204.                 position: relative;   
205.                 top: -9px;   
206.             }   
207.             #menu-icon.active .third   
208.             {   
209.                 display: none;   
210.             }   
211.             .search   
212.             {   
213.                 float: none;   
214.             }   
215.             .search input   
216.             {   
217.                 width: 100%;   
218.             }   
219.             nav   
220.             {   
221.                 padding: 10px;   
222.             }   
223.             nav ul   
224.             {   
225.                 float: none;   
226.             }   
227.             nav li   
228.             {   
229.                 float: none;   
230.             }   
231.             nav ul li a   
232.             {   
233.                 float: none;   
234.                 padding: 8px;   
235.                 display: block;   
236.             }   
237.             #header nav ul ul   
238.             {   
239.                 display: block;   
240.                 position: static;   
241.                 background: none;   
242.                 border: none;   
243.                 padding: 0;   
244.             }   
245.             #header nav a   
246.             {   
247.                 color: #fff;   
248.                 padding: 8px;   
249.             }   
250.             #header nav a:hover   
251.             {   
252.                 background: #fff;   
253.                 color: #333;   
254.                 border-radius: 3px;   
255.             }   
256.             #header nav ul li li a:before   
257.             {   
258.                 content: "- ";   
259.             }   
260.             .mega-col   
261.             {   
262.                 width: 100%;   
263.             }   
264.         }  

js代码：

JavaScript Code复制内容到剪贴板

1. $('#header').prepend('<div id="menu-icon"><span class="first"></span><span class="second"></span><span class="third"></span></div>');   
2.         $('#menu-icon').on('click', function () {   
3.             window.CP.stopExecutionOnTimeout(1);   
4.             $('nav').slideToggle();   
5.             $(this).toggleClass('active');   
6.         }); //@ sourceURL=pen.js  

以上就是基于jquery和css3的响应式二级导航菜单，谢谢阅读，希望能帮到大家，请继续关注三水点靠木，我们会努力分享更多优秀的文章。