JQUERY教程

当前位置: HTML5技术网 > JQUERY教程 > 一款基于jquery和css3的响应式二级导航菜单

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

JQUERY教程  手机阅读

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

在线预览   源码下载

实现的代码。

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

【一款基于jquery和css3的响应式二级导航菜单】相关文章

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

2. 一款基于jquery和css3的头像恶搞特效

3. 用CSS3设计响应式导航菜单

4. 使用 jQuery 和 CSS3 制作滑动导航菜单

5. 26款免费CSS3导航菜单及jQuery插件

6. jQuery二级下拉菜单 菜单简易实用

7. jQuery和css3响应式带滚动条的内容手风琴插件

8. 使用jQuery和CSS3创建Android导航

9. 使用jQuery和CSS3创建Android导航

10. 一款基于jQuery的图片场景标注提示弹窗特效

本文来源:https://www.51html5.com/a1375.html

点击展开全部
上一篇:FancyBox - 经典的 jQuery Lightbox 插件 下一篇:5款基于jQuery实现的动画的源码

﹝一款基于jquery和css3的响应式二级导航菜单﹞相关内容

「一款基于jquery和css3的响应式二级导航菜单」相关专题

padding css jquery
复制网址 收藏网址 分享到微信 分享到微博 分享到QQ

其它栏目

HTML5教程 CSS3教程 JQUERY教程

也许您还喜欢