css画布背景_如何使用CSS和触摸JavaScript构建画布外菜单

css画布背景

在本教程中，我们将介绍一种简单而有效的方法，以使用HTML，CSS和JavaScript创建画布菜单。

要初步了解我们将要构建的内容，请查看相关的CodePen演示（请查看较大的版本以获得更好的体验）：

注意：本教程不会重点介绍如何使画布菜单可访问或响应，因此，这些步骤当然是有效的。

1.从标记开始

我们的标记包含两个包装器元素：

.top-banner元素
.top-nav元素

这是HTML代码：

<section class="top-banner">
<div class="top-banner-overlay">
<!-- content here -->
</div>
</section>
<nav class="top-nav">
<div class="menu-wrapper">
<!-- content here -->
</div>
<div class="fixed-menu">
<!-- content here -->
</div>
</nav>

2.接下来，我们需要一些CSS

准备好标记后，接下来让我们检查菜单所需的最重要的样式。

注意：为了便于阅读，此CSS代码未进行优化-您会注意到重复的属性，您可能希望在自己的版本中删除这些属性。

设置顶部横幅元素

.top-banner元素如下所示：

关于其样式，我们执行以下操作：

将其宽度设置为等于窗口宽度减去.menu-wrapper元素的宽度。
将其高度设置为等于窗口高度。
将其定义为flex容器。这将强制其覆盖覆盖整个父级高度。
使用flexbox将叠加层的内容垂直居中。

这是我们实现所有这些所需的样式：

.top-banner {
display: flex;
width: calc(100% - 150px);
height: 100vh;
transform: translateX(150px);
background: url(IMAGE_PATH) no-repeat center / fixed;
}
.top-banner-overlay {
display: flex;
flex-direction: column;
justify-content: center;
width: 350px;
padding: 20px;
transition: transform .7s;
color: white;
background: rgba(0, 0, 0, .7);
}

设置顶级导航元素

.top-nav元素如下所示：

在这种情况下，我们将执行以下操作：

将直接子元素指定为覆盖窗口高度的固定位置的元素。
使用flexbox垂直对齐.fixed-menu元素。
默认情况下隐藏.menu-wrapper元素。为此，我们不给它提供诸如display: none的属性值。实际上，我们使用了translate()函数将其向左移动200px。请记住，元素的宽度为350px，因此它的一部分仍在视口内。但是，它不可见，因为该元素位于.fixed-menu元素下方。
隐藏菜单列表。

看看下面相应CSS样式：

.top-nav .menu-wrapper {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 350px;
padding: 20px;
transform: translateX(-200px);
transition: transform .7s;
background: #B1FFE5;
}
.top-nav .menu-wrapper .menu {
opacity: 0;
transition: opacity .4s;
}
.top-nav .fixed-menu {
position: fixed;
top: 0;
left: 0;
bottom: 0;
display: flex;
flex-direction: column;
width: 150px;
padding: 20px;
background: aquamarine;
}

3.现在购买一些JavaScript

在这一点上，我们将使用一些简单JavaScript代码来操纵画布外菜单的状态。

让我们描述必要的操作：

单击.menu-open按钮时，菜单应显示为具有良好的滑入效果，并且应同时向右推动覆盖层。（可选）我们可以在此状态下做更多的事情。在我们的示例中，我们在叠加层的::before伪元素::before添加了框阴影，并使用淡入效果显示了菜单列表。
单击.menu-close按钮时，菜单应消失，并具有良好的滑出效果，并且应同时向左推覆盖层。

这是实现此行为JavaScript代码：

const menuOpen = document.querySelector(".top-nav .menu-open");
const menuClose = document.querySelector(".top-nav .menu-close");
const menuWrapper = document.querySelector(".top-nav .menu-wrapper");
const topBannerOverlay = document.querySelector(".top-banner-overlay");
function toggleMenu() {
menuOpen.addEventListener("click", () => {
menuWrapper.classList.add("is-opened");
topBannerOverlay.classList.add("is-moved");
});
menuClose.addEventListener("click", () => {
menuWrapper.classList.remove("is-opened");
topBannerOverlay.classList.remove("is-moved");
});
}
toggleMenu();

在下面，您将找到关联CSS样式：

.top-banner-overlay.is-moved {
transform: translateX(350px);
}
.top-banner-overlay.is-moved::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 100%;
width: 20px;
box-shadow: 0 0 10px black;
}
.top-nav .menu-wrapper.is-opened {
transform: translateX(150px);
}
.top-nav .menu-wrapper.is-opened .menu {
opacity: 1;
transition-delay: .6s;
}

4.浏览器支持

该演示仅在桌面浏览器上可以正常运行。移动设备将需要不同的页面布局，但这超出了本教程的范围。和往常一样，我们使用Babel将ES6代码编译为ES5。

我在测试时遇到的唯一小问题是动画叠加层时发生的文本呈现更改。尽管我尝试了在不同的Stack Overflow线程中提出的各种方法，但我无法找到适用于所有操作系统和浏览器的直接解决方案。因此请记住，在动画叠加时，您可能会看到小的字体渲染问题。

结论

就是这样，伙计们！我们设法用相对简单的代码构建了一个有用的画布菜单。

希望您喜欢最终的结果，并以此为灵感来创建更强大的画布菜单。当然，如果您构建了任何一个，请不要忘记与我们分享！

翻译自: https://webdesign.tutsplus.com/tutorials/how-to-build-an-off-canvas-menu-with-css-and-a-touch-of-javascript--cms-30354

css画布背景