I have a side menu on my website, and one of the elements is two words long.
I expected it to slowly appear just as the other elements, but instead, the second word appears all at once.
If you want to check for yourself, the website is https://grazianofermi.altervista.org/SitoLogin/
Login information:
email: prova@gmail.com
password: prova123
function sb() {
var y = document.getElementById("hidden-check")
if (y.checked) {
document.getElementById("sidebar").style.width = "0"
} else {
document.getElementById("sidebar").style.width = "250px"
}
}div.sidebar {
position: absolute;
left: 0;
width: 0;
box-shadow: 0 0 15px #e96f26;
margin-top: 100px;
overflow: hidden;
transition: 0.2s ease;
background-color: white;
}
button.sidemenu {
background-color: white;
color: black;
border-radius: 0;
font-family: "Bebas Neue";
width: 100%;
height: 50px;
border: none;
padding: 0;
cursor: pointer;
transition: 0.2s ease;
margin: 0;
font-size: 2vw;
text-align: center;
}
button.sidemenu:hover {
background-color: rgb(200, 200, 200);
}
img.sidemenu-icon {
position: absolute;
left: 15px;
top: 15px;
background-color: white;
box-shadow: 0 0 15px #e96f26;
cursor: pointer;
transition: 0.2s ease;
width: 45px;
border-radius: 5px;
padding: 5px;
}
img.sidemenu-icon:hover {
background-color: #e3e3e3;
}
input#hidden-check {
display: none;
}<input type="checkbox" id="hidden-check" name="hidden-check">
<label for="hidden-check" onclick="sb()">
<img class="sidemenu-icon" src="sidemenuIcon.png" alt="icon">
</label>
<div class="sidebar" id="sidebar">
<a href="index.html"><button class="sidemenu">HOMEPAGE</button></a>
<a href="cambiaPass.php"><button class="sidemenu">CAMBIA PASSWORD</button></a>
<a href="logout.php"><button class="sidemenu">LOGOUT</button></a>
</div>div.sidebar {
transition: width ease 2s 0s;
}
I would recommend that you use this:
function sb() {
var y = document.getElementById("hidden-check")
if (y.checked) {
document.getElementById("sidebar").classList.remove('active');/*change this line*/
} else {
document.getElementById("sidebar").classList.add('active');/*change this line*/
}
}div.sidebar {
position: absolute;
left: 0;
width: 250px;/*change this line*/
box-shadow: 0 0 15px #e96f26;
margin-top: 100px;
overflow: hidden;
transition: 0.2s ease;
background-color: white;
transform: translateX(-280px);/*add this line*/
}
/*add*/
div.sidebar.active {
transform: translateX(0px);
}After checking your demo I still can see what you mean.
Maybe the problem is that when you close the drawer the two word element runs out of space and the second word gets pushed down. Then, when you open it, it starts bellow and when there is enough space it jumps back to the same line as the first word.
In general I would discourage changing the width of the element to hide it, it tends to produce that kind of weird looking transitions, and has poor performance. I would recommend instead that you use as your close state (on CSS)
transform: translateX(-<enough_pixels_to_hide_the_drawer>);
transition: transform 0.2s ease;
and to open it
transform: translateX(0)