移动时代最具代表性的菜单模式之一必须是画布外侧面菜单，它从窗口边缘滑入，并在打开时水平移动页面的其余部分。通过边缘化页面的其余部分，它将用户的注意力集中在菜单本身上，创建了一个直观易用的用户界面，无论设备大小如何。在本教程中，我们将看到如何仅使用CSS3从头开始创建画布外侧面菜单，并在一点JavaScript的帮助下，对其进行抛光，以便它可以完全用于实际使用。
好主意
让我们首先介绍如何创建我们的画布外菜单的蓝图。主要步骤是：
使用相对定位的DIV环绕我们的整个BODY内容，以便在显示侧面菜单时轻松地将其水平移动。
创建一个固定菜单（“
position:fixed”），它在标记之上添加到相对定位的DIV之外，并且最初位于浏览器窗口的左（或右）边缘之外，使用CSS的“left”或“transform: translate3d()”属性。
当菜单打开时，我们将使用CSS3的“ transform: translate3d()”属性将上面的两个DIV向右移动，以实现丝般平滑的过渡。
以下是我们的菜单如何适合现有页面的秘密图：
该图不包括制作我们的画布外菜单所涉及的其他三个组件 - 隐藏的复选框和用于切换菜单状态的相应标签元素，以及在菜单打开时屏蔽页面其余部分的半透明DIV 。我们将在教程中的适当时候介绍它们。
让乐趣开始！
让我们从最顶层开始，从基本页面开始，其中包含一些虚拟内容。我们将逐步了解如何将非画布菜单集成到其中：
1 2 3 4 五 6 7 8 9 10 11 12 |
|
开始了！
步骤1：使用相对定位的DIV包裹BODY内容
第一步是使用相对定位的DIV包裹我们的整个BODY内容，以便在打开菜单时水平移动内容。这是包装器DIV的CSS和标记：
#contentarea包装CSS
1 2 3 4 五 6 |
|
#contentarea包装器标记
1 2 3 4 五 6 7 8 9 10 11 12 13 14 |
|
此DIV应完整地包围您现有的BODY内容。在上面的CSS中，为了简洁起见，我们省略了CSS3相关属性的供应商前缀版本，例如“ transform”和“ transition”，尽管它们应该存在于实际代码中。将注意力转向#contentareaDIV 的CSS ，我们使用“ transform: translate3d(0,0,0);”来准备移位元素。例如，值“ transform: translate3d(250px,0,0);”会将元素250px向右移动。使用“ transform”属性而不是CSS的“ left”属性具有激活3D硬件加速以实现更平滑过渡的优势 。我们还使用“ transition”属性来表示我们希望转换“transform
第2步：定义基本的非画布菜单
对于下一步，让我们首先创建画布菜单骨架，而不包含菜单内容：
nav＃offcanvas-menu CSS
1 2 3 4 五 6 7 8 9 10 11 12 13 14 15 16 |
|
nav #offcanvas-menu标记
1 2 3 4 五 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
|
注意画布外菜单元素（#offcanvas-menu）相对于内容包装器（#contentarea）的位置 - 它应该添加到它的外部和上方，因此这两个元素是兄弟。
为了定位#offcanvas-menu元素，好吧，离开画布，我们首先将菜单的位置设置为“ fixed”，然后利用CSS3属性转换：“ translate3d(-250px,0,0);”将菜单向左移动菜单宽度的长度。
使用visibility:hidden了不支持CSS3的浏览器translate3d()值
#offcanvas-menu元素，我们添加 visibility:hidden了浏览器的缘故不支持CSS3的 translate3d()，即IE9及以下，抵消并初步隐藏菜单。但是添加此属性会使CSS3转换更棘手。我们想要的是我们的菜单元素在从关闭转换为打开时立即可见，因此在此期间，用户可以看到正在转换的其他属性。但是，对于从打开到关闭的转换，我们希望菜单元素保持可见，直到其他属性转换完成为止; 换句话说，我们想要在之前设置延迟visibility:hidden适用于那种情况。要根据转换的方向完成两种不同的行为，最初，我们在transition属性中包含以下值：transition: transform 0.5s, visibility 0s 0.5s; /* transition settings. */这里我们指定transform属性应该转换超过0.5秒，而对于visibility属性，它应该立即完成而不转换，但仅在延迟0.5秒后（第二个数值指定延迟）。这样的设置可以解决菜单从 打开到关闭时所需的延迟 - 我们希望在隐藏菜单之前延迟0.5秒，其他属性转换为完成所需的时间。现在，这仍然使得可见性行为的另一部分不完整，这使得当菜单从关闭转换为打开时，可见性属性在应用时没有延迟。注意：可以在此处找到关于涉及visibility属性的CSS3过渡主题的良好读物 。 第3步：添加复选框/标签组合以切换菜单
到目前为止，我们有一个空白的画布外菜单，它位于浏览器的边缘之外，对用户来说是不可见的。我们如何揭示它？一个优雅的CSS唯一技术是定义一个复选框和LABEL（s）元素组合，然后使用复选框兄弟技术来控制兄弟元素的状态，具体取决于复选框本身的状态，在这种情况下，“状态” #offcanvas-menu“和” #contentarea“元素。如果所有这些听起来有点压倒性，不要害怕，我们会将所有内容分解为下面的位数。
在其他任何事情之前，首先，我们将定义一个隐藏的复选框，并伴随LABEL元素切换复选框状态。该复选框应该作为“ #offcanvas-menu”和“ #contentarea”元素的兄弟添加，并继续它们（我们将很快解释原因）。另一方面，LABEL元素可以添加到你想要的任何地方，在这种情况下，我们的心在“ #contentarea”元素中说：
隐藏的复选框和标签CSS
1 2 3 4 五 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 三十 31 32 33 34 35 36 |
|
隐藏的复选框和标签标记
1 2 3 4 五 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
|
再次，checkbox元素的位置非常重要 - 它应该添加到非画布菜单和DIV 之上，#contentarea并作为后两者的兄弟。这是为了方便我们接下来要实现的复选框兄弟技术，#contentarea 根据复选框本身的选中状态控制菜单和DIV的状态。LABEL元素的位置可以是任意的。
由于隐藏了checkbox元素（为了美观），我们通过将标签的“ for”属性设置为复选框的ID 来定义相应的标签元素来控制复选框。标签元素的样式使用border和CSS伪元素的组合创建流行的抽屉外观。
让我们在继续之前获取我们的页面到目前为止的快照：
第4步：使用复选框兄弟技术来控制兄弟元素的状态
是时候安装我们的非画布菜单的电机，一种打开/关闭它的机制，并根据需要取代其余的内容。仅CSS技术基本上围绕使用兄弟选择器（~）检查后面的复选框的所需兄弟的样式，例如：
1 2 3 |
|
选中时，选择器会#togglebox:checked选中#togglebox复选框，而我们在一起说：“ #contentarea当选中前者时，选择复选框后面的”兄弟DIV（不要继续）。“ ~CSS 的兄弟选择器（）只能选择其后的元素的兄弟，这就是为什么3个播放器的顺序和层次结构 - 复选框，菜单和#contentarea“DIV ” 非常重要。
#contentarea根据是否检查进行中的复选框，可以对菜单和“ DIV进行不同的设置，我们所要做的就是设置这些元素的样式，以便扩展菜单并将” #contentarea“向右移动” 选中复选框时的菜单宽度。让我们看看这在实践中的表现：
选中#togglebox复选框的兄弟姐妹时，选择它并设置样式
1 2 3 4 五 6 7 8 9 10 |
|
现场演示：
点击抽屉标签now- viola，现在幻灯片菜单滑入视图，同时轻推其余内容。当我们再次点击标签，然后取消选中它时，我们撤消为这两个元素定义的样式，从而再次关闭菜单。
visibility为了不支持CSS3的浏览器继续讨论使用和转换“ ”属性translate3d()，这里为#offcanvas-menu开放状态，我们将元素的“ visibility”设置为“可见”，并定义transition delay为0，或者没有延误。回想一下这个原因 - 当菜单从关闭转换 为打开时，我们想要的是visibility立即应用的“ ”属性，以便用户可以看到其他属性的转换。与菜单从打开过渡到关闭时的对比- 在这种情况下，我们希望延迟0.5秒 - 其他属性的过渡时间，
我们现在知道创建非画布菜单的所有基本部分。在下一页中，我们将重点放在细化上，方法是在菜单内部添加样式并设置样式，并在菜单打开时对页面应用叠加。我们走吧！