zurb-foundation - Zurb Foundation 6 增加 offcanvas 的大小使其在加载时可见
问题描述
使用 Zurb Foundation 构建网站,我正在使用画布外功能。
画布外区域的默认宽度是 250 像素,我想将其增加到 600 像素。
不幸的是,当我增加画布外的宽度时,它在加载时变得可见......
另外,我注意到当您展开或关闭画布外,如果它大于 250 像素,则“幻灯片”仅适用于 250 像素。
这是要测试的 HTML 代码:
<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation for Sites</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.3/css/foundation.min.css">
<style>
#off-canvas-right {
width: 600px;
}
</style>
</head>
<body>
<div class="off-canvas position-left" id="off-canvas-left" data-off-canvas>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad cumque, eligendi. Deleniti rerum, distinctio tempora laboriosam velit incidunt hic asperiores officiis alias ea, sequi libero animi soluta totam, quia veritatis.
</div>
<div class="off-canvas position-right" id="off-canvas-right" data-off-canvas>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore voluptate velit, labore, voluptatem quia laborum temporibus asperiores at eos nulla nam ab fugit tenetur quaerat iusto architecto eum ea explicabo.
</div>
<div class="off-canvas-content" data-off-canvas-content>
<a data-open="off-canvas-left" class="text-center">Open left</a>
<a data-open="off-canvas-right" class="text-center">Open right</a>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.3/js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
任何有助于解决这两个问题的想法?
解决方案
您只需要添加 CSS 即可在所有状态下进行转换。我认为这也是导致页面加载时视图跳转的原因。我相信将其添加到您的样式中会起作用:
#off-canvas-right {
&.off-canvas {
width: 600px;
transform: translateX(600px);
&.is-open {
transform: translate(0, 0);
}
}
}
推荐阅读
- c# - System.Configuration.ConnectionStringSettingsCollection.this[string].get 使用单元测试返回 null
- c - 关于execve参数的困惑
- javascript - javascript 简单的 assertEqual 测试运行结果
- arrays - 使用多元素数组的多元素数组填充定义的命名范围
- php - DOMXPath - 如何将元素包装在 HTML 标签中?
- lisp - 在列表中查找原子的位置
- windows - 在 Windows 中映射 Web 目录
- javascript - 将函数作为参数传递给javascript中的迭代函数
- go - 如何编写惯用的构造函数
- machine-learning - 如何提高我的神经网络准确性(说话人识别 - MFCC)