菜单从右侧滑入并固定在页面右侧

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');

    });

});

<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&nbsp;.header-content{left:initial;&nbsp;right:&nbsp;-100%;} header.open&nbsp;.header-content{left:initial;&nbsp;right:&nbsp;0;}