导航菜单

简洁JS和CSS3多级导航菜单

阿里云

这是一款基于 bootsnav 的 js 和 CSS3 多级导航菜单效果。该多级导航菜单效果在 bootsnav 菜单的基础上进行了美化,使效果更加炫酷。

使用方法:

在页面中引入 bootstrap 相关文件,jquery 和 bootsnav 文件。

也想出现在这里?联系我们
创客主机
  1. <link rel="stylesheet" href="css/bootstrap.min.css">
  2. <link rel="stylesheet" href="css/font-awesome.min.css">
  3. <link rel="stylesheet" href="css/bootsnav.css">
  4. <script type="text/javascript" src="js/jquery.min.js"></script>
  5. <script type="text/javascript" src="js/bootstrap.min.js"></script>
  6. <script type="text/javascript" src="js/bootsnav.js"></script>

HTML 结构:

该 js 和 CSS3 多级导航菜单的 HTML 结构如下:

  1. <div class="container">
  2.     <div class="row">
  3.         <div class="col-md-12">
  4.             <nav class="navbar navbar-default navbar-mobile bootsnav on">
  5.                 <div class="navbar-header">
  6.                     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
  7.                         <i class="fa fa-bars"></i>
  8.                     </button>
  9.                 </div>
  10.                 <div class="collapse navbar-collapse" id="navbar-menu">
  11.                     <ul class="nav navbar-nav" data-in="fadeInDown" data-out="fadeOutUp">
  12.                         <li><a href="#" data-hover="Home">Home</a></li>
  13.                         <li><a href="#" data-hover="About">About</a></li>
  14.                         <li class="dropdown">
  15.                             <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="Shortcodes">Shortcodes</a>
  16.                             <ul class="dropdown-menu animated">
  17.                                 <li><a href="#">Custom Menu</a></li>
  18.                                 <li><a href="#">Custom Menu</a></li>
  19.                                 <li class="dropdown">
  20.                                     <a href="#" class="dropdown-toggle" data-toggle="dropdown">Sub Menu</a>
  21.                                     <ul class="dropdown-menu animated">
  22.                                         <li><a href="#">Custom Menu</a></li>
  23.                                         <li><a href="#">Custom Menu</a></li>
  24.                                         <li class="dropdown">
  25.                                             <a href="#" class="dropdown-toggle" data-toggle="dropdown">Sub Menu</a>
  26.                                             <ul class="dropdown-menu multi-dropdown animated">
  27.                                                 <li><a href="#">Custom Menu</a></li>
  28.                                                 <li><a href="#">Custom Menu</a></li>
  29.                                                 <li><a href="#">Custom Menu</a></li>
  30.                                                 <li><a href="#">Custom Menu</a></li>
  31.                                             </ul>
  32.                                         </li>
  33.                                         <li><a href="#">Custom Menu</a></li>
  34.                                     </ul>
  35.                                 </li>
  36.                                 <li><a href="#">Custom Menu</a></li>
  37.                                 <li><a href="#">Custom Menu</a></li>
  38.                                 <li><a href="#">Custom Menu</a></li>
  39.                                 <li><a href="#">Custom Menu</a></li>
  40.                             </ul>
  41.                         </li>
  42.                         <li class="dropdown">
  43.                             <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="Pages">Pages</a>
  44.                             <ul class="dropdown-menu animated">
  45.                                 <li><a href="#">Custom Menu</a></li>
  46.                                 <li><a href="#">Custom Menu</a></li>
  47.                                 <li class="dropdown">
  48.                                     <a href="#" class="dropdown-toggle" data-toggle="dropdown">Sub Menu</a>
  49.                                     <ul class="dropdown-menu animated">
  50.                                         <li><a href="#">Custom Menu</a></li>
  51.                                         <li><a href="#">Custom Menu</a></li>
  52.                                         <li class="dropdown">
  53.                                             <a href="#" class="dropdown-toggle" data-toggle="dropdown">Sub Menu</a>
  54.                                             <ul class="dropdown-menu multi-dropdown animated">
  55.                                                 <li><a href="#">Custom Menu</a></li>
  56.                                                 <li><a href="#">Custom Menu</a></li>
  57.                                                 <li><a href="#">Custom Menu</a></li>
  58.                                                 <li><a href="#">Custom Menu</a></li>
  59.                                             </ul>
  60.                                         </li>
  61.                                         <li><a href="#">Custom Menu</a></li>
  62.                                     </ul>
  63.                                 </li>
  64.                                 <li><a href="#">Custom Menu</a></li>
  65.                                 <li><a href="#">Custom Menu</a></li>
  66.                                 <li><a href="#">Custom Menu</a></li>
  67.                                 <li><a href="#">Custom Menu</a></li>
  68.                             </ul>
  69.                         </li>
  70.                         <li><a href="#" data-hover="Portfolio">Portfolio</a></li>
  71.                         <li class="dropdown megamenu-fw">
  72.                             <a href="#" class="dropdown-toggle" data-toggle="dropdown">Megamenu</a>
  73.                             <ul class="dropdown-menu megamenu-content animated" role="menu">
  74.                                 <li>
  75.                                     <div class="row">
  76.                                         <div class="col-menu col-md-3">
  77.                                             <h6 class="title">Title Menu One</h6>
  78.                                             <div class="content">
  79.                                                 <ul class="menu-col">
  80.                                                     <li><a href="#">Custom Menu</a></li>
  81.                                                     <li><a href="#">Custom Menu</a></li>
  82.                                                     <li><a href="#">Custom Menu</a></li>
  83.                                                     <li><a href="#">Custom Menu</a></li>
  84.                                                     <li><a href="#">Custom Menu</a></li>
  85.                                                 </ul>
  86.                                             </div>
  87.                                         </div><!-- end col-3 -->
  88.                                         <div class="col-menu col-md-3">
  89.                                             <h6 class="title">Title Menu Two</h6>
  90.                                             <div class="content">
  91.                                                 <ul class="menu-col">
  92.                                                     <li><a href="#">Custom Menu</a></li>
  93.                                                     <li><a href="#">Custom Menu</a></li>
  94.                                                     <li><a href="#">Custom Menu</a></li>
  95.                                                     <li><a href="#">Custom Menu</a></li>
  96.                                                     <li><a href="#">Custom Menu</a></li>
  97.                                                 </ul>
  98.                                             </div>
  99.                                         </div><!-- end col-3 -->
  100.                                         <div class="col-menu col-md-3">
  101.                                             <h6 class="title">Title Menu Three</h6>
  102.                                             <div class="content">
  103.                                                 <ul class="menu-col">
  104.                                                     <li><a href="#">Custom Menu</a></li>
  105.                                                     <li><a href="#">Custom Menu</a></li>
  106.                                                     <li><a href="#">Custom Menu</a></li>
  107.                                                     <li><a href="#">Custom Menu</a></li>
  108.                                                     <li><a href="#">Custom Menu</a></li>
  109.                                                 </ul>
  110.                                             </div>
  111.                                         </div>
  112.                                         <div class="col-menu col-md-3">
  113.                                             <h6 class="title">Title Menu Four</h6>
  114.                                             <div class="content">
  115.                                                 <ul class="menu-col">
  116.                                                     <li><a href="#">Custom Menu</a></li>
  117.                                                     <li><a href="#">Custom Menu</a></li>
  118.                                                     <li><a href="#">Custom Menu</a></li>
  119.                                                     <li><a href="#">Custom Menu</a></li>
  120.                                                     <li><a href="#">Custom Menu</a></li>
  121.                                                 </ul>
  122.                                             </div>
  123.                                         </div><!-- end col-3 -->
  124.                                     </div><!-- end row -->
  125.                                 </li>
  126.                             </ul>
  127.                         </li>
  128.                         <li><a href="#" data-hover="Contact">Contact</a></li>
  129.                     </ul>
  130.                 </div>
  131.             </nav>
  132.         </div>
  133.     </div>
  134. </div>

