CODEWITHSUNDEEP
jqueryhtmlcss
Jack Averill
Jack Averill

Reputation: 851

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 thebody` 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/

Upvotes: 0

Views: 643

Answers (1)

andy jones
andy jones

Reputation: 922

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/

Upvotes: 3

Related Questions