Javascript 如何将幻灯片从左侧幕墙菜单转换为从右侧滑入 问题

我们需要一个从屏幕右侧向内到左侧的窗帘来设置动画

我发现了一个几乎完美的例子（除了这只来自左侧，动画来自右侧）

工作示例[从左到右] [

以下是工作代码（同样，从左到右除外）：

HTML

<!-- The overlay -->
<div id="myNav" class="overlay">

  <!-- Button to close the overlay navigation -->
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>

  <!-- Overlay content -->
  <div class="overlay-content">
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Clients</a>
    <a href="#">Contact</a>
  </div>

</div>

<!-- Use any element to open/show the overlay navigation menu -->
<span onclick="openNav()">open</span>

JAVASCRIPT

/* Open when someone clicks on the span element */
function openNav() {
  document.getElementById("myNav").style.width = "100%";
}

/* Close when someone clicks on the "x" symbol inside the overlay */
function closeNav() {
  document.getElementById("myNav").style.width = "0%";
}

理想溶液 嗯，最重要的是，我需要窗帘从屏幕的右侧

另外，如果窗帘的宽度只有屏幕的25%，那就太棒了。它更多的是一个信息面板，而不是一个菜单

我的努力

我对现代CSS世界相当陌生，但我尝试使用left属性：

left: 500;  /* I need to start from right hand side of screen */

就宽度而言，我尝试了：

 width: 25%; /* I think this will work */

我想我需要获得右手坐标，然后在那里开始动画？不确定，这比我的工资等级高，哈哈

任何帮助都将不胜感激。非常感谢您的关注

---

John

您只需在

中将
left:0
替换为
right:0
即可。另外，在
JavaScript
部分，将
宽度更改为
25%
而不是
100%
，就完成了

这是一个演示（旧注释被删除，以便新注释可以区分）：


函数openNav（）{
document.getElementById（“myNav”）.style.width=“25%”；/**从100%到25%**/
}
函数closeNav（）{
document.getElementById（“myNav”）.style.width=“0”；
}
.overlay{
身高：100%；
宽度：0；
位置：固定；
z指数：1；
右：0；
/**它是左边的：0，现在它从右边打开**/
排名：0；
背景色：rgb（0,0,0）；
背景色：rgba（0,0,0,0.9）；
溢出x：隐藏；
过渡：0.5s；
}
.覆盖内容{
位置：相对位置；
最高：25%；
宽度：100%；
文本对齐：居中；
边缘顶部：30px；
}
.覆盖{
填充：8px；
文字装饰：无；
字体大小：36px；
颜色：#818181；
显示：块；
过渡：0.3s；
}
.a:悬停，
.a：聚焦{
颜色：#f1f1；
}
.overlay.closebtn{
位置：绝对位置；
顶部：20px；
右：45px；
字体大小：60px；
}
@媒体屏幕和屏幕（最大高度：450像素）{
.覆盖{
字号：20px
}
.overlay.closebtn{
字体大小：40px；
顶部：15px；
右：35px；
}
}

打开
WOW，我简直不敢相信，#1你的回答有多快，#2解决方案看起来有多简单！！谢谢你。当然，看到你现在所做的更改对我来说非常有意义。哈哈，我已经开始尝试获取右手偏移量、父位置等了！非常感谢。你能告诉我如何嵌入代码以运行吗？我如何添加“运行代码片段”按钮到我的代码？这太方便了！@JohnS。在您编写问题/答案的编辑器中，在顶部菜单上有一个带有符号的
按钮
，如
，或在焦点位于编辑器文本区域时按
CTRL+M
。
 width: 25%; /* I think this will work */