0 reactions
What is wrong with this sliding menu setup?
I've found the solution to this issue today by changing my approach, but I'm still unclear what the problem was with the original setup so I wanted to ask the hive mind. Take this page for example.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Test Page</title>
<style>
body {
display: grid;
grid-template-rows: 75px 1fr 75px;
height: 100vh;
padding: 0;
margin: 0;
overflow: hidden;
}
#slidingMenu {
width: 200px;
height: 100vh;
background-color: #333 ;
position: absolute;
top: 0;
right: -300px; /* Start hidden */
transition: right 0.3s ease; /* Smooth transition */
}
#slidingMenu slidingMenu.open {
right: 0; /* Slide in */
}
#top {
background-color: red;
}
#middle {
background-color: green;
}
#bottom {
background-color: blue;
}
</style>
</head>
<body>
<div id="top">
<div id="slidingMenu"></div>
</div>
<div id="middle">
<button id="toggleMenu" onClick='slidingMenu.classList.toggle("open")''>Toggle Menu</button>
</div>
<div id="bottom"></div>
</body>
</html>
When you view this page on a tablet/mobile screen, the page scrolls beyond the bottom of the <body> element. If you open dev tools and enable device preview mode and then resize the viewport, all hell breaks loose. This only happens when the menu is closed. The moment you open the menu, everything sorts itself out.
https://preview.redd.it/lcj5ycfy345h1.png?width=1918&format=png&auto=webp&s=ad3a2ddb0813c4f8f7da28c7b018498be1c5ff26
https://preview.redd.it/xrtiuuro445h1.png?width=1917&format=png&auto=webp&s=f705b27e2c2dc7635e1ff1f783c917dd0c334f28
What am I missing?
#dev #programming #technology
source
I've found the solution to this issue today by changing my approach, but I'm still unclear what the problem was with the original setup so I wanted to ask the hive mind. Take this page for example.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Test Page</title>
<style>
body {
display: grid;
grid-template-rows: 75px 1fr 75px;
height: 100vh;
padding: 0;
margin: 0;
overflow: hidden;
}
#slidingMenu {
width: 200px;
height: 100vh;
background-color: #333 ;
position: absolute;
top: 0;
right: -300px; /* Start hidden */
transition: right 0.3s ease; /* Smooth transition */
}
#slidingMenu slidingMenu.open {
right: 0; /* Slide in */
}
#top {
background-color: red;
}
#middle {
background-color: green;
}
#bottom {
background-color: blue;
}
</style>
</head>
<body>
<div id="top">
<div id="slidingMenu"></div>
</div>
<div id="middle">
<button id="toggleMenu" onClick='slidingMenu.classList.toggle("open")''>Toggle Menu</button>
</div>
<div id="bottom"></div>
</body>
</html>
When you view this page on a tablet/mobile screen, the page scrolls beyond the bottom of the <body> element. If you open dev tools and enable device preview mode and then resize the viewport, all hell breaks loose. This only happens when the menu is closed. The moment you open the menu, everything sorts itself out.
https://preview.redd.it/lcj5ycfy345h1.png?width=1918&format=png&auto=webp&s=ad3a2ddb0813c4f8f7da28c7b018498be1c5ff26
https://preview.redd.it/xrtiuuro445h1.png?width=1917&format=png&auto=webp&s=f705b27e2c2dc7635e1ff1f783c917dd0c334f28
What am I missing?
#dev #programming #technology
source
