Question

这是我昨天问过的一个问题的后续行动，此后我一直无法解决。

我想弄清楚如何模仿这个网站的双推菜单布局：https://www.etq-amsterdam.com/

网站标题两侧的按钮从左侧或右侧打开一个菜单。

我已尝试在jsfiddle中实现这一点，我将在下面包含这些内容。在这个小提琴中，我已经将相同的transform:translate3d规则应用于推送菜单，如上面的网站链接。我无法弄清楚他们是如何设法让网站的body在菜单旁边向左或向右移动，从而产生“推动”效果。如果我添加我的示例的transform:translate3d directly to the body`，它会破坏标题上的固定位置。

正如有人昨天向我指出的那样，上面的网站使用body应用transform:translate3d样式的子div，但我发现无法解决的问题是已设法让子div不仅移动body，而且移动所有其他子div，即页眉，页脚等。当然，如果div从属于另一个div，那么应用于它的任何CSS都应该'能够移动父母吗？

以下是根据inspect元素

的上述网站的HTML结构

<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>

应用transform:translate3d样式的div是具有类"transform-container"的那个。

从结构的外观来看，似乎这个div是body的“曾孙”，但它似乎能够移动body和所有其他div在它上面的结构。这怎么可能？

这是我在jsfiddle中的例子。我设法让菜单的两侧移动方式与我链接的网站相同，但如上所述，我无法在不破坏标题固定位置的情况下移动主体。

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

Answer 1

所以这些家伙正在做的是，移动id =＆＃34; navBar＆＃34; ＆安培;内容，无论id或类是什么。

因为他们在子元素而不是标题元素上执行它会起作用。

不幸的是，因为您在代码中缺少额外的标记＆amp;或者将元素保留在标题内，你将很难做到这一点。

所以你可以在这里看到：

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

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

新标题标记：

 <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>

你可以在小提琴中看到这个：

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

让子div移动父div

1 个答案: