Question

我下面有一个菜单，该菜单当前从左侧滑入，并从左侧覆盖屏幕的30％。如何使此幻灯片从右侧插入并保持在屏幕右侧？我尝试将CSS行“ left：-150％”更改为“ right：-150px”，但这只是导致菜单在打开时淡出了位置。

我也希望在打开菜单时禁止页面滚动...谢谢！

jQuery(document).ready(function($){
    $('.btn-open-menu').click(function () {
        $('header').addClass('open');
    });

    $('.link-menu').click(function () {
        $('header').removeClass('open');
    });

    $('.btn-close-menu').click(function () {
        $('header').removeClass('open');
    });
});

 html, body {
     width: 100%;
     height: 100%;

}
 header {
     width: 100%;
     height: 100%;
     background-color: transparent;
     position: fixed;
     top: 0;
     left: 0;
     z-index: 10;
     transition: 0.5s ease-in-out;
}


 header .btn-open-menu {
     width: 25px;
     height: 25px;
     position: absolute;
     top: 50px;
     right: 50px;
     cursor: pointer;
}

@media only screen and (max-width: 768px) {
    header .btn-open-menu {
     top: 25px;
     right: 20px;
}
}

 header .header-content {
     width: 30%;
     height: 100%;
     background-color: #F7FCB7;
     box-sizing: border-box;
     position: absolute;
     top: 0;
     left: -150%;
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     align-content: center;
     transition: 0.8s ease-in-out;
}
 header .header-content .btn-close-menu {
     width: 25px;
     height: 25px;
     position: absolute;
     top: 20px;
     right: 20px;
     cursor: pointer;
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: center;
     flex-direction: row;
     align-content: center;
}
 header .header-content .btn-close-menu:before, header .header-content .btn-close-menu:after {
     background: #000;
     content: '';
     display: block;
     width: 100%;
     height: 4px;
     position: absolute;
     transition: 0.5s ease-in-out;
}
 header .header-content .btn-close-menu:before {
     transform: rotate(45deg);
}

 header .header-content .btn-close-menu:hover{
     transform: rotate(180deg);
     transition:0.5s ease-in-out;
}

 header .header-content .btn-close-menu:after {
     transform: rotate(-45deg);
}

 header .header-content nav {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     align-content: center;
}
 header .header-content nav a {
     color: #000;
     letter-spacing: 0.5px;
     line-height: 35px;
     text-decoration: none;
     transition: 0.5s;
}
 header .header-content nav a:hover {
     color: rgba(0, 0, 0, 0.5);
     transition: 0.5s;
}
 header .header-content .social {
     display: flex;
     justify-content: center;
     align-items: center;
     margin: 40px 0 0 0;
     font-size: 18px;
}
 header .header-content .social a {
     color: #000;
     text-decoration: none;
     margin: 0 10px;
     transition: 0.5s;
}
 header .header-content .social a:hover {
     color: #FB4D98;
     transform: scale(1.5);
     transition: 0.5s;
}
 header.open {
     height: 100vh;
     background-color: rgba(0, 0, 0, 0.8);
     transition: 0.3s ease-in-out;
}
 header.open .btn-open-menu, header.open .logo {
     opacity: 0;
     transition: 0.5s ease-in-out;
}
 header.open .header-content {
     left: 0;
     transition: 0.7s ease-in-out;
}

@media only screen and (min-width: 769px) {
.btn-open-menu:hover {
    animation: headShake 0.5s;
}
}



 .Menu-list {
     font-family: "alliance";
     font-size: 4vw;
     line-height: 1.2;
     text-transform: uppercase;
     text-align: center;
     display: flex;
     flex-direction: column;
     align-items: center;
}

@media only screen and (max-width: 768px) {
     .Menu-list {
     font-family: "alliance";
     font-size: 5vw;
     }
}
 .Menu-list-item {
     position: relative;
     color: transparent;
     cursor: pointer;
}

 ul.Menu-list{
     padding-inline-start: 0px !important;
     
 }
 .Menu-list-item::before {
     content: '';
     display: block;
     position: absolute;
     top: 49%;
     left: -10%;
     right: -10%;
     height: 4px;
     border-radius: 4px;
     margin-top: -2px;
     background: #FB4D98;
     transform: scale(0);

     z-index: 1;
}
 .Mask {
     display: block;
     position: absolute;
     overflow: hidden;
     color: #FB4D98;
     top: 0;
     height: 49%;
     transition: all 0.8s cubic-bezier(0.16, 1.08, 0.38, 0.98);
}
 .Mask span {
     display: block;
}
 .Mask + .Mask {
     top: 48.9%;
     height: 51.1%;
}
 .Mask + .Mask span {
     transform: translateY(-49%);
}
 .Menu-list-item:hover .Mask, .Menu-list-item:active .Mask {
     color: #000;
     transform: skewX(12deg) translateX(5px);
}
 .Menu-list-item:hover .Mask + .Mask, .Menu-list-item:active .Mask + .Mask {
     transform: skewX(12deg) translateX(-5px);
}
 .Menu-list-item:hover::before, .Menu-list-item:active::before {
     transform: scale(1);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
  <a class="btn-open-menu">
    <span class="hamburguer"><img src="/wp-content/uploads/2020/08/hamburger.png"</span>
  </a>
  
  <div class="header-content">
    <a class="btn-close-menu"></a>

    <nav>
     <div class="Menu">
  <ul class="Menu-list" data-offset="10">
    <li class="Menu-list-item" data-offset="20" onclick="location.href='/home';">
      Home
      <span class="Mask"><span>Home</span></span>
      <span class="Mask"><span>Home</span></span>
    </li>
    <li class="Menu-list-item" data-offset="16" onclick="location.href='/about';">
      About
      <span class="Mask"><span>About</span></span>
      <span class="Mask"><span>About</span></span>
    </li>
    <li class="Menu-list-item" data-offset="12" onclick="location.href='/contact';">
      Contact
      <span class="Mask"><span>Contact</span></span>
      <span class="Mask"><span>Contact</span></span>
    </li>

  </ul>
</div>
    </nav>
    
    <div class="social">
      
      
      <a href="https://www.instagram.com/jvaleskasilva/" target="_blank">
        <i class="fab fa-instagram"></i>
      </a>

      <a href="https://www.facebook.com/jvaleskasilva" target="_blank">
        <i class="fab fa-facebook-f"></i></i>
      </a>

    </div>
  </div>
</header>

Answer 1

这很容易实现。

header .header-content{left:initial; right: -100%;}
header.open .header-content{left:initial; right: 0;}

菜单从右侧滑入并停留在页面右侧

1 个答案: