Javascript 从右侧滑入菜单并粘贴到页面右侧

我有下面的菜单，当前从左侧滑入，从左侧覆盖30%的屏幕。如何使此幻灯片从右侧滑入并粘贴到屏幕右侧？我曾尝试将CSS行“left:-150%”更改为“right:-150px”，但这只会导致菜单在打开时淡入原处

此外，我期待着禁用页面滚动时，菜单是打开的…谢谢

jQuery（文档）.ready（函数（$）{
$（'.btn打开菜单'）。单击（函数（）{
$（'header'）.addClass（'open'）；
});
$（'.link菜单'）。单击（函数（）{
$（'header'）.removeClass（'open'）；
});
$（'.btn关闭菜单'）。单击（函数（）{
$（'header'）.removeClass（'open'）；
});
});
html，正文{
宽度：100%；
身高：100%；
}
标题{
宽度：100%；
身高：100%；
背景色：透明；
位置：固定；
排名：0；
左：0；
z指数：10；
过渡：0.5s缓进缓出；
}
header.btn打开菜单{
宽度：25px；
高度：25px；
位置：绝对位置；
顶部：50px；
右：50px；
光标：指针；
}
@仅介质屏幕和（最大宽度：768px）{
header.btn打开菜单{
顶部：25px；
右：20px；
}
}
标题。标题内容{
宽度：30%；
身高：100%；
背景色：#F7FCB7；
框大小：边框框；
位置：绝对位置；
排名：0；
左-150%；
显示器：flex；
柔性包装：包装；
对齐项目：居中；
证明内容：中心；
弯曲方向：立柱；
对齐内容：居中对齐；
过渡：0.8s缓进缓出；
}
标题.标题内容.btn关闭菜单{
宽度：25px；
高度：25px；
位置：绝对位置；
顶部：20px；
右：20px；
光标：指针；
显示器：flex；
柔性包装：包装；
对齐项目：居中；
证明内容：中心；
弯曲方向：行；
对齐内容：居中对齐；
}
标题.标题内容.btn关闭菜单：之前，标题.标题内容.btn关闭菜单：之后{
背景：#000；
内容：''；
显示：块；
宽度：100%；
高度：4px；
位置：绝对位置；
过渡：0.5s缓进缓出；
}
标题.标题内容.btn关闭菜单：之前{
变换：旋转（45度）；
}
标题.标题内容.btn关闭菜单：悬停{
变换：旋转（180度）；
过渡：0.5s缓进缓出；
}
标题.标题内容.btn关闭菜单：之后{
变换：旋转（-45度）；
}
标题。标题内容导航{
显示器：flex；
柔性包装：包装；
对齐项目：居中；
证明内容：中心；
弯曲方向：立柱；
对齐内容：居中对齐；
}
标题。标题内容导航a{
颜色：#000；
字母间距：0.5px；
线高：35px；
文字装饰：无；
过渡：0.5s；
}
标题。标题内容导航a：悬停{
颜色：rgba（0,0,0,0.5）；
过渡：0.5s；
}
标题。标题内容。社交{
显示器：flex；
证明内容：中心；
对齐项目：居中；
利润率：40px0；
字号：18px；
}
标题。标题内容。社交网站{
颜色：#000；
文字装饰：无；
利润率：0.10px；
过渡：0.5s；
}
标题.标题内容.社交a:悬停{
颜色：#FB4D98；
转换：比例（1.5）；
过渡：0.5s；
}
header.open{
高度：100vh；
背景色：rgba（0,0,0,0.8）；
过渡：0.3s缓进缓出；
}
header.open.btn打开菜单，header.open.logo{
不透明度：0；
过渡：0.5s缓进缓出；
}
header.open.标题内容{
左：0；
过渡：0.7秒缓进缓出；
}
@仅介质屏幕和（最小宽度：769px）{
.btn打开菜单：悬停{
动画：握手0.5s；
}
}
.菜单列表{
字体家族：“联盟”；
字体大小：4vw；
线高：1.2；
文本转换：大写；
文本对齐：居中；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
}
@仅介质屏幕和（最大宽度：768px）{
.菜单列表{
字体家族：“联盟”；
字体大小：5vw；
}
}
.菜单项{
位置：相对位置；
颜色：透明；
光标：指针；
}
菜单列表{
填充内联开始：0px！重要；
}
.菜单列表项：：之前{
内容：''；
显示：块；
位置：绝对位置；
最高：49%；
左-10%；
右图：-10%；
高度：4px；
边界半径：4px；
页边顶部：-2px；
背景#FB4D98；
变换：比例（0）；
z指数：1；
}
.面具{
显示：块；
位置：绝对位置；
溢出：隐藏；
颜色：#FB4D98；
排名：0；
身高：49%；
过渡：所有0.8s三次贝塞尔（0.16,1.08,0.38,0.98）；
}
.遮罩跨度{
显示：块；
}
.面具+.面具{
最高：48.9%；
身高：51.1%；
}
.Mask+.Mask范围{
转化：translateY（-49%）；
}
.菜单列表项：悬停.Mask..菜单列表项：活动.Mask{
颜色：#000；
变换：倾斜（12度）平移（5px）；
}
.菜单列表项：悬停.Mask+.Mask，.菜单列表项：活动.Mask+.Mask{
变换：skewX（12度）translateX（-5px）；
}
.菜单列表项：悬停：：之前，.菜单列表项：活动：：之前{
变换：比例（1）；
}

这很容易实现

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

这是很容易做到的

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

太棒了，谢谢，你知道当菜单打开时如何禁用页面上的滚动吗？要做到这一点，当你在打开菜单时在标题中添加类。还可以在html（根元素）上添加一个类。您可以将其命名为类，如“menu_uopened”，然后编写css，如.menu_uopened.menu_uopened>body{overflow:hidden；}，并在关闭菜单时删除此类。谢谢，我添加了
$（'html'）。addClass（'open'）
到JS，然后将其添加到CSS
html.open{overflow:hidden；}
根据需要，当html作为open类时，您也可以禁用body的滚动。因为body具有溢出sc的属性