How to transform/transition div without moving the text? - css

Question

I created an overlay menu for the responsive menu of website. every thing is OK but when the menu will be closed, the texts (in menu) will be gathered and moved individually and then disappear but I want them to slide out without moving texts.
I tried these HTML:
<section class="overlaysection">
<div id="myoverlaynav" class="overlay">
×
<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 Codes:
#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 codes:
function openNav() {
document.getElementById("myoverlaynav").style.width = "80%";
}
function closeNav() {
document.getElementById("myoverlaynav").style.width = "0%";
}
you can see this menu in 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

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

Answer 2

right now what happening is when close navbar its width is reduced so thus your li tag width to so, just give your li tag fixed width and your problem will be solved like.
#media (min-width: 631px){
.li {
width : 200px;
}
}
and only give this in media query for smaller devices otherwise it will replicate in whole website.

Answer 3

It's because you're using width's to control the display.
Instead of this, I suggest that you toggle a "shown" class to your overlay.
By default on your ".overlaysection .overlay" css, change the width to 100% and left to -100%;
Then on the "shown" class set the left to 0. Change the JS to toggle the
shown class and it should then slide out from the left without changing the text orientation.
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">
×
<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>