CSS Grid Responsive layout, make the site move with the menu - css

Question

i saw a website that had a cool effect when the hamburger menu opened, the site moved with the menu, how do i achieve that?
Currently i have this: https://jsfiddle.net/xwvL2a70/1/
/* grid */
.container {
display: grid;
grid-template-columns: 1fr;
grid-gap: 10px;
}
/* items */
.container > * {
color: #353535;
font-size: 1.2em;
line-height: 1.5;
padding: 20px;
background: #d0cfc5;
}
/* nav styles */
.container nav {
background: #136fd2;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav a {
color: #d0cfc5
}
nav a:hover {
text-decoration: none;
}
/* media query for grid layout */
#media only screen and (min-width: 600px) {
/* grid */
.container {
grid-template-columns: repeat(4, 1fr);
}
/* specific item styles */
.container header,
.container nav,
.container footer {
grid-column: span 4;
}
.container section {
grid-column: span 3;
}
/* nav styles */
nav ul li {
display: inline-block;
padding: 0 20px 0 0;
}
/* hide toggle */
.toggle {
display: none;
}
}
/* media query for nav styles */
#media only screen and (max-width: 599px) {
#nav {
transition: transform .3s ease-in-out;
top: 0;
bottom: 0;
position: fixed;
width: 300px;
right: -340px;
}
#nav:target {
transform: translateX(-340px);
}
.close {
text-align: right;
display: block;
text-decoration: none;
font-size: 3em;
position: relative;
top: -30px;
}
.open {
text-align: left;
}
}
I would like to make an animation like this site: https://vizir.com.br/
When you click the menu, the content moves to the left with it.
I dont know if its an easy question, im really new to this and just looking to learn some neat effects, is it hard to create a menu/website animation like this?

Answer 1

I think what you may be looking for is this link here How To Side Navigation
Specifically this part here, which is not only changing the width of the sidenav with a nice transition, but also changing the margin on the main content
/* Set the width of the side navigation to 250px and the left margin of the
page content to 250px */
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
/* Set the width of the side navigation to 0 and the left margin of the page content to 0 */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
}

Answer 2

I tried to work on your issue and it resolves. Please have a look at my Codepen https://codepen.io/navdeepsingh/pen/VyVPeP
const open = document.querySelector('#open');
open.addEventListener('click', function() {
document.querySelector('body').classList.add('menu-opened');
});
const close = document.querySelector('#close');
close.addEventListener('click', function() {
document.querySelector('body').classList.remove('menu-opened');
});
/* grid */
.container {
display: grid;
grid-template-columns: 1fr;
grid-gap: 10px;
transition: all .3s ease-in-out;
}
/* items */
.container > * {
color: #353535;
font-size: 1.2em;
line-height: 1.5;
padding: 20px;
background: #d0cfc5;
}
/* nav styles */
.container nav {
background: #136fd2;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav a {
color: #d0cfc5
}
nav a:hover {
text-decoration: none;
}
/* media query for grid layout */
#media only screen and (min-width: 600px) {
/* grid */
.container {
grid-template-columns: repeat(4, 1fr);
}
/* specific item styles */
.container header,
.container nav,
.container footer {
grid-column: span 4;
}
.container section {
grid-column: span 3;
}
/* nav styles */
nav ul li {
display: inline-block;
padding: 0 20px 0 0;
}
/* hide toggle */
.toggle {
display: none;
}
}
/* media query for nav styles */
#media only screen and (max-width: 599px) {
#nav {
transition: transform .3s ease-in-out;
top: 0;
bottom: 0;
position: fixed;
width: 300px;
right: -340px;
}
#nav:target {
transform: translateX(-340px);
}
.close {
text-align: right;
display: block;
text-decoration: none;
font-size: 3em;
position: relative;
top: -30px;
}
.open {
text-align: left;
}
section {
postion: fixed;
}
body.menu-opened .container {
margin: 0 80% 0 -80%;
}
}
<div class="support-grid"></div>
<div class="container">
<header role="banner">
<a class="toggle open" id="open" href="#nav">open</a>
<h1>Header</h1>
</header>
<nav id="nav" role="navigation">
<a class="toggle close" id="close" href="#">×</a>
<ul>
<li>
Item 1
</li>
<li>
Item 2
</li>
<li>
Item 3
</li>
</ul>
</nav>
<section role="main">
<article>
<h2>Article</h2>
<p>Curabitur orci lacus, auctor ut facilisis nec, ultricies quis nibh. Phasellus id diam sollicitudin, malesuada turpis id, gravida erat. Maecenas placerat elit vel hendrerit convallis. Sed in mauris ut justo vulputate viverra feugiat ac dui. Fusce feugiat arcu in vehicula vehicula. Donec varius justo at nulla aliquet volutpat.</p>
<p>Ut id rutrum eros. Nulla tristique, magna et mattis vulputate, mi eros suscipit turpis, nec bibendum turpis nunc feugiat sapien. Nunc arcu est, lacinia id diam quis, sagittis euismod neque. Nullam fringilla velit sed porta gravida. Proin eu vulputate libero. Ut a lacinia enim. Etiam venenatis mauris et orci tempor congue. Sed tempor eros et ultricies congue. Aenean sed efficitur orci. Nulla vel tempus mi.</p>
<p>Ut cursus suscipit augue, id sagittis nibh faucibus eget. Etiam suscipit ipsum eu augue ultricies, at rhoncus mi faucibus. In et tellus vitae leo scelerisque fringilla nec at nunc.</p>
</article>
</section>
<aside>
<h3>Aside</h3>
</aside>
<footer>
<h3>Footer</h3>
</footer>
</div>
`