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线程中提出的各种方法,但我无法找到适用于所有操作系统和浏览器的直接解决方案。 因此请记住,在动画叠加时,您可能会看到小的字体渲染问题。
结论
就是这样,伙计们! 我们设法用相对简单的代码构建了一个有用的画布菜单。
希望您喜欢最终的结果,并以此为灵感来创建更强大的画布菜单。 当然,如果您构建了任何一个,请不要忘记与我们分享!
翻译自: /tutorials/how-to-build-an-off-canvas-menu-with-css-and-a-touch-of-javascript--cms-30354
css画布背景