bootstrap自适应多级子菜单弹出导航效果代码-html代码-BFW代码库

代码语言：html
代码描述：bootstrap自适应多级子菜单弹出导航效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">

    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Ubuntu:400,700'>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.5.15.3.css">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">

    <style>
        body {
          font-family: "Ubuntu", sans-serif;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
          overflow-x: hidden;
          color: #4e4e4e;
          -webkit-transition: all 0.3s ease-in-out;
          -moz-transition: all 0.3s ease-in-out;
          -ms-transition: all 0.3s ease-in-out;
          -o-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
          position: relative;
          left: 0;
        }
        body > .over-menu {
          -webkit-transition: all 0.3s ease-in-out;
          -moz-transition: all 0.3s ease-in-out;
          -ms-transition: all 0.3s ease-in-out;
          -o-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
          position: fixed;
          height: 100%;
          content: "";
          width: 100%;
          left: 0;
          top: 0;
          visibility: hidden;
          opacity: 0;
          background: rgba(0, 0, 0, 0.6);
          z-index: 9;
        }
        body.open-menu {
          left: -250px;
        }
        body.open-menu > .over-menu {
          visibility: visible;
          opacity: 1;
        }
        body.open-menu .menu-container {
          right: 0 !important;
        }
        
        a {
          text-decoration: none !important;
          outline: none;
        }
        
        .hidden {
          display: none;
        }
        
        section {
          position: relative;
          width: 100%;
          float: left;
        }
        
        header {
          -webkit-transition: all 0.3s ease;
          -moz-transition: all 0.3s ease;
          -ms-transition: all 0.3s ease;
          -o-transition: all 0.3s ease;
          transition: all 0.3s ease;
          background-color: transparent;
          width: 100%;
          float: left;
          position: fixed;
          z-index: 10;
          
        }
        header::before {
          -webkit-transition: all 0.3s ease;
          -moz-transition: all 0.3s ease;
          -ms-transition: all 0.3s ease;
          -o-transition: all 0.3s ease;
          transition: all 0.3s ease;
          transform-origin: 0;
          background: #FFF;
          position: absolute;
          width: 100%;
          content: "";
          top: 0;
          right: 0;
          height: 0;
        }
        header .desk-menu {
          position: relative;
          width: 100%;
          float: left;
        }
        header .desk-menu .logo {
          position: absolute;
          float: left;
        }
        header .desk-menu .logo-adn {
          -webkit-transition: all 0.3s ease-in-out;
          -moz-transition: all 0.3s ease-in-out;
          -ms-transition: all 0.3s ease-in-out;
          -o-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
          margin: 20px 0 0;
          position: relative;
          display: table;
          z-index: 1;
        }
        header .desk-menu .logo-adn a {
          -webkit-transition: all 0.3s ease-in-out;
          -moz-transition: all 0.3s ease-in-out;
          -ms-transition: all 0.3s ease-in-out;
          -o-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
          background-image: url("//repo.bfw.wiki/bfwrepo/icon/5d834e33872ba.png");
          background-position: 0;
          color: rgba(0, 0, 0, 0);
          background-repeat: no-repeat;
          background-size: contain;
          display: block;
          width: 40px;
          height: 40px;
          font-size: 0;
        }
        header .desk-menu .box-menu {
          -webkit-transition: all 0.3s ease-in-out;
          -moz-transition: all 0.3s ease-in-out;
          -ms-transition: all 0.3s ease-in-out;
          -o-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
          position: relative;
          padding: 16px 0 0;
          display: block;
          margin: 0 auto;
          float: right;
          text-align: center;
        }
        header .desk-menu .menu-container {
          float: left;
        }
        header .desk-menu .menu-container .menu-head,
        header .desk-menu .menu-container .menu-foot {
          width: 100%;
          float: left;
          display: none;
        }
        header .desk-menu .menu-container .menu-head {
          background: #4285f4;
          padding: 16px 10px;
        }
        header .desk-menu .menu-container .menu-head .e1 {
          padding: 3px 0;
          float: left;
        }
        header .desk-menu .menu-container .menu-head .e1 img {
          width: 29px;
          float: left;
          height: 29px;
        }
        header .desk-menu .menu-container .menu-head .client {
          color: #FFF;
          float: right;
        }
        header .desk-menu .menu-container .menu-head .client span {
          font-family: "Ubuntu", sans-serif;
          text-transform: uppercase;
          padding: 5px 42px 5px 0;
          position: relative;
          line-height: 100%;
          font-size: 9px;
          display: block;
        }
        header .desk-menu .menu-container .menu-head .client i {
          position: absolute;
          font-size: 30px;
          right: 0;
          top: 0;
        }
        header .desk-menu .menu-container .menu-foot {
          position: absolute;
          bottom: 0;
          padding: 15px 0;
        }
        header .desk-menu .menu-container .menu-foot .social {
          display: table;
          margin: 0 auto;
        }
        header .desk-menu .menu-container .menu-foot .social a {
          -webkit-transition: all 0.3s ease-in-out;
          -moz-transition: all 0.3s ease-in-out;
          -ms-transition: all 0.3s ease-in-out;
          -o-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
          display: inline-block;
          position: relative;
          margin: 0 5px 0 0;
          color: #FFF;
          font-size: 13px;
          text-align: center;
          padding: 5px 0;
          border-radius: 50%;
          background: #797c82;
          width: 29px;
          height: 29px;
        }
        header .desk-menu .menu-container .menu-foot .social a:last-child {
          margin: 0;
        }
        header .desk-menu .menu-container .menu-foot .social a:hover {
          background: #a4a7ac;
        }
        header .desk-menu .menu-container .menu-foot hr {
          margin: 15px auto 20px;
          display: table;
          width: calc(100% - 20px);
        }
        header .desk-menu .menu-container .menu-foot address {
          position: relative;
          text-align: left;
          padding: 0 15px;
          margin: 0;
        }
        header .desk-menu .menu-container .menu-foot address i {
          position: absolute;
          left: 0;
          top: 0;
        }
        header .desk-menu .menu-container .menu-foot address span {
          padding: 0 0 0 20px;
          position: relative;
          margin-bottom: 5px;
          font-size: 12px;
          display: block;
        }
        header .desk-menu .menu-container .menu {
          float: left;
          padding: 0;
          margin: 0 20px 0 0;
          list-style: none;
          position: relative;
          -webkit-transition: all 0.3s ease-in-out;
          -moz-transition: all 0.3s ease-in-out;
          -ms-transition: all 0.3s ease-in-out;
          -o-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
        }
        header .desk-menu .menu-container .menu li.back {
          display: none;
        }
        header .desk-menu .menu-container .menu > li {
          -webkit-transition: all 0.33s ease;
          -moz-transition: all 0.33s ease;
          -ms-transition: all 0.33s ease;
          -o-transition: all 0.33s ease;
          transition: all 0.33s ease;
          margin: 0 0 0 10px;
          float: left;
          cursor: pointer;
          position: relative;
          overflow: inherit;
        }
        header .desk-menu .menu-container .menu > li a {
          position: relative;
          text-transform: uppercase;
          font-family: "Ubuntu", sans-serif;
          font-size: 13.9px;
          padding: 19px 8px;
          display: block;
          color: #4e4e4e;
        }
        header .desk-menu .menu-container .menu > li.menu-item-has-children > a {
          padding: 19px 20px 19px 8px;
          position: relative;
        }
        header .desk-menu .menu-container .menu > li.menu-item-has-children > a::before, header .desk-menu .menu-container .menu > li.menu-item-has-children > a::after {
          -webkit-transition: all 0.3s ease-in-out;
          -moz-transition: all 0.3s ease-in-out;
          -ms-transition: all 0.3s ease-in-out;
          -o-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
          background-color: #4e4e4e;
          position: absolute;
          content: "";
          height: 1px;
          width: 7px;
          top: 26px;
        }
        header .desk-menu .menu-container .menu > li.menu-item-has-children > a::before {
          -webkit-transform: rotate(45deg);
          -moz-transform: rotate(45deg);
          -ms-transform: rotate(45deg);
          -o-transform: rotate(45deg);
          transform: rotate(45deg);
          right: 10px;
        }
        header .desk-menu .menu-container .menu > li.menu-item-has-children > a::after {
          -webkit-transform: rotate(-45deg);
          -moz-transform: rotate(-45deg);
          -ms-transform: rotate(-45deg);
          -o-transform: rotate(-45deg);
          transform: rotate(-45deg);
          right: 6px;
        }
        header .desk-menu .menu-container .menu > li.menu-item-has-children .sub-menu {
          box-shadow: 1px 2px 4px rgba(46, 61, 73, 0.2);
          -webkit-transition: all 0.1s ease-in-out;
          -moz-transition: all 0.1s ease-in-out;
          -ms-transition: all 0.1s ease-in-out;
          -o-transition: all 0.1s ease-in-out;
          transition: all 0.1s ease-in-out;
          -webkit-overflow-scrolling: touch;
          min-width: 200px;
          position: absolute;
          list-style: none;
          background: #FFF;
          padding: 0;
          float: left;
          display: table;
          left: 0;
          width: 100%;
          float: left;
          display: none;
        }
        header .desk-menu .menu-container .menu > li.menu-item-has-children .sub-menu li {
          width: 100%;
          -webkit-transition: all 0.33s ease;
          -moz-transition: all 0.33s ease;
          -ms-transition: all 0.33s ease;
          -o-transition: all 0.33s ease;
          transition: all 0.33s ease;
        }
        header .desk-menu .menu-container .menu > li.menu-item-has-children .sub-menu li > a {
          color: #4e4e4e;
          padding: 12px;
        }
        header .desk-menu .menu-container .menu > li.menu-item-has-children .sub-menu li .sub-menu {
          display: none;
        }
        header .desk-menu .menu-container .menu > li.menu-item-has-children .sub-menu li.menu-item-has-children > a::before, header .desk-menu .menu-container .menu > li.menu-item-has-children .sub-menu li.menu-item-has-children > a::after {
          -webkit-transition: all 0.3s ease-in-out;
          -moz-transition: all 0.3s ease-in-out;
          -ms-transition: all 0.3s ease-in-out;
          -o-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
          background-color: #4e4e4e;
          position: absolute;
          content: "";
          height: 1px;
          width: 7px;
          top: 24px;
        }
        header .desk-menu .menu-container .menu > li.menu-item-has-children .sub-menu li.menu-item-has-children > a::before {
          transform: rotate(45deg);
          right: 6px;
          top: 19px;
        }
        header .desk-menu .menu-container .menu > li.menu-item-has-children .sub-menu li.menu-item-has-children > a::after {
          transform: rotate(-45deg);
          right: 6px;
          top: 23px;
        }
        header .desk-menu .menu-container .menu > li.menu-item-has-children .sub-menu li.menu-item-has-children:hover > a {
          display: block;
        }
        header .desk-menu .menu-container .menu > li.menu-item-has-children .sub-menu li.menu-item-has-children:hover .sub-menu {
          display: block;
        }
        header .desk-menu .menu-container .menu > li.menu-item-has-children .sub-menu li:hover > a {
          color: #4285f4;
          background-color: #eeeff1;
        }
        header .desk-menu .menu-container .menu > li.menu-item-has-children .sub-menu li:hover > a::before {
          -webkit-transform: rotate(142deg);
          -moz-transform: rotate(142deg);
          -ms-transform: rotate(142deg);
          -o-transform: rotate(142deg);
          transform: rotate(142deg);
          top: 23px;
        }
        header .desk-menu .menu-container .menu > li.menu-item-has-children .sub-menu li:hover > a::after {
          -webkit-transform: rotate(42deg);
          -moz-transform: rotate(42deg);
          -ms-transform: rotate(42deg);
          -o-transform: rotate(42deg);
          transform: rotate(42deg);
          right: 11px;
        }
        header .desk-menu .menu-container .menu > li.menu-item-has-children .sub-menu .sub-menu {
          left: 100%;
          margin-top: -43px;
        }
        header .desk-menu .menu-container .menu > li.menu-item-has-children a {
          text-align: left;
        }
        header .desk-menu .menu-container .menu > li.menu-item-has-children a:hover {
          margin-top: 0;
        }
        header .desk-menu .menu-container .menu > li.line {
          -webkit-transition: all 0.3s;
          -moz-transition: all 0.3s;
          -ms-transition: all 0.3s;
          -o-transition: all 0.3s;
          transition: all 0.3s;
          position: absolute;
          bottom: 11px;
          left: 0;
          height: 0px;
          pointer-events: none;
          border: 1px solid #4285f4;
          background: #4285f4;
          -webkit-transition-timing-function: cubic-bezier(1, 0.01, 0, 1);
          -webkit-transition-timing-function: cubic-bezier(1, 0.01, 0, 1.22);
          transition-timing-function: cubic-bezier(1, 0.01, 0, 1.22);
          opacity: 0;
          display: block;
        }
        header .desk-menu .menu-container .menu > li:hover > a {
          color: #4285f4;
        }
        header .desk-menu .menu-container .menu > li:hover > a::before {
          -webkit-transform: translateX(5px) rotate(-45deg);
          -moz-transform: translateX(5px) rotate(-45deg);
          -ms-transform: translateX(5px) rotate(-45deg);
          -o-transform: translateX(5px) rotate(-45deg);
          transform: translateX(5px) rotate(-45deg);
          width: 10px;
          right: 12px;
        }
        header .desk-menu .menu-container .menu > li:hover > a::after {
          -webkit-transform: rotate(45deg);
          -moz-transform: rotate(45deg);
          -ms-transform: rotate(45deg);
          -o-transform: rotate(45deg);
          transform: rotate(45deg);
          width: 10px;
          right: 7px;
        }
        header .desk-menu .menu-container .menu > li:hover.menu-item-has-children .sub-menu {
          display: block;
        }
        header .hamburger-menu {
          display: none;
        }
        header.small::before {
          box-shadow: 0px 5px 25px 0 rgba(46, 61, 73, 0.2);
          height: 100%;
        }
        header.small .desk-menu .menu-container .menu > li.menu-item-has-children > a::before, header.small .desk-menu .menu-container .menu > li.menu-item-has-children > a::after {
          background-color: #4e4e4e;
        }
        header.small .desk-menu .logo-adn {
          margin-top: 14px;
        }
        header.small .desk-menu .logo-adn a {
          background-image: url("../img/empresa-1-logo.svg");
          height: 30px;
          width: 140px;
        }
        header.small .desk-menu .box-menu {
          padding: 0;
        }
        header.small .desk-menu .box-menu ul li a {
          color: #4e4e4e;
        }
        @media (max-width: 991px) {
          header {
            height: 60px;
          }
          header .hamburger-menu {
            -webkit-transition: all 0.3s ease;
            -moz-transition: all 0.3s ease;
            -ms-transition: all 0.3s ease;
            -o-transition: all 0.3s ease;
            transition: all 0.3s ease;
            display: block;
            position: absolute;
            top: 45px;
            bottom: 0;
            margin: auto;
            width: 40px;
            height: 40px;
            cursor: pointer;
            right: 0;
            z-index: 11;
          }
          header .hamburger-menu span {
            text-transform: uppercase;
            left: calc(-100% + -5px);
            padding: 8px 9px 8px 0;
            top: calc(50% - 18px);
            position: absolute;
            font-size: 13px;
            color: #FFF;
          }
          header .hamburger-menu .bar,
        header .hamburger-menu .bar::after,
        header .hamburger-menu .bar::before {
            width: 35px;
            height: 3px;
          }
          header .hamburger-menu .bar {
            position: relative;
            -webkit-transform: translateY(25px);
            -moz-transform: translateY(25px);
            -ms-transform: translateY(25px);
            -o-transform: translateY(25px);
            transform: translateY(25px);
            -webkit-transition: all 0.1s ease;
            -moz-transition: all 0.1s ease;
            -ms-transition: all 0.1s ease;
            -o-transition: all 0.1s ease;
            transition: all 0.1s ease;
            background: #4e4e4e;
            top: -7px;
          }
          header .hamburger-menu .bar::before, header .hamburger-menu .bar::after {
            position: absolute;
            background: #4e4e4e;
            content: "";
            left: 0;
            border-radius: 5px;
          }
          header .hamburger-menu .bar::before {
            bottom: 10px;
            -webkit-transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
            -moz-transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
            -ms-transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
            -o-transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
            transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
          }
          header .hamburger-menu .bar::after {
            top: 10px;
            -webkit-transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
            -moz-transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
            -ms-transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
            -o-transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
            transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
          }
          header .hamburger-menu .bar.animate {
            background: rgba(255, 255, 255, 0);
          }
          header .hamburger-menu .bar.animate::after {
            top: 0;
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            transform: rotate(45deg);
            -webkit-transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
            -moz-transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
            -ms-transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
            -o-transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
            transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
          }
          header .hamburger-menu .bar.animate::before {
            bottom: 0;
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
            -webkit-transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
            -moz-transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
            -ms-transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
            -o-transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
            transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
          }
          header .desk-menu .box-menu ul li a {
            color: #FFF !important;
            border-bottom: 1px solid #eaeaea;
          }
          header .desk-menu .menu-container {
            -webkit-transition: all 0.3s ease-in-out;
            -moz-transition: all 0.3s ease-in-out;
            -ms-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
            background: #FFF;
            position: fixed;
            height: 100%;
            width: 250px;
            right: -250px;
            top: 0;
          }
          header .desk-menu .menu-container .menu-header-container {
            position: relative;
            float: left;
          }
          header .desk-menu .menu-container .menu-header-container ul {
            padding: 10px !important;
          }
          header .desk-menu .menu-container .menu {
            margin: 0;
          }
          header .desk-menu .menu-container .menu li.back {
            position: relative;
            display: block;
          }
          header .desk-menu .menu-container .menu li.back a {
            padding: 12px 12px 12px 35px !important;
          }
          header .desk-menu .menu-container .menu li.back a::before, header .desk-menu .menu-container .menu li.back a::after {
            background-color: #4e4e4e;
            position: absolute;
            content: "";
            height: 2px;
            width: 7px;
            top: 23px;
          }
          header .desk-menu .menu-container .menu li.back a::before {
            -webkit-transform: rotate(-45deg) !impo.........完整代码请登录后点击上方下载按钮下载查看