Как преобразовать / перевести 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 / грамматика / вспомогательные модальные глаголы в английском / и это меню похоже на https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav

Answer 1

Это потому, что вы используете ширину для управления дисплеем.

Вместо этого я предлагаю вам переключить «показанный» класс на оверлей.

По умолчанию на вашем ".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 2

Добавьте min-width и float:left к .overlay-content.

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

Answer 3

Прямо сейчас, что происходит, когда закрывается навигационная панель, ее ширина уменьшается, поэтому ширина тега li становится такой, просто задайте фиксированную ширину тега li, и ваша проблема будет решена следующим образом.

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

и укажите это только в медиа-запросе для небольших устройств, в противном случае он будет реплицирован на весь веб-сайт.