Jack1991 Jack1991 - 2 months ago 6
CSS Question

Making a child div move a parent div

This is a follow-up to a question I asked yesterday that I have since been unable to solve.

I am trying to figure out how to imitate a dual push-menu layout from this website: https://www.etq-amsterdam.com/

The buttons on either side of the website's header open a menu from the left or right hand side.

I have made an attempt to achieve this in a jsfiddle which I'll include below. In this fiddle, I have applied the same

transform:translate3d
rules to the push-menus as in the website link above. What I can't figure out is how they've managed to get the
body
of the site to move left or right alongside the menus, thus creating the "push" effect. If I add
transform:translate3d directly to the
body` of my example, it breaks the fixed positioning on the header.

As somebody pointed out to me yesterday, the website above uses a child div of the
body
to which the
transform:translate3d
styles are applied, but what I'm finding impossible to work out is how they have managed to get the child div to move not only the
body
, but all the other child divs as well, i.e the header, footer etc. Surely if a div is subordinate to another, any CSS applied to it shouldn't be able to move the parents too?

Here is the HTML structure of the website above according to inspect element

<body class=“is-desktop has-header-background is-loading”>
<div class=“header”></div>
<aside id=“sidemenu”> class=“sidemenu”>…</aside>
<aside id=“shoppingcart”> class=“shoppingcart” data-quantity=“0”>…</aside>
<main id=“js-page-view” class=“page-view app-started”>
<div class=“page home-page” style=“opacity: 1;”> ==$0
<div class=“transform-container”>…</div>
</div>
</main>
<footer>
</footer>
</body>


The div that has the
transform:translate3d
styles applied to it is the one with the class –
"transform-container"
.

From the look of the structure, it seems as though this div is a "great-grandchild" of the
body
and yet it seems able to move the
body
and all the other divs that are above it in the structure. How is this possible?

Here is my example in a jsfiddle. I have managed to make the menus move on both sides in the same way as the website I've linked, but as mentioned, I can't get the body to move without breaking the fixed positioning on the header.

https://jsfiddle.net/75dtb1zk/9/

Answer

So what these guys are doing is, moving the id="navBar" & the content, whatever the id or class for that is.

Because they're doing it on a child element not the header element it will work.

Unfortunately because you are missing extra markup in your code & or keeping elements inside of the header you'll have a hard time doing it.

So you can see here:

.header .nav {
  transition: all .6s cubic-bezier(.645,.045,.355,1);
}

.open-left .header .nav {
  transform: translate3d(281px,0,0);
}

New header markup:

 <header class="header">
  <div class="nav">
  <span id="button-one"></span>
  <span id="button-two"></span>
  </div>
  <div class="push-menu-one"></div>
  <div class="push-menu-two"></div>
  <div class="overlay"></div>
</header>

You can see this working in the fiddle:

https://jsfiddle.net/75dtb1zk/12/