css布局实现响应式全屏右侧弹出菜单效果代码-html代码-BFW代码库

代码语言：html

代码描述：css布局实现响应式全屏右侧弹出菜单效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        @import url("https://fonts.googleapis.com/css?family=Barlow:200,300,400,500,600,700,800,900&display=swap");
    
    /*
    $bg-01: #364e68;
    $bg-02: #446d8c;
    $bg-03: #5788a0;
    $bg-04: #73a5b5;
    */
    body {
      margin: 0;
      font-family: "Barlow", sans-serif;
      background-color: #f1f3f7;
    }
    
    ul {
      margin: 0;
      padding: 0;
    }
    ul li {
      list-style: none;
    }
    
    a {
      text-decoration: none;
      color: white;
    }
    
    /* Navigation */
    nav {
      /* Nav Bar */
      /* Main Nav */
    }
    nav .menubar {
      width: 100%;
      height: 80px;
      position: absolute;
      top: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 40px;
      box-sizing: border-box;
      background-color: white;
      box-shadow: 0px 0px 20px -10px rgba(0, 0, 0, 0.3);
      /* Logo */
      /* Icons */
    }
    @media screen and (max-width: 767px) {
      nav .menubar {
        height: 60px;
        padding: 0 20px;
      }
    }
    nav .menubar .home {
      font-size: 20px;
      font-weight: 600;
      color: #c05c7e;
      transition: all 0.4s ease;
    }
    nav .menubar .home:hover {
      opacity: 0.5;
    }
    nav .menubar .icons {
      display: flex;
      /* Icon Menu Hamburguer */
      /* Secondary Icons */
    }
    nav .menubar .icons .icon-menu {
      display: flex;
      width: 30px;
      height: 30px;
      z-index: 2;
      position: relative;
      display: flex;
      align-items: center;
      cursor: pointer;
      padding: 5px;
      /* Icon Close */
    }
    nav .menubar .icons .icon-menu span {
      background-color: #c05c7e;
      width: 30px;
      height: 3px;
      position: absolute;
      display: flex;
      justify-content: flex-end;
      transition: all 0.2s ease;
      right: 0;
      border-radius: 5px;
    }
    nav .menubar .icons .icon-menu span:before, nav .menubar .icons .icon-menu span:after {
      position: absolute;
      content: "";
      width: 100%;
      height: 100%;
      background-color: #c05c7e;
      border-radius: 5px;
    }
    nav .menubar .icons .icon-menu span:before {
      transform: translateY(-10px);
      transition: all 0.3s 0.1s ease;
    }
    nav .menubar .icons .icon-menu span:after {
      transform: translateY(10px);
      transition: all 0.3s 0.2s ease;
    }
    nav .menubar .icons .icon-menu:hover span {
      width: 30px;
    }
    nav .menubar .icons .icon-menu:hover span:before {
      width: 25px;
    }
    nav .menubar .icons .icon-menu:hover span:after {
      width: 20px;
    }
    nav .menubar .icons .icon-menu.icon-closed {
      justify-content: center;
    }
    nav .menubar .icons .icon-menu.icon-closed span {
      background-color: white;
      justify-content: center;
      width: 0px;
      right: initial;
      opacity: 0.5;
      transition: all 0.6s ease;
    }
    nav .menubar .icons .icon-menu.icon-closed span:before, nav .menubar .icons .icon-menu.icon-closed span:after {
      width: 30px;
      background-color: white;
    }
    nav .menubar .icons .icon-menu.icon-closed span:before {
      transform: rotate(45deg);
    }
    nav .menubar .icons .icon-menu.icon-closed span:after {
      transform: rotate(-45deg);
    }
    nav .menubar .icons .icon-menu.icon-closed:hover span {
      width: 0;
      opacity: 1;
    }
    @media screen and (max-width: 767px) {
      nav .menubar .icons .icon-menu.icon-closed:hover span:before {
        transform: rotate(45deg);
      }
      nav .menubar .icons .icon-menu.icon-closed:hover span:after {
        transform: rotate(-45deg);
      }
    }
    nav .menubar .icons .secondary-icons {
      display: flex;
      flex-wrap: wrap;
    }
    nav .menubar .icons .secondary-icons .icon-second {
      width: 30px;
      height: 30px;
      margin: 0 10px;
      font-size: 24px;
      cursor: pointer;
      transition: all 0.3s ease;
      padding: 5px;
    }
    @media screen and (max-width: 767px) {
      nav .menubar .icons .secondary-icons .icon-second {
        margin: 0 5px;
      }
    }
    nav .menubar .icons .secondary-icons .icon-second:last-child {
      margin-right: 30px;
    }
    @media screen and (max-width: 767px) {
      nav .menubar .icons .secondary-icons .icon-second:last-child {
        margin-right: 15px;
      }
    }
    nav .menubar .icons .secondary-icons .icon-second:hover {
      transform: translateY(-5px);
      opacity: 0.5;
    }
    @media screen and (max-width: 767px) {
      nav .menubar .icons .secondary-icons .icon-second:hover {
        transform: translateY(0px);
        opacity: 1;
      }
    }
    nav .menu {
      display: none;
      /* Open Menu */
      /* Animation - Close */
    }
    nav .menu.open {
      display: flex;
      z-index: 3;
      overflow: hidden;
      /* Menu Open - Main Link */
    }
    nav .menu.open .menu-link {
      width: 25%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      transition: all 0.4s ease-in-out;
      animation: menu 0.6s ease forwards;
      height: 100vh;
      position: relative;
      /* Main Link - text */
      /* Sub Menu */
      /* Menu Links - Hover */
    }
    @keyframes menu {
      0% {
        height: 0;
        transform: translatey(-50%);
      }
      100% {
        height: 100vh;
        transform: translatey(0%);
      }
    }
    nav .menu.open .menu-link:nth-child(1) {
      background-color: #2d3561;
      animation-duration: 0.6s;
    }
    nav .menu.open .menu-link:nth-child(2) {
      background-color: #c05c7e;
      animation-duration: 0.8s;
    }
    nav .menu.open .menu-link:nth-child(3) {
      background-color: #f3826f;
      animation-duration: 1s;
    }
    nav .menu.open .menu-link:nth-child(4) {
      background-color: #ffb961;
      animation-duration: 1.2s;
    }
    nav .menu.open .menu-link .text-item {
      color: white;
      text-transform: uppercase;
      font-weight: 800;
      font-size: 40px;
      opacity: 0.3;
      width: 100%;
      height: 20%;
      letter-spacing: 5px;
      transform: rotate(-90deg) translateX(0px);
      transition: all 0.4s 0.2s ease-in-out, letter-spacing 0.2s ease-in, opacity 0.2s ease-in;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      transform-origin: center;
      animation: text-in 0.6s ease;
      position: absolute;
    }
    @media screen and (max-width: 767px) {
      nav .menu.open .menu-link .text-item {
        transform: rotate(0deg);
        font-size: 30px;
      }
    }
    @keyframes text-in {
      0% {
        opacity: 0;
      }
      20% {
        opacity: 0;
      }
      100% {
        opacity: 0.3;
      }
    }
    nav .menu.open .menu-link .text-item .icon {
      position: absolute;
      display: flex;
      width: 30px;
      height: 30px;
      opacity: 0;
      transform: translateY(0px);
      transition: all 0.4s ease-in-out;
      background-image: url("https://rafaelalucas91.github.io/assets/icons/white/icon-54.svg");
    }
    @media screen and (max-width: 767px) {
      nav .menu.open .menu-link .text-item .icon {
        opacity: 0.5;
        transform: translateY(40px);
      }
    }
    nav .menu.open .menu-link .submenu {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 0 40px;
      box-sizing: border-box;
      opacity: 0;
      z-index: -1;
      transition: all 0.6s ease-in-out;
      height: 0%;
      width: 100%;
      background-color: rgba(255, 255, 255, 0.1);
      bottom: 0;
      transform: translateY(50%);
      position: absolute;
    }
    @media screen and (max-width: 767px) {
      nav .menu.open .menu-link .submenu {
        padding: 0 5%;
      }
    }
    nav .menu.open .menu-link .submenu .sub-item {
      display: none;
      margin: 10px 0;
      color: white;
      text-transform: uppercase;
      letter-spacing: 2px;
      font-size: 20px;
      font-weight: 600;
      position: relative;
      width: fit-content;
      cursor: pointer;
      padding: 5px 15px;
    }
    @media screen an.........完整代码请登录后点击上方下载按钮下载查看