Html 将子对象显示在其屏幕外父对象之外，直到父对象显示得足够宽

假设我有一个水平滑动菜单，可以在与浏览器窗口左侧对齐和隐藏之间切换：

Open (has class "open")     Closed (class "open" removed)
+------+--------------+     +---------------------+
|      |              |     |                     |
|      |              |     |                     |
|      |              |     |                     |
|      |              |     |                     |
|      |              |     |                     |
+------+--------------+     +---------------------+

SCSS：

现在让我们假设我想要一个切换按钮，它可以是：1）在菜单关闭时位于窗口的左侧，2）在菜单内部，打开时与右侧对齐：

Open                        Closed
+--+---+--------------+     +---+-----------------+
|  | x |              |     | = |                 |
|  +---+              |     +---+                 |
|      |              |     |                     |
|      |              |     |                     |
|      |              |     |                     |
+------+--------------+     +---------------------+

---

此外，它还应尊重菜单的过渡，以便在菜单的可见宽度与按钮的宽度匹配的位置将其自身与右侧对齐。有没有一种方法可以单独使用CSS来实现这一点？

通过稍微调整CSS，我想出了一个解决方案：

//一些JS来演示动画
$（'.nav toggle'）。单击（函数（）{
$（'.nav'）.toggleClass（'open'）；
});
.window{
背景：浅灰色；
显示：块；
高度：200px；
利润率：0.10px；
溢出x：隐藏；
位置：相对位置；
宽度：400px；
}
.导航{
背景：蓝色；
底部：0；
位置：绝对位置；
排名：0；
宽度：0；
-webkit过渡：宽度250ms立方贝塞尔（0.645,0.045,0.355,1.000）；
-moz过渡：宽度250ms立方贝塞尔（0.645,0.045,0.355,1.000）；
-ms过渡：宽度250ms立方贝塞尔（0.645,0.045,0.355,1.000）；
-o型过渡：宽度250ms立方贝塞尔（0.645,0.045,0.355,1.000）；
过渡：宽度250ms立方贝塞尔（0.645,0.045,0.355,1.000）；
}
.导航打开{
宽度：80px；
}
.导航开关包装器{
高度：40px；
浮动：左；
最小宽度：40px；
宽度：100%；
}
.导航开关{
背景：红色；
高度：40px；
浮动：对；
宽度：40px；
}
能否为图标创建一个转换（延迟+计时以匹配菜单的转换计时），并在其父级（菜单）打开类时应用它？@zgood I can，但是菜单上的过渡有缓和，这意味着做一些可怕的数学，试图弄清楚按钮上相应的缓和应该是怎样的。。。如果它们同时启动就可以了，但是会有一个延迟，直到菜单和按钮一样宽，这时按钮就会移动。
Open                        Closed
+--+---+--------------+     +---+-----------------+
|  | x |              |     | = |                 |
|  +---+              |     +---+                 |
|      |              |     |                     |
|      |              |     |                     |
|      |              |     |                     |
+------+--------------+     +---------------------+