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

网络
春季是一个富有生命力季节，也是一个美丽、神奇，充满希望季节。柳树枝条向下垂着，就似一条条线挂树上。春季景色十分美丽，就似一幅栩栩如生画。

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

　　实现的代码。

　　html代码：

XML/HTML Code复制内容到剪贴板
  1. <divid="header">
  2. <divclass="logo">
  3. <arel="nofollow noopener noreferrer" href="#">ResponsiveNav</a>
  4. </div>
  5. <nav>
  6. <formclass="search"action="search.php">
  7. <inputname="q"placeholder="Search..."type="search">
  8. </form>
  9. <ul>
  10. <li><arel="nofollow noopener noreferrer" href="">Home</a></li>
  11. <li><arel="nofollow noopener noreferrer" href="">About</a>
  12. <ulclass="mega-dropdown">
  13. <liclass="row">
  14. <ulclass="mega-col">
  15. <li><arel="nofollow noopener noreferrer" href="#">About</a></li>
  16. <li><arel="nofollow noopener noreferrer" href="#">About</a></li>
  17. <li><arel="nofollow noopener noreferrer" href="#">Contact</a></li>
  18. <li><arel="nofollow noopener noreferrer" href="#">Contact</a></li>
  19. </ul>
  20. <ulclass="mega-col">
  21. <li><arel="nofollow noopener noreferrer" href="#">Help</a></li>
  22. <li><arel="nofollow noopener noreferrer" href="#">Pricing</a></li>
  23. <li><arel="nofollow noopener noreferrer" href="#">Team</a></li>
  24. <li><arel="nofollow noopener noreferrer" href="#">Services</a></li>
  25. </ul>
  26. <ulclass="mega-col">
  27. <li><arel="nofollow noopener noreferrer" href="#">ComingSoon</a></li>
  28. <li><arel="nofollow noopener noreferrer" href="#">404Error</a></li>
  29. <li><arel="nofollow noopener noreferrer" href="#">Search</a></li>
  30. <li><arel="nofollow noopener noreferrer" href="#">AuthorPage</a></li>
  31. </ul>
  32. <ulclass="mega-col">
  33. <li><arel="nofollow noopener noreferrer" href="#">FullWidth</a></li>
  34. <li><arel="nofollow noopener noreferrer" href="#">RightColumn</a></li>
  35. <li><arel="nofollow noopener noreferrer" href="#">LeftColumn</a></li>
  36. <li><arel="nofollow noopener noreferrer" href="#">Maintenance</a></li>
  37. </ul>
  38. </li>
  39. </ul>
  40. </li>
  41. <liclass="dropdown"><arel="nofollow noopener noreferrer" href="">Contact</a>
  42. <ul>
  43. <li><arel="nofollow noopener noreferrer" href="#">AboutVersion</a></li>
  44. <li><arel="nofollow noopener noreferrer" href="#">AboutVersion</a></li>
  45. <li><arel="nofollow noopener noreferrer" href="#">ContactUs</a></li>
  46. <li><arel="nofollow noopener noreferrer" href="#">ContactUs</a></li>
  47. </ul>
  48. </li>
  49. <li><arel="nofollow noopener noreferrer" href="">Portfolio</a></li>
  50. <li><arel="nofollow noopener noreferrer" 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:26px026px;
  50. }
  51. .logoa
  52. {
  53. font-size:28px;
  54. display:block;
  55. padding:00020px;
  56. }
  57. nav
  58. {
  59. float:rightright;
  60. }
  61. nav>ul
  62. {
  63. float:left;
  64. position:relative;
  65. }
  66. navli
  67. {
  68. list-style:none;
  69. float:left;
  70. }
  71. nav.dropdown
  72. {
  73. position:relative;
  74. }
  75. navlia
  76. {
  77. float:left;
  78. padding:35px;
  79. }
  80. navlia:hover
  81. {
  82. background:#2C3E50;
  83. }
  84. navliul
  85. {
  86. display:none;
  87. }
  88. navli:hoverul
  89. {
  90. display:inline;
  91. }
  92. navlili
  93. {
  94. float:none;
  95. }
  96. nav.dropdownul
  97. {
  98. position:absolute;
  99. left:0;
  100. top:100%;
  101. background:#fff;
  102. padding:20px0;
  103. border-bottom:3pxsolid#34495e;
  104. }
  105. nav.dropdownli
  106. {
  107. whitewhite-space:nowrap;
  108. }
  109. nav.dropdownlia
  110. {
  111. padding:10px35px;
  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:20px35px;
  124. border-bottom:3pxsolid#34495e;
  125. }
  126. navlilia
  127. {
  128. float:none;
  129. color:#333;
  130. display:block;
  131. padding:8px10px;
  132. border-radius:3px;
  133. font-size:13px;
  134. }
  135. navlilia: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-iconspan
  155. {
  156. border:2pxsolid#fff;
  157. width:30px;
  158. margin-bottom:5px;
  159. display:block;
  160. -webkit-transition:all.2s;
  161. transition:all.1s;
  162. }
  163. @mediaonlyscreenand(max-width:1170px)
  164. {
  165. nav>ul>li>a
  166. {
  167. padding:35px15px;
  168. }
  169. }
  170. @mediaonlyscreenand(min-width:960px)
  171. {
  172. nav
  173. {
  174. display:block!important;
  175. }
  176. }
  177. @mediaonlyscreenand(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. .searchinput
  216. {
  217. width:100%;
  218. }
  219. nav
  220. {
  221. padding:10px;
  222. }
  223. navul
  224. {
  225. float:none;
  226. }
  227. navli
  228. {
  229. float:none;
  230. }
  231. navullia
  232. {
  233. float:none;
  234. padding:8px;
  235. display:block;
  236. }
  237. #headernavulul
  238. {
  239. display:block;
  240. position:static;
  241. background:none;
  242. border:none;
  243. padding:0;
  244. }
  245. #headernava
  246. {
  247. color:#fff;
  248. padding:8px;
  249. }
  250. #headernava:hover
  251. {
  252. background:#fff;
  253. color:#333;
  254. border-radius:3px;
  255. }
  256. #headernavullilia:before
  257. {
  258. content:"-";
  259. }
  260. .mega-col
  261. {
  262. width:100%;
  263. }
  264. }

　　js代码：

JavaScript Code复制内容到剪贴板
  1. $('#header').prepend('<divid="menu-icon"><spanclass="first"></span><spanclass="second"></span><spanclass="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的响应式二级导航菜单，谢谢阅读，希望能帮到大家，请继续关注，我们会努力分享更多优秀的文章。

您可能有感兴趣的文章
JQuery获取与设置元素CSS属性
JQuery is()方法与hasClass()方法的对比
jQuery选择元素的方法大全
如何利用JQuery为元素添加样式的方法
jQuery中自定义动画animate()方法如何使用与详解