文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-04-02 19:55

关注

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

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