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/中看到此菜单，该菜单就像https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav

Answer 1

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

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

并且仅在媒体查询中为较小的设备提供此选项，否则它将在整个网站中复制。

Answer 2

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

相反，我建议您将“显示”类切换到叠加层。

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

然后在“显示”类上将左侧设置为0。更改JS以切换显示的课程，然后应从左侧滑出而无需更改文本方向。

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

将scanf和min-width添加到float:left。

.overlay-content

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

3 个答案: