Cześć,
Tworzę właśnie stronę internetową i chciałem zrobić wysuwany z prawej strony sidebar. Całość działa tak jak na CodePen: https://codepen.io/KamQiX/pen/OJRPWpL
Dodatkowo wklejam kod tutaj:
<html>
<body>
<main>
<div class="content center">
<button class="show-sidebar">Show Sidebar</button>
</div>
<div class="sidebar hide">
<button class="show-sidebar">Hide Sidebar</button>
</div>
</main>
</body>
</html>
body
{
overflow-x: hidden;
margin: 0;
padding: 0;
}
main
{
width: 100vw;
height: 200vh;
}
div.content
{
width: 100vw;
height: 200vh;
background-image: url(https://www.nightcity.love/build/images/districts/city-center-2c2defef.jpg);
}
div.sidebar
{
position: absolute;
top: 0;
right: -25vw;
width: 25vw;
height: 200vh;
background-color: #fff;
}
div.hide
{
visibility: hidden;
transition: all 0.8s ease-in-out;
}
div.show
{
visibility: visible;
transform: Translate(-25vw, 0);
transition: all 0.8s ease-in-out;
}
div.left
{
transform: Translate(-25vw, 0);
transition: all 0.8s ease-in-out 0.2s;
}
div.center
{
transition: all 0.8s ease-in-out;
}
$(document).ready(function()
{
$('.show-sidebar').click(function()
{
$('.sidebar').toggleClass('hide show');
$('.content').toggleClass('center left');
});
});
Problem polega na tym, że właśnie na Codepenie wszystko działa idealnie, a u mnie lokalnie na Xamppie po wysunięciu sidebara i odświeżeniu strony nie wraca ona na właściwe miejsce. W opcji "Zbadaj" Widać jakby cały main był przesunięty w lewo, mimo że sidebar jest schowany. Nie pomaga nawet odświeżanie z CTRL+F4. Aby main wrócił na swoje miejsce muszę otwierać stronę w nowej karcie. Pytanie czy tak dzieje się tylko na Xamppie i to nie wina kodu HTML/CSS/JS, a strona po wrzuceniu na hosting będzie działać czy coś źle zrobiłem.
Przeglądarka Google Chrome, na Edge działa dobrze.