如何在不移动文本的情况下transform/transition div？

Question

我为网站的响应式菜单创建了一个叠加菜单。一切都很好，但是当菜单关闭时，文本（在菜单中）将被收集并单独移动然后消失，但我希望它们在不移动文本的情况下滑出。

我试过这些 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>

CSS 代码：

@media (min-width: 631px){
    .overlaysection {
        display: none;
    }
}

.overlaysection .overlay {
    height: 100%;
    width: 0;
    position: fixed;
    /* z-index: 1; */
    z-index: 999999;
    top: 0;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.9);
    overflow-x: hidden;
    transition: 0.5s;
    direction:rtl;
}
.overlaysection a.closebtn {
    position: absolute;
    font-size: 40px;
    padding: 0;
    line-height: 40px;
    top: 10px;
    right: 10px;
    color: #eee;
}
.overlaysection .overlay-content {
    position: relative;
    width: 100%;
    text-align: center;
    margin-top: 40px;
}
.overlaysection .overlay a {    
    display: block;
    transition: 0.3s;
    text-align: left;
    color: #eee;
    padding: 8px 8px 8px 20px;
    text-decoration: none;
}
.overlaysection .overlay a:hover, 
.overlaysection .overlay a:focus {
  color: #f1f1f1;
}
.overlaysection .overlaybtndiv {
    display: block;
    padding: 6px 8px;
    position: relative;
}
.overlaysection .overlaybtndiv h2 {
    font-size: 14px;
    color: black;
    line-height: 40px;
    margin-right: 10px;
}
.overlaysection .overlaybtn {
    border-color: transparent !important;
    float: right;
    padding: 5px;
    background: white;
    outline: 0;
}
.overlaysection .overlaybtn .icon-bar {
    display: block;
    height: 2px;
    border-radius: 1px;
    padding: 1.5px;
    width: 28px;
    background-color: black !important;
    margin-top: 5px;
}
.overlaysection .overlaybtn .icon-bar:first-child {
    margin-top: 3px !important;
}

。 javascript 代码：

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

您可以在 https://end-eng.com/grammar/auxiliary-modal-verbs-in-english/ and this menu is like https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav

中看到此菜单

Answer 1

现在发生的事情是当关闭导航栏时它的宽度减小所以你的 li 标签宽度如此，只需给你的 li 标签固定宽度你的问题就会得到解决。

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

并且只在较小设备的媒体查询中提供此信息，否则它将复制到整个网站。

Answer 2

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

相反，我建议您将 "shown" class 切换到叠加层。

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

然后在"shown" class 设置左边为0。改变JS来切换显示 class 然后它应该从左边滑出而不改变文本方向。

function openNav() {
 document.getElementById("myoverlaynav").classList.toggle('shown');
}
function closeNav() {
  document.getElementById("myoverlaynav").classList.toggle('shown');
}

@media (min-width: 631px){
    .overlaysection {
        display: none;
    }
}

.overlaysection .overlay {
    height: 100%;
    width: 100%;
    position: fixed;
    /* z-index: 1; */
    left: -100%;
    z-index: 999999;
    top: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.9);
    overflow-x: hidden;
    transition: 0.5s;
    direction:rtl;
}
.overlaysection a.closebtn {
    position: absolute;
    font-size: 40px;
    padding: 0;
    line-height: 40px;
    top: 10px;
    right: 10px;
    color: #eee;
}
.overlaysection .overlay-content {
    position: relative;
    width: 100%;
    text-align: center;
    margin-top: 40px;
}
.overlaysection .overlay a {    
    display: block;
    transition: 0.3s;
    text-align: left;
    color: #eee;
    padding: 8px 8px 8px 20px;
    text-decoration: none;
}
.overlaysection .overlay a:hover, 
.overlaysection .overlay a:focus {
  color: #f1f1f1;
}
.overlaysection .overlaybtndiv {
    display: block;
    padding: 6px 8px;
    position: relative;
}
.overlaysection .overlaybtndiv h2 {
    font-size: 14px;
    color: black;
    line-height: 40px;
    margin-right: 10px;
}
.overlaysection .overlaybtn {
    border-color: transparent !important;
    float: right;
    padding: 5px;
    background: white;
    outline: 0;
}
.overlaysection .overlaybtn .icon-bar {
    display: block;
    height: 2px;
    border-radius: 1px;
    padding: 1.5px;
    width: 28px;
    background-color: black !important;
    margin-top: 5px;
}
.overlaysection .overlaybtn .icon-bar:first-child {
    margin-top: 3px !important;
}
#myoverlaynav.shown {
  left: 0;
}

<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>

Answer 3

将 min-width 和 float:left 添加到 .overlay-content。

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

如何在不移动文本的情况下transform/transition div？

How to transform/transition div without moving the text?

css

overlay

menu