Question

我正在制作一个我在另一个网站上找到的布局，该网站有一个固定的标题和两个推送菜单，一个在两边。在chrome中使用inspect元素后，我可以看到该网站使用transform:translate3d来允许其菜单左右移动，但我无法弄清楚开发人员如何制作body与他们一起移动的网站。快速浏览一下，我发现transform:translate3d似乎没有在body元素上使用过，但我很确定在这部分代码中发生了某些事情。为了移动主要内容，因为在单击菜单按钮时会给出一个额外的类。

该网站是：https://www.etq-amsterdam.com/

我在jsfiddle中提出了一个布局，其中按钮打开的菜单与上面的站点完全相同，但是站点的body保持静止。

示例1： https://jsfiddle.net/75dtb1zk/9/

我还在transform:translate3d元素上使用body提出了第二个jsfiddle，但是这个在打开菜单时打破了标题和推送菜单上的固定位置。

示例2： https://jsfiddle.net/75dtb1zk/8/

以下是来自示例1：的代码，我认为该代码最接近我在上面提供的网站上使用的代码。有没有人知道他们如何设法让身体随着菜单移动而不破坏某些元素的固定位置？

HTML

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

<div class="content">

</div>

<footer class="footer">
Footer
</footer>

CSS

html {
    position: relative;
    height: 100%;
    background-color: pink;
}
body {
    min-height: 100%;
    margin: 0;
    padding: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-transition: all .6s cubic-bezier(.645, .045, .355, 1);
    transition: all .6s cubic-bezier(.645, .045, .355, 1);
}
.header {
    position: fixed;
    height: 70px;
    width: 100%;
    background-color: white;
}
.content {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: 85%;
    margin-top: 80px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 20px;
}
.footer {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: auto;
    width: 100%;
    padding: 10px 0 10px 0;
    background-color: #efefef;
}

#button-one {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin: 20px;
    background-color: green;
    cursor: pointer;
}
#button-two {
    display: inline-block;
    float: right;
    width: 30px;
    height: 30px;
    margin: 20px;
    background-color: orange;
    cursor: pointer;
}
.push-menu-one {
    position: fixed;
    top: 0px;
    left: 0;
    width: 295px;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: wheat;
    -webkit-transition: all .6s cubic-bezier(.645, .045, .355, 1);
    transition: all .6s cubic-bezier(.645, .045, .355, 1);
    transform: translate3d(-295px, 0px, 0px)
}
.push-menu-two {
    position: fixed;
    top: 0px;
    right: 0;
    width: 295px;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: darkred;
    -webkit-transition: all .6s cubic-bezier(.645, .045, .355, 1);
    transition: all .6s cubic-bezier(.645, .045, .355, 1);
    transform: translate3d(295px, 0px, 0px)
}
.overlay {
    position: fixed;
    z-index: 9;
    top: 0px;
    left: 0px;
    width: 0px;
    height: 0px;
    background-color: #000000;
    opacity: 0;
    transition: opacity 1s, width 0s ease 1s, height 0s ease 1s;
}
.overlay.open-right,
.overlay.open-left {
    width: 100%;
    height: 100%;
    opacity: 0.4;
    transition: opacity 1s;
}

.push-menu-one.open-left {
    transform: translate3d(0px, 0px, 0px)
}
.push-menu-two.open-right {
    transform: translate3d(0px, 0px, 0px)
}

的jQuery

jQuery(document).ready(function($) {

    $('#button-one').click(function() {
        $('body, .overlay, .push-menu-one').toggleClass('open-left');

    });

    $('#button-two').click(function() {
        $('body, .overlay, .push-menu-two').toggleClass('open-right');

    });

    $('.overlay').click(function() {
        $('body, .overlay, .push-menu-one, .push-menu-two').removeClass('open-left');

        $('body, .overlay, .push-menu-one, .push-menu-two').removeClass('open-right');

    });

});

如何使用transform：translate3d而不会破坏位置：修复？

0 个答案: