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

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

在线预览   源码下载

实现的代码。

html代码：

Html代码  

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代码：

Html代码  

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: right;  
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: right;  
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.             white-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.             right: 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代码：

Js代码  

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  

 

 注：本文爱编程原创文章，转载请注明原文地址：http://www.w2bc.com/Article/10569