CSS 样式:

然后通过下面的 CSS 代码来对该 js 和 CSS3 多级导航菜单进行美化。

  1. nav.navbar.bootsnav{
  2.     border: none;
  3.     background: none;
  4.     margin-bottom: 150px;
  5. }
  6. nav.navbar.bootsnav ul.nav > li{
  7.     margin-right: 10px;
  8. }
  9. nav.navbar.bootsnav ul.nav > li:before{
  10.     content: "";
  11.     width: 2px;
  12.     height: 0;
  13.     background: #fff;
  14.     margin: 0 auto;
  15.     position: absolute;
  16.     bottom: 0;
  17.     left: 0;
  18.     right: 0;
  19.     transition: all 0.5s ease 0s;
  20. }
  21. nav.navbar.bootsnav ul.nav > li:hover:before{ height: 25px; }
  22. nav.navbar.bootsnav ul.nav > li.megamenu-fw:before{ left: 11.3%; }
  23. nav.navbar.bootsnav ul.nav > li:after{
  24.     content: "";
  25.     width: 10px;
  26.     height: 10px;
  27.     border-radius: 50%;
  28.     background: #fff;
  29.     margin: 0 auto;
  30.     position: absolute;
  31.     bottom: 70px;
  32.     left: 0;
  33.     right: 0;
  34.     opacity: 0;
  35.     transition: all 0.5s ease 0s;
  36. }
  37. nav.navbar.bootsnav ul.nav > li:hover:after{
  38.     bottom: 20px;
  39.     opacity: 1;
  40. }
  41. nav.navbar.bootsnav ul.nav > li.megamenu-fw:after{ left: 11.3%; }
  42. nav.navbar.bootsnav ul.nav > li > a{
  43.     padding: 15px 15px 35px 15px;
  44.     margin: 0;
  45.     color: #fff;
  46.     text-transform: uppercase;
  47.     z-index: 1;
  48.     transition: all 0.5s ease 0s;
  49. }
  50. nav.navbar.bootsnav ul.nav > li.dropdown > a{
  51.     padding: 15px 30px 35px 15px;
  52. }
  53. nav.navbar.bootsnav ul.nav > li > a:hover{ color: #fff; }
  54. nav.navbar.bootsnav ul.nav > li.dropdown > a.dropdown-toggle:after{
  55.     position: absolute;
  56.     margin: 0 0 0 7px;
  57. }
  58. nav.navbar.bootsnav ul.nav > li.dropdown > ul{
  59.     top: 120%;
  60.     transition: all 0.8s ease 0s;
  61. }
  62. nav.navbar.bootsnav ul.nav > li.dropdown.on > ul{
  63.     top: 100%;
  64. }
  65. .dropdown-menu.multi-dropdown{
  66.     position: absolute;
  67.     left: -100% !important;
  68. }
  69. nav.navbar.bootsnav li.dropdown ul.dropdown-menu{
  70.     box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  71.     border: none;
  72. }
  73. nav.navbar.bootsnav li.dropdown ul.dropdown-menu.megamenu-content li{
  74.     font-size: 14px;
  75.     color: #6f6f6f;
  76. }
  77. nav.navbar.bootsnav li.dropdown ul.dropdown-menu.megamenu-content .title{
  78.     font-size: 16px;
  79.     font-weight: bold;
  80.     color: #3f3f3f;
  81. }
  82. @media only screen and (max-width:990px){
  83.     .dropdown-menu.multi-dropdown{ left: 0 !important; }
  84.     nav.navbar.bootsnav .navbar-toggle{
  85.         background: none;
  86.         color: #fff;
  87.     }
  88.     nav.navbar.bootsnav ul.nav > li{
  89.         margin-right: 0;
  90.     }
  91.     nav.navbar.bootsnav ul.nav > li:before{
  92.         width: 0;
  93.         height: 2px;
  94.         background: #dca342;
  95.         margin: 0;
  96.         bottom: 50%;
  97.         left: 0;
  98.     }
  99.     nav.navbar.bootsnav ul.nav > li:hover:before{
  100.         width: 25px;
  101.         height: 2px;
  102.     }
  103.     nav.navbar.bootsnav ul.nav > li.megamenu-fw:before{
  104.         left: 0;
  105.         bottom: 52%;
  106.     }
  107.     nav.navbar.bootsnav ul.nav > li:after,
  108.     nav.navbar.bootsnav ul.nav > li.megamenu-fw:after{
  109.         background: #dca342;
  110.         margin: 0;
  111.         bottom: 50%;
  112.         left: auto;
  113.         right: 0;
  114.     }
  115.     nav.navbar.bootsnav ul.nav > li:hover:after{
  116.         bottom: 42%;
  117.         right: 90%;
  118.     }
  119.     nav.navbar.bootsnav ul.nav > li:hover.megamenu-fw:after{
  120.         bottom: 51.3%;
  121.     }
  122.     nav.navbar.bootsnav.navbar-mobile ul.nav > li > a{
  123.         padding: 15px;
  124.         text-align: center;
  125.     }
  126.     nav.navbar.bootsnav ul.nav > li > a,
  127.     nav.navbar.bootsnav ul.nav > li > a:hover{
  128.         color: #333;
  129.     }
  130.     nav.navbar.bootsnav ul.nav > li.dropdown > ul{ top: 100%; }
  131.     nav.navbar.bootsnav ul.nav > li.dropdown.on:before,
  132.     nav.navbar.bootsnav ul.nav > li.dropdown.on:after{
  133.         display: none;
  134.     }
  135.     nav.navbar.bootsnav li.dropdown ul.dropdown-menu.megamenu-content .title{
  136.         font-size: 14px;
  137.         font-weight: normal;
  138.     }
  139. }

简洁 JS 和 CSS3 多级导航菜单

已有 547 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!