亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

菜單從右側滑入并固定在頁面右側

菜單從右側滑入并固定在頁面右側

嚕嚕噠 2022-12-29 14:10:14
我有下面的菜單,當前從左側滑入并從左側覆蓋屏幕的 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>
查看完整描述

1 回答

?
Cats萌萌

TA貢獻1805條經驗 獲得超9個贊

這很容易實現。

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


查看完整回答
反對 回復 2022-12-29
  • 1 回答
  • 0 關注
  • 120 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號