用jquery和css3实现的响应式二级导航菜单

发布时间:2021-08-10 20:53:48 作者:chen
来源:亿速云 阅读:176

本篇内容介绍了“用jquery和css3实现的响应式二级导航菜单”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

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

用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-familysans-serif;   

  14.             text-transformuppercase;   

  15.             font-size16px;   

  16.             color#fff;   

  17.         }   

  18.         a   

  19.         {   

  20.             text-decorationnone;   

  21.             color#fff;   

  22.         }   

  23.         #header  

  24.         {   

  25.             background#1E262D;   

  26.             width: 100%;   

  27.             positionrelative;   

  28.         }   

  29.         #header:after   

  30.         {   

  31.             content"";   

  32.             clearboth;   

  33.             displayblock;   

  34.         }   

  35.         .search   

  36.         {   

  37.             floatrightright;   

  38.             padding30px;   

  39.         }   

  40.         input   

  41.         {   

  42.             bordernone;   

  43.             padding10px;   

  44.             border-radius: 20px;   

  45.         }   

  46.         .logo   

  47.         {   

  48.             floatleft;   

  49.             padding26px 0 26px;   

  50.         }   

  51.         .logo a   

  52.         {   

  53.             font-size28px;   

  54.             displayblock;   

  55.             padding: 0 0 0 20px;   

  56.         }   

  57.         nav   

  58.         {   

  59.             floatrightright;   

  60.         }   

  61.         nav > ul   

  62.         {   

  63.             floatleft;   

  64.             positionrelative;   

  65.         }   

  66.         nav li   

  67.         {   

  68.             list-stylenone;   

  69.             floatleft;   

  70.         }   

  71.         nav .dropdown   

  72.         {   

  73.             positionrelative;   

  74.         }   

  75.         nav li a   

  76.         {   

  77.             floatleft;   

  78.             padding35px;   

  79.         }   

  80.         nav li a:hover   

  81.         {   

  82.             background#2C3E50;   

  83.         }   

  84.         nav li ul   

  85.         {   

  86.             displaynone;   

  87.         }   

  88.         nav li:hover ul   

  89.         {   

  90.             displayinline;   

  91.         }   

  92.         nav li li   

  93.         {   

  94.             floatnone;   

  95.         }   

  96.         nav .dropdown ul   

  97.         {   

  98.             positionabsolute;   

  99.             left: 0;   

  100.             top: 100%;   

  101.             background#fff;   

  102.             padding20px 0;   

  103.             border-bottom3px solid #34495e;   

  104.         }   

  105.         nav .dropdown li   

  106.         {   

  107.             whitewhite-spacenowrap;   

  108.         }   

  109.         nav .dropdown li a   

  110.         {   

  111.             padding10px 35px;   

  112.             font-size13px;   

  113.             min-width200px;   

  114.         }   

  115.         nav .mega-dropdown   

  116.         {   

  117.             width: 100%;   

  118.             positionabsolute;   

  119.             top: 100%;   

  120.             left: 0;   

  121.             background#fff;   

  122.             overflowhidden;   

  123.             padding20px 35px;   

  124.             border-bottom3px solid #34495e;   

  125.         }   

  126.         nav li li a   

  127.         {   

  128.             floatnone;   

  129.             color#333;   

  130.             displayblock;   

  131.             padding8px 10px;   

  132.             border-radius: 3px;   

  133.             font-size13px;   

  134.         }   

  135.         nav li li a:hover   

  136.         {   

  137.             background#bdc3c7;   

  138.             background#FAFBFB;   

  139.         }   

  140.         .mega-col   

  141.         {   

  142.             width: 25%;   

  143.             floatleft;   

  144.         }   

  145.         #menu-icon  

  146.         {   

  147.             positionabsolute;   

  148.             rightright: 0;   

  149.             top: 50%;   

  150.             margin-top: -12px;   

  151.             margin-right30px;   

  152.             displaynone;   

  153.         }   

  154.         #menu-icon span   

  155.         {   

  156.             border2px solid #fff;   

  157.             width30px;   

  158.             margin-bottom5px;   

  159.             displayblock;   

  160.             -webkit-transition: all .2s;   

  161.             transition: all .1s;   

  162.         }   

  163.         @media only screen and (max-width1170px)   

  164.         {   

  165.             nav > ul > li > a   

  166.             {   

  167.                 padding35px 15px;   

  168.             }   

  169.         }   

  170.         @media only screen and (min-width960px)   

  171.         {   

  172.             nav   

  173.             {   

  174.                 displayblock !important;   

  175.             }   

  176.         }   

  177.         @media only screen and (max-width959px)   

  178.         {   

  179.             nav   

  180.             {   

  181.                 displaynone;   

  182.                 width: 100%;   

  183.                 clearboth;   

  184.                 floatnone;   

  185.                 max-height400px;   

  186.                 overflow-y: scroll;   

  187.             }   

  188.             #menu-icon  

  189.             {   

  190.                 displayinline;   

  191.                 top45px;   

  192.                 cursorpointer;   

  193.             }   

  194.             #menu-icon.active .first   

  195.             {   

  196.                 transform: rotate(45deg);   

  197.                 -webkit-transform: rotate(45deg);   

  198.                 margin-top10px;   

  199.             }   

  200.             #menu-icon.active .second   

  201.             {   

  202.                 transform: rotate(135deg);   

  203.                 -webkit-transform: rotate(135deg);   

  204.                 positionrelative;   

  205.                 top: -9px;   

  206.             }   

  207.             #menu-icon.active .third   

  208.             {   

  209.                 displaynone;   

  210.             }   

  211.             .search   

  212.             {   

  213.                 floatnone;   

  214.             }   

  215.             .search input   

  216.             {   

  217.                 width: 100%;   

  218.             }   

  219.             nav   

  220.             {   

  221.                 padding10px;   

  222.             }   

  223.             nav ul   

  224.             {   

  225.                 floatnone;   

  226.             }   

  227.             nav li   

  228.             {   

  229.                 floatnone;   

  230.             }   

  231.             nav ul li a   

  232.             {   

  233.                 floatnone;   

  234.                 padding8px;   

  235.                 displayblock;   

  236.             }   

  237.             #header nav ul ul   

  238.             {   

  239.                 displayblock;   

  240.                 positionstatic;   

  241.                 backgroundnone;   

  242.                 bordernone;   

  243.                 padding: 0;   

  244.             }   

  245.             #header nav a   

  246.             {   

  247.                 color#fff;   

  248.                 padding8px;   

  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实现的响应式二级导航菜单”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!

推荐阅读:
  1. CSS3二级导航菜单怎么弄
  2. 使用jQuery如何实现二级导航菜单

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

jquery css3

上一篇:CSS强制性换行的方法

下一篇:html5+css3气泡组件的实现方式

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》