资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

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

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

创新互联公司是一家专业提供汕城企业网站建设,专注与成都网站制作、网站建设、HTML5、小程序制作等业务。10年已为汕城众多企业、政府机构等服务。创新互联专业的建站公司优惠进行中。

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

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

实现的代码。

html代码：

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

  1.   

  2.           

  3.             Responsive Nav  

  4.         

  

  •         

  •               

  •               

  •               

  •             

        

    •                 

    • Home 
      •   

    •                 

    • About  

    •                       

    •                           

    •                               

    •                                 

    • About
      •   

    •                                 

    • About
      •   

    •                                 

    • Contact
      •   

    •                                 

    • Contact
      •   

    •                             

      

  •                               

  •                                 

  • Help
    •   

  •                                 

  • Pricing
    •   

  •                                 

  • Team
    •   

  •                                 

  • Services
    •   

  •                               

  •                               

  •                                 

  • Coming Soon
    •   

  •                                 

  • 404 Error
    •   

  •                                 

  • Search
    •   

  •                                 

  • Author Page
    •   

  •                               

  •                               

  •                                 

  • Full Width
    •   

  •                                 

  • Right Column
    •   

  •                                 

  • Left Column
    •   

  •                                 

  • Maintenance
    •   

  •                               

  •                         

    •   

  •                       

  •                 

    •   

  •                 Contact  

  •                     

        

    •                         

    • About Version
      •   

    •                         

    • About Version
      •   

    •                         

    • Contact Us
      •   

    •                         

    • Contact Us
      •   

    •                     

      

  •                 

    •   

  •                 

  • Portfolio 
    •   

  •                 

  • Team 
    •   

  •               

  •           

  •     

    •   

    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('

    ');   

  •         $('#menu-icon').on('click', function () {   

  •             window.CP.stopExecutionOnTimeout(1);   

  •             $('nav').slideToggle();   

  •             $(this).toggleClass('active');   

  •         }); //@ sourceURL=pen.js  

    • “用jquery和css3实现的响应式二级导航菜单”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！


    当前名称：用jquery和css3实现的响应式二级导航菜单
    当前路径：http://cdkjz.cn/article/gggeod.html
    返回首页 了解更多建站资讯

    相关资讯

    多年建站经验

    多一份参考，总有益处

    联系快上网，免费获得专属《策划方案》及报价

    咨询相关问题或预约面谈，可以通过以下方式与我们联系

    业务热线：400-028-6601 / 大客户专线   成都：13518219792   座机：028-86922220

    在线咨询 提交需求
    友情链接 交换友情链接
    云服务器企业营销型网站四川广汉锦华成都网站制作阿坝网站建设教育培训网站建设方案LED亮化工程网站制作广汉长尔科技中建建业环保

    成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询400-028-6601

    成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

    专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图