Css 如何在不移动文本的情况下变换/转换div？

我为网站的响应菜单创建了一个覆盖菜单。一切正常，但当菜单关闭时，文本（在菜单中）将被单独收集和移动，然后消失，但我希望它们滑出而不移动文本

我尝试了以下HTML：

<section class="overlaysection">

    <div id="myoverlaynav" class="overlay">
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
        <div class="overlay-content">
            <li><a>num one one one one</a></li>
            <li><a>num two two two two</a></li>
            <li><a>num three three three three</a></li>
            <li><a>num four four four four four</a></li>
        </div>
    </div>
    <div class="overlaybtndiv" onclick="openNav()">
        <button class="overlaybtn">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <h2>The Menu</h2>
    </div>

</section>

。 javascript代码：

function openNav() {
    document.getElementById("myoverlaynav").style.width = "80%";
}
function closeNav() {
    document.getElementById("myoverlaynav").style.width = "0%";
}

---

您可以在中看到此菜单，此菜单类似于

现在，当关闭导航栏时，其宽度会减小，因此您的li标记宽度为，只需将li标记的宽度设置为固定宽度，您的问题就会像这样解决

@media (min-width: 631px){
    .li {
        width : 200px;
    }
}

---

只在媒体中查询较小的设备，否则它会在整个网站中复制。

现在，当关闭导航栏时，它的宽度会减小，因此您的li标签宽度会减小，只需将li标签的宽度固定，您的问题就会像这样解决

@media (min-width: 631px){
    .li {
        width : 200px;
    }
}

---

只对较小的设备进行媒体查询，否则它将在整个网站中复制。

这是因为您使用宽度来控制显示

与此相反，我建议您将“显示”类切换到覆盖

默认情况下，在“.overlaysection.overlay”css上，将宽度更改为100%，将左侧更改为-100%

然后在“Showed”类中将left设置为0。更改JS以切换 显示类，然后它应该从左侧滑出，而不更改文本方向

函数openNav（）{ document.getElementById（“myoverlaynav”）.classList.toggle（“显示”）； } 函数closeNav（）{ document.getElementById（“myoverlaynav”）.classList.toggle（“显示”）； }

@介质（最小宽度：631px）{
.重叠切片{
显示：无；
}
}
.overlaysection.overlay{
身高：100%；
宽度：100%；
位置：固定；
/*z指数：1*/
左-100%；
z指数：999999；
排名：0；
背景色：rgb（0,0,0）；
背景色：rgba（0,0,0,0.9）；
溢出x：隐藏；
过渡：0.5s；
方向：rtl；
}
.重叠部分a.闭合{
位置：绝对位置；
字体大小：40px；
填充：0；
线高：40px；
顶部：10px；
右：10px；
颜色：#eee；
}
.overlySection.overlay内容{
位置：相对位置；
宽度：100%；
文本对齐：居中；
边缘顶端：40px；
}
.overlaysection.overlay a{
显示：块；
过渡：0.3s；
文本对齐：左对齐；
颜色：#eee；
填充：8px 8px 8px 20px；
文字装饰：无；
}
.overlaysection.overlaysection a:悬停，
.overlaysection.overlaysea：焦点{
颜色：#f1f1；
}
.overlySection.overlybtndiv{
显示：块；
填充：6px 8px；
位置：相对位置；
}
.overlySection.overlybtndiv h2{
字体大小：14px；
颜色：黑色；
线高：40px；
右边距：10px；
}
.overlysection.overlybtn{
边框颜色：透明！重要；
浮动：对；
填充物：5px；
背景：白色；
大纲：0；
}
.OverlySection.Overlybtn.图标栏{
显示：块；
高度：2倍；
边界半径：1px；
填充：1.5px；
宽度：28px；
背景色：黑色！重要；
边缘顶部：5px；
}
.overlySection.overlybtn.图标栏：第一个子项{
利润率最高：3倍！重要；
}
#显示myoverlaynav{
左：0；
}

数字一
数字二
数到三
数字四
菜单

这是因为您使用宽度来控制显示

与此相反，我建议您将“显示”类切换到覆盖

默认情况下，在“.overlaysection.overlay”css上，将宽度更改为100%，将左侧更改为-100%

然后在“Showed”类中将left设置为0。更改JS以切换 显示类，然后它应该从左侧滑出，而不更改文本方向

函数openNav（）{ document.getElementById（“myoverlaynav”）.classList.toggle（“显示”）； } 函数closeNav（）{ document.getElementById（“myoverlaynav”）.classList.toggle（“显示”）； }

@介质（最小宽度：631px）{
.重叠切片{
显示：无；
}
}
.overlaysection.overlay{
身高：100%；
宽度：100%；
位置：固定；
/*z指数：1*/
左-100%；
z指数：999999；
排名：0；
背景色：rgb（0,0,0）；
背景色：rgba（0,0,0,0.9）；
溢出x：隐藏；
过渡：0.5s；
方向：rtl；
}
.重叠部分a.闭合{
位置：绝对位置；
字体大小：40px；
填充：0；
线高：40px；
顶部：10px；
右：10px；
颜色：#eee；
}
.overlySection.overlay内容{
位置：相对位置；
宽度：100%；
文本对齐：居中；
边缘顶端：40px；
}
.overlaysection.overlay a{
显示：块；
过渡：0.3s；
文本对齐：左对齐；
颜色：#eee；
填充：8px 8px 8px 20px；
文字装饰：无；
}
.overlaysection.overlaysection a:悬停，
.overlaysection.overlaysea：焦点{
颜色：#f1f1；
}
.overlySection.overlybtndiv{
显示：块；
填充：6px 8px；
位置：相对位置；
}
.overlySection.overlybtndiv h2{
字体大小：14px；
颜色：黑色；
线高：40px；
右边距：10px；
}
.overlysection.overlybtn{
边框颜色：透明！重要；
浮动：对；
填充物：5px；
背景：白色；
大纲：0；
}
.OverlySection.Overlybtn.图标栏{
显示：块；
高度：2倍；
边界半径：1px；
填充：1.5px；
宽度：28px；
背景色：黑色！重要；
边缘顶部：5px；
}
.overlySection.overlybtn.图标栏：第一个子项{
利润率最高：3倍！重要；
}
#显示myoverlaynav{
左：0；
}

数字一
数字二
数到三
.overlaysection .overlay-content {
 position: relative;
 width: 100%;
 text-align: center;
 margin-top: 50px;
    min-width: 270px;
    float: left;
 }