canvas画布响应式

在本教程中，我们将遍历四种模式的变体，其中导航和页面内容放在画布之外，以节省空间，直到请求。 是时候停止复制和粘贴了，让我们开始理解！

回顾一下，本系列文章的第一个重点是导航保留在标题中的模式。 第二个对象查看将导航移至页脚的模式。 第三个讨论了可以打开和关闭菜单的模式。

对于所有这些模式，目标是最小化较小屏幕上的垂直空间导航。 今天，我们将页面的某些部分移出画布，直到需要它们为止。

与前面的文章一样，您可能通过Brad Frost熟悉了这些模式，他编译了一些在响应站点​​上使用的模式 。 卢克·罗布洛夫斯基（Luke Wroblewski）是另一位一直推广非画布图案概念的人。

模式

对于页眉和页脚模式，我们主要针对各种屏幕尺寸重新布置了导航。 使用切换模式，当空间变紧时我们可以隐藏导航，并使用按钮取消隐藏导航。 画布外模式与切换模式的工作方式相似，因为当我们需要节省空间时，它们不可见，可以通过按钮进行请求。 但是它们并没有完全隐藏，而是在屏幕上甚至部分可见。

页面的不同部分可以在何处以及如何移动到屏幕外，有多种组合。 我想将本教程重点放在四种模式变化上。

• 边栏导航 —菜单位于画布左侧的边栏中。 单击按钮可将菜单滑入，并将大部分内容从画布上滑出。 我们将对click事件使用复选框hack。
• 侧边栏导航JS —与上面的模式相同，不同之处在于，我们将使用Javascript而非click事件的复选框hack。
• 面板 -此模式在面板中放置不同的内容。 页面顶部的导航将主要内容滑动到请求的面板。 我们将对单击事件使用单选按钮。
• 边栏+ —此模式与上面的模式相似，不同之处在于它允许打开和关闭内容的更多独立性。 我们还将Javascript用于点击事件。

正如我们在整个系列文章中所做的一样，每种模式中的概念都是建立在之前的模式之上的。 在本教程中，我们将考虑几种不同的方式来构造HTML，以在画布上和下移动部分。 每个css都将相似，尽管它自然会随不同的结构而变化。 我们还将使用css（复选框和单选按钮）和Javascript驱动的单击事件。 理想情况下，到本教程结束时，您将对所涉及的基本技术有很好的了解，并将能够对其进行修改以适合您的项目需求。

所有这些模式的完整代码都可以通过上面的下载链接获得，也可以通过访问演示并查看源代码来查看。

侧边栏导航模式

这是最简单且可能是最常见的画布模式。 默认情况下，页面将作为单个内容列打开。 唯一可见的导航将是单独的菜单按钮。 单击该按钮将使菜单从屏幕的大部分左侧向左滑动。 内容的单列通常会在屏幕上向右滑动，尽管其中一些仍然可见。

方法：在小屏幕上，我们将隐藏菜单并将其替换为菜单按钮。 该按钮绑定到一个复选框，其中选中状态和未选中状态创建2个状态。 单击后，所有内容都会向右滑动以显示整个菜单。 再次单击菜单按钮或我们将添加到菜单顶部的关闭按钮，会将所有内容滑回左侧。 随着浏览器尺寸的增大，我们将菜单转换为水平导航栏，并将单列布局转换为2列布局。

步骤1：HTML

使用这些模式，重要的是要看到所有主要部分的结构，因此，除了菜单之外，我还提供了更多内容，尽管我删除了这些主要部分中的大部分内容，以使内容更具可读性。

<input id="toggle" type="checkbox" />
<nav>
<label class="close" for="toggle" onclick><span>X</span> Close</label>
<ul id="nav">
<li><a href="">Back to Post</a></li>
<li class="current"><a href="sidebar-nav.html">Sidebar Nav</a></li>
<li><a href="sidebar-nav-js.html">Sidebar Nav JS</a></li>
<li><a href="sidebar+.html">Sidebar+</a></li>
<li><a href="panels.html">Panels</a></li>
</ul>
</nav>
<div class="wrapper">
<div class="inner">
<header>
<label class="btn" for="toggle" onclick>Menu</label>
</header>
<div class="container main-content">
<div id="content"></div>
<div id="sidebar"></div>
</div>
<section class="subfooter"></section>
<div id="footer"></div>
</div>
</div>

需要注意的重要部分是，大多数内容都包含2个附加div，包装div和内部div。 请注意，“菜单”按钮位于这些附加div内的标题内。 这意味着单击该按钮后，该按钮将随我们的内容一起向右滑动。

但是，导航位于这两个附加div之外，并且包含我们将选中和取消选中的复选框。 在nav元素内，我们将创建一个标签，该标签连接到复选框以关闭菜单，尽管菜单按钮也可以用于关闭菜单。

此结构创建2个独立的部分。 一个用于菜单，另一个用于其他所有内容。

第2步：默认CSS

如果您阅读了有关切换模式的上一教程 ，您将认识到该按钮及其css。 该按钮的样式使用与上一教程相同的颜色，边框半径和渐变。

所不同的是，由于菜单不在画布的左侧，我们现在将按钮移至左侧。 同样，这里不使用定位，而是向左浮动按钮。 这意味着，当所有内容向右滑动时，按钮也将向右滑动。

.btn {
float: left;
margin: 1.5em 0 0 0;
background: #999;
padding: 0.25em 2%;
color: #fff;
cursor: pointer;
border-radius: 0.25em;
background-color: #5b5756;
background-image: -webkit-linear-gradient(top, #6b6766, #5b5756);
background-image:    -moz-linear-gradient(top, #6b6766, #5b5756);
background-image:     -ms-linear-gradient(top, #6b6766, #5b5756);
background-image:      -o-linear-gradient(top, #6b6766, #5b5756);
background-image:         linear-gradient(top, #6b6766, #5b5756);
}
.btn:hover {
background-color: #7b7776;
background-image: -webkit-linear-gradient(top, #8b8786, #7b7776);
background-image:    -moz-linear-gradient(top, #8b8786, #7b7776);
background-image:     -ms-linear-gradient(top, #8b8786, #7b7776);
background-image:      -o-linear-gradient(top, #8b8786, #7b7776);
background-image:         linear-gradient(top, #8b8786, #7b7776);

我们需要其功能复选框，但是我们不需要看到它，因此可以将其放置在屏幕之外。

#toggle {
position: absolute;
left: -999em;
}

现在，我们希望屏幕外导航。 我们将修复它的位置，因为我们不希望它在可见时滚动，而且我们还将高度设置为100％，以使其充满屏幕的高度。 如果您有更多链接，则可能不会选择两者之一，但是由于我们只有几个链接，因此应该可以。

当菜单稍后可见时，我们不希望它水平填充屏幕。 将宽度设置为75％可使我们在菜单可见时显示部分内容。 要将菜单移出屏幕，我们将其左侧值设置为-75％以匹配宽度。 我们还将设置一个过渡，以便菜单平滑地滑动而不是一次全部显示。

其余样式添加背景和一些填充以将链接推到关闭标签下方。

nav {
position: fixed;
left: -75%;
width: 75%;
height: 100%;
padding: 5em 0 0 0;
background: #3b3736;
-webkit-transition: left 0.5s;
-moz-transition: left 0.5s;
-ms-transition: left 0.5s;
-o-transition: left 0.5s;
transition: left 0.5s;
}

我们希望关闭标签像按钮一样起作用，所以我们设置了一个游标值。 也许最有趣的是我们如何设置封闭标签内跨度中的X的样式。 为了在X周围创建一个圆，我们添加了一个边框，然后添加了50％的边框半径。 为了使其更圆，我用眼睛调整了顶部/底部和左侧/右侧的填充。 请注意，不同的字体将需要更改这些填充值。

.close {
cursor: pointer;
color: #fff;
}
.close:hover {
color: #999;
}
.close span {
border: 2px solid #fff;
border-radius: 50%;
padding: 0.2em 0.4em;
}

链接列表的css仅用于美观。 列表的顶部边缘有一个很小的凸起，但否则边缘和填充已被清零。 链接具有底部边框，因此要完成效果，列表本身将具有顶部边框。

链接还具有渐变背景，以使其具有一点点深度，并且其高度已夸大到4em，以创建较大的分接区域。

#nav {
margin: 0.1875em 0 0 0;
padding: 0;
list-style: none;
border-top: 1px solid #777;
}
#nav a {
text-decoration: none;
color: #fff;
padding: 1em 0 1em 5%;
display: block;
border-bottom: 1px solid #777;
height: 4em;
background-image: -webkit-linear-gradient(top, #4b4746, #3b3736);
background-image:    -moz-linear-gradient(top, #4b4746, #3b3736);
background-image:     -ms-linear-gradient(top, #4b4746, #3b3736);
background-image:      -o-linear-gradient(top, #4b4746, #3b3736);
background-image:         linear-gradient(top, #4b4746, #3b3736);
}
#nav a:hover {
background: #4b4746;
background-image: -webkit-linear-gradient(top, #5b5756, #4b4746);
background-image:    -moz-linear-gradient(top, #5b5756, #4b4746);
background-image:     -ms-linear-gradient(top, #5b5756, #4b4746);
background-image:      -o-linear-gradient(top, #5b5756, #4b4746);
background-image:         linear-gradient(top, #5b5756, #4b4746);
}

乍一看，包装和内部div的css似乎没什么作用。 两者都设置为100％宽度，并且包装div会产生额外的溢出：隐藏。 当我们在下一部分将内容向右滑动时，这一点很重要。 内部div浮动在右侧，我们为其进行了过渡以匹配上面的nav元素。

.wrapper {
width: 100%;
overflow: hidden;
}
.inner {
float: right;
width: 100%;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}

步骤3：显示菜单CSS

我们使用click事件的复选框技巧，以便在单击按钮后定位元素，我们可以将：checked与同级选择器结合使用。 将所有内容向右滑动实际上很容易。

对于nav元素，我们只需将其左值设置为0。更改该选项后，整个菜单将滑入视图并填充75％的屏幕（因为我们将其宽度设置为75％）。 现在，关闭链接可以显示出来了，我们将其固定在顶部和左侧（您也可以将关闭按钮固定并定位在默认CSS中。我选择在此处进行此操作，但是在此选择之后没有特定的原因）。

:checked ~ nav {
left: 0;
}
:checked ~ nav .close {
position: fixed;
top: 1.5em;
left: 4%;
}

为了使内容向右滑动，我们给它以-75％的右边距。 这是将包装div设置为隐藏溢出的重要位置。 如果未设置，页面的整体宽度将增加。 内容将在右侧关闭，但我们可以左右滚动显示和隐藏它。 我们不想要那个。 在其父容器上设置了溢出：隐藏设置之后，任何本来可以在屏幕外显示的东西都将被隐藏。

:checked ~ .wrapper .inner {
margin-right: -75%;
}

步骤4：媒体查询中CSS

一旦屏幕比48em宽，我们就有足够的空间在屏幕顶部水平放置菜单。 这很合适，但是我们仍然可以将菜单转换为水平导航栏。

由于不再需要菜单按钮，我们将其隐藏起来，然后将徽标向左移动。 由于标头中的所有内容都会浮动或定位，因此我们需要确保标头本身不会折叠。 在这里，一些底部填充可以做到这一点。

@media screen and (min-width: 48em) {
header {
padding-bottom: 5em;
}
.logo {
float: left;
margin: 1.25em 0;
}
.btn {
display: none;
}
}

万一打开菜单并在右侧关闭了内容时浏览器的宽度增加了，我们会将边距重置为0。我们还将关闭过渡功能，因为如果浏览器是再次调整大小。

@media screen and (min-width: 48em) {
:checked ~ .wrapper .inner {
margin-right: 0%;
-webkit-transition: 0;
-moz-transition: 0;
-ms-transition: 0;
-o-transition: 0;
transition: 0;
}
}

要移动导航，我们现在将其向右浮动。 我们还必须将位置设置为默认静态，并且由于我们不再需要背景，因此将其设置为透明。 在此状态下，我们将重置高度，填充，宽度，并关闭过渡。

请注意，这是对导航和处于检查状态的导航完成的。 您永远不会知道某人何时将以较小的浏览器启动，然后单击菜单按钮后，将浏览器的尺寸调整为更大。 我们不妨考虑这种可能性。

@media screen and (min-width: 48em) {
nav,
:checked ~ nav {
float: right;
position: static;
background: transparent;
padding: 0;
height: auto;
width: 100%;
-webkit-transition: 0;
-moz-transition: 0;
-ms-transition: 0;
-o-transition: 0;
transition: 0;
}
}

一旦导航始终可见，我们将不再需要查看关闭链接，因此我们将其显示设置为无。 再次注意，我们正在对选中状态和未选中状态进行此操作。

@media screen and (min-width: 48em) {
nav .close,
:checked ~ nav .close {
display: none;
}
}

最后，我们将列表从垂直转换为水平。 我们将在列表上使用绝对定位，浮动列表项，然后将其返回以内联显示。 对链接进行一些填充，并重置一些内容，例如边框和背景，我们都准备好了。

@media screen and (min-width: 48em) {
#nav {
position: absolute;
top: 1.5em;
right: 2%;
border: 0;
}
#nav li {display: inline; float: left;}
#nav li.current a {color: #7b7776;}
#nav a {
padding: 0 1.5em;
display: inline;
border: 0;
background: transparent;
}
#nav a:hover {background: transparent;}
#sidebar {
margin-top: 5.5em;
}
}

步骤5：适用于iOS和Android的修复程序

我上次在切换按钮中介绍了此内容，但是如果您错过了该帖子，重复此操作也没有什么坏处。 在iOS 6以下版本和Android 4.1.2以下版本中，复选框hack在iOS中存在一些问题。 两者的修复都很简单，尽管几乎不明显 。

iOS修复是连接到复选框的标签上的空onlclick事件。 如果您向上滚动，则可以在此模式开头的html中看到此空的onclick。 Android修复程序是body元素上的假动画，如下所示。

body {
-webkit-animation: bugfix infinite 1s;
}
@-webkit-keyframes bugfix {
from {padding:0;}
to {padding:0;}
}

至此，我们完成了“ off canvas”侧边栏菜单。

思想

由于某些原因，此模式效果很好。 它通过隐藏菜单直至请求来节省空间。 一个简单的过渡并向右滑动，可以清楚地了解正在发生的事情。 在移动设备上，菜单始终仅需轻按即可。

模式的关键是设置一个click（或tap）事件，这里使用了复选框hack。 根据复选框的状态，可以调整left，right，left margin或margin-right值，以便页面的某些部分位于所需位置。 在这里，菜单在可见时占据了页面的75％，但很可能是50％的100％或任何其他值。

另一个重要的关键是将隐藏div设置为隐藏在包装div上，以确保内部div完全消失并且在离开画布时无法滚动到。 仅按钮是我们想要移动页面内容的地方。

例子

以下是使用css click事件的此模式的一些示例。 这些示例的模式略有不同，其中有2个将：target hack用于click事件，而不是复选框hack。

• Codepen上此模式的其他版本
• cssPanelMenu-使用：target而不是：checked
• cssPanelMenuCSS技巧教程

侧边栏Nav Js模式

这种模式与上面的模式几乎相同。 确实只有一个主要区别，那就是click事件将由Javascript控制，而Javascript在非画布模式中更常用。 我们将修改上面的模式，以便它使用jQuery而不是复选框hack。

方法：在小屏幕上，我们将隐藏菜单并将其替换为菜单按钮。 我们的jQuery函数将拦截点击并添加或删除类，以便我们CSS可以了解状态。 在这些类上设置的样式将在菜单打开或关闭的情况下显示页面布局。 再次将浏览器调整为更大的尺寸后，我们会将菜单转换为水平导航栏，并将单列布局转换为2列布局。

步骤1：HTML

模式的jQuery版本中的html几乎与我们上面看到的完全一样。 复选框输入已删除，两个标签已转换为链接。 否则，以下所有内容均与该模式的复选框版本中看到的相同。

<nav>
<a class="close"><span>X</span> Close</a>
<ul id="nav">
<li><a href="">Back to Post</a></li>
<li><a href="sidebar-nav.html">Sidebar Nav</a></li>
<li class="current"><a href="sidebar-nav-js.html">Sidebar Nav JS</a></li>
<li><a href="sidebar+.html">Sidebar+</a></li>
<li><a href="panels.html">Panels</a></li>
</ul>
</nav>
<div class="wrapper">
<div class="inner">
<header>
<a class="btn">Menu</a>
</header>
<div class="container main-content">
<div id="content"></div>
<div id="sidebar"></div>
</div>
<section class="subfooter"></section>
<div id="footer"></div>
</div>
</div>

第2步：默认CSS

这里的差异甚至更少。 在两个版本的模式中，默认的css完全相同。

第3步：打开菜单CSS

这里的情况也相似，但是我们必须做一些更改。 css属性和值与上面相同，但是需要将它们添加到不同的选择器中。 我们将看到如何立即添加和删除这些类，但是通过查看选择器，您已经可以看到一些内容。

我们将在nav元素中添加或删除.open类。 在以上版本中，我们必须将nav元素作为：checked伪选择器的同级。 由于nav元素和.wrapper类是兄弟姐妹，因此我们仍将使用兄弟姐妹选择器将.inner div作为目标。

nav.open {
left: 0;
}
nav.open .close {
position: fixed;
top: 1.5em;
left: 4%;
display: block;
}
.open ~ .wrapper .inner {
margin-right: -75%;
}

这些属性及其值与我们在上面看到的相同。

步骤4：媒体查询中CSS

CSS再次与该模式的复选框版本中CSS相同。 唯一的区别是：checked〜nav被替换为nav.open，而：checked〜.wrapper .inner被替换为.open〜.wrapper .inner。 就像上面的部分一样。

我相信您不需要再次查看代码，因为它几乎是完全相同的。 不过，我会提醒您，以防万一，首先要定位nav元素的打开和关闭版本，这还是个好主意，以防万一有人先打开菜单然后调整浏览器的大小，以便我们对nav和nav.open进行样式设置并包括两者都为我们的后代选择器设置样式。

步骤5：JavaScript（jQuery）

对不起，让你久等了。 这实际上是此版本模式的关键。 我们首先拦截添加了.btn类的任何链接的点击。 这是我们唯一的菜单按钮。

我们要添加和删除nav元素上的类。 如果您还记得我们的按钮（a.btn）在标题内，则在.inner div内，在.wrapper div内，这是nav元素的同级对象。 为了从按钮扩展到.wrapper div，我们将使用jQuery parent（）函数，该函数查找匹配的最接近的祖先，而不是最接近的祖先。 从那里我们可以获取同级导航元素。

我们将测试一下nav元素是否已经应用了该类，如果已经应用了该类，我们将删除该类。 否则，我们将其添加。 尽管大多数人可能无法通过菜单按钮来关闭菜单（在给定布局的情况下），但我们还是允许他们这样做。

$(document).ready(function() {
$('a.btn').click(function() {
if($(this).parents('.wrapper').siblings('nav').hasClass('open')){
$(this).parents('.wrapper').siblings('nav').removeClass('open');
} else {
$(this).parents('.wrapper').siblings('nav').addClass('open');
}
return false;
});
$('a.close').click(function() {
if($(this).parent('nav').hasClass('open')){
$(this).parent('nav').removeClass('open');
}
return false;
});
});

关闭按钮位于nav元素内部，因此是从它到nav的更直接的路径。 在这里，我们只需要单一的parent（）函数，就不用再看了。 另外，由于关闭按钮仅在导航中存在.open时才会显示，因此我们无需添加它。 实际上，我可能不需要测试它是否存在，因为它必须存在。

思想

如果您了解此模式的复选框版本，那么使用jQuery的备用版本也应该很容易理解。 我们删除了该复选框，并将标签转换为链接。 在css中，我们以前使用过的任何地方：checked〜nav，现在我们使用nav.open以及我们以前使用过的任何地方：checked〜.wrapper .inner我们现在使用.open〜.wrapper .inner

新代码实际上是用于添加和删除类的jQuery函数（等同于选中和取消选中复选框）。 如果您知道jQuery，则应该很容易理解该函数。 希望即使您对jQuery不熟悉也不会太困难。 我们拦截了点击，然后使用一些jQuery函数遍历DOM ，以便将点击从导航到我们想要修改的nav元素。

您使用哪种版本取决于您。 都不是完美的。 复选框hack需要针对iOS和Android进行一些修复，并且不适用于旧版IE。 尽管很可能与以往不同，但最有可能为访问您网站的任何人安装并激活Javascript。 两种选择中的任何一种都可能使您失去一些访问者，尽管很多人对此表示怀疑。

例子

以下是利用此模式并将Javascript用于click事件的其他演示。 如果您查看所有这些内容，您将看到此处的演示是由David Bushel建模的，并且我已经包括了Dave的教程。 Meny演示将看起来与其他任何演示都不同，但从本质上讲，它仍然是相同的模式。 触发一个事件，并通过该事件显示侧边栏菜单，并且主要内容发生更改。

• 演示者Zurb
• 演示者David Bushell
• David Bushell演示教程
• jPanelMenu
• Meny-此模式的更高级版本
• 演示由Codrops
• 演示Jason Weaver

面板模式

这种模式与上面的两种模式不同，尽管它仍然依赖于相同的基本思想。 在这里，我们将演示的3个部分（菜单，主要内容和侧边栏）构建为3个单独的内容面板。 在最小的屏幕上，一次只能显示一个面板。 我们将在页面顶部包括一个新的附加菜单，为每个面板提供一个选项。 单击任意一个将其连接的面板移到屏幕上，而其他面板移出屏幕。

方法：在小屏幕上，我们一次只会显示一个面板，主要内容是可见的默认面板。 我们将在标题中创建3个按钮，每个面板一个。 这些按钮都是带样式的单选按钮。 我们将使用类似于复选框hack（单选按钮hack）的方式来控制click事件。 如果复选框允许两种状态，则单选按钮允许任意数量的状态。 调整浏览器大小后，我们将一次在屏幕上显示更多面板。 首先，我们将显示两个面板，其中一个隐藏，然后默认情况下将显示所有三个面板。

步骤1：HTML

与前两种模式相比，html的结构发生了一些变化。 首先，带有菜单的nav元素现在位于.wrapper和.inner divs中。 这将允许我们通过更改其父div .inner一次滑动所有三个面板。

页眉和页脚都被拉到.wrapper和.inner类之外。 在我们希望打开菜单时，页眉和页脚随内容移动。 现在我们希望它们始终存在。 只有“面板”，我们的内容才会在屏幕上和屏幕外滑动。 由于我们的按钮将保留在原处，因此我们也可以删除关闭链接/标签。

在标题内，我们现在有一个div，其中包含三个标签，三个面板各一个。 它们都具有与我们以前使用的相同的.btn类，尽管它们现在也具有自己的特定类。 请注意，每个标签都用于不同的切换按钮或单选按钮。 三个无线电输入在标题之外。 它们共享名称“面板”，并且每个名称都有唯一的ID（如您期望的单选按钮一样）。 它们在标头之外，因此可以是.wrapper div的同级对象。

<header>
<div id="panel-nav">
<label class="btn btn-1" for="toggle-1" onclick>Menu</label>
<label class="btn btn-2" for="toggle-2" onclick>Content</label>
<label class="btn btn-3" for="toggle-3" onclick>More</label>
</div>
</header>
<input id="toggle-1" name="panel" type="radio" />
<input id="toggle-2" name="panel" type="radio" />
<input id="toggle-3" name="panel" type="radio" />
<div class="wrapper">
<div class="inner">
<nav>
<ul id="nav">
<li><a href="">Back to Post</a></li>
<li><a href="sidebar-nav.html">Sidebar Nav</a></li>
<li><a href="sidebar-nav-js.html">Sidebar Nav JS</a></li>
<li class="current><a href="panels.html">Panels</a></li>
<li"><a href="sidebar+.html">Sidebar+</a></li>
</ul>
</nav>
<div class="container main-content">
<div id="content"></div>
</div>
<div id="sidebar"></div>
</div>
</div>
<section class="subfooter"></section>
<div id="footer"></div>

第2步：默认CSS

一些默认的css，例如为按钮设置样式的样式与上面的样式相同，实际上与上一篇文章的样式相同。 菜单本身的基本外观与渐变背景类似。 我不会在下面显示任何一个。 相反，下面的css适用于已发生一些变化或对此模式不熟悉的事物。

自然，我们必须隐藏无线电输入，并且我们将像过去一样进行此操作。

#toggle-1, #toggle-2, #toggle-3 {
position: absolute;
left: -999em;
}

现在，我们将所有三个面板都放置在相同的容器中，我们将每个面板向左浮动以将它们定位。 每个都还具有整个宽度的1/3。 为什么稍后会变得清楚。

nav {
float: left;
padding: 0;
background: #3b3736;
width: 33.334%
}
.main-content {
float: left;
width: 33.333%
}
#sidebar {
float: left;
padding: 0 2%;
width: 33.333%
}

为什么有33。+％的宽度？ 在下面的两个选择器中可以看到此模式的工作方式。 我们将包装器的宽度设置为100％，然后将其中的所有溢出内容隐藏起来。 我们将.inner div的宽度设置为300％（其中1/3为100％），并且默认情况下将其左边界设置为-100％，中间面板可见。

由于设置了overflow：hidden，因此一次只能看到.inner div宽度的1/3。 该宽度的1/3是三个面板中任何一个的宽度。 换句话说，只有一个面板可见，而所有该面板将可见。

.wrapper {
width: 100%;
overflow: hidden;
}
.inner {
width: 300%;
margin-left: -100%;
-webkit-transition: margin 0.5s;
-moz-transition: margin 0.5s;
-ms-transition: margin 0.5s;
-o-transition: margin 0.5s;
transition: margin 0.5s;
}

最后，由于.inner div是将要移动的那一格，因此我们将在此处添加过渡，并且如您所见，仅当.inner div的边距发生变化时，才会发生此过渡。

步骤3：切换面板CSS

切换面板非常容易。 这项工作确实在上面的设置中。 要显示不同的面板，我们要做的就是调整.inner div的左边距。 我们需要能够根据选择的单选按钮访问.inner div，因此，与其使用通用的：checked，我们将其附加到各个单选按钮上。

＃toggle-1用于菜单，＃toggle-2用于主要内容，＃toggle-3用于侧边栏。 由于所有内容都向左浮动，因此左边距为0将显示这些面板或菜单中的第一个。 左边距-100％将菜单移出屏幕并显示主要内容。 左边距-200％将菜单和主要内容都推离屏幕左侧，并显示侧边栏。

#toggle-1:checked ~ .wrapper .inner {
margin-left: 0%;
}
#toggle-2:checked ~ .wrapper .inner {
margin-left: -100%;
}
#toggle-3:checked ~ .wrapper .inner {
margin-left: -200%;
}

步骤4：媒体查询中CSS

在48em，我们有足够的空间来显示一个以上的面板，尽管它太狭窄了，无法显示全部三个面板。 我们可以选择显示两个相邻的面板。 我认为默认显示菜单和主要内容是最有意义的。

由于我们的内容将始终以该宽度显示，因此我们可以删除其单选按钮的显示。 在进行此操作时，让我们将剩余的两个按钮向上和向右移动。 虽然我没有在下面显示它，但我也调整了徽标的位置，并在页眉中添加了一些填充。

@media screen and (min-width: 48em) {
#panel-nav {
float: right;
margin: 1.75em 3.25% 0 0;
}
.btn {
padding: 0.45em 0.9em;
margin-left: 0.1em;
}
.btn-2 {
display: none;
}
}

显示面板的总体思路与上面相同，尽管我们必须更改数字以一次显示多个面板。 就像默认设置一样，我们希望.inner div的宽度大于100％，以便其中的一些隐藏。 与上述不同，我们现在希望显示里面的2/3而不是仅显示1/3。

我们希望.inner div是.wrapper div宽度的1.5倍（3/2），因此我们将其设置为150％。 对于较小的宽度，我们希望随时可以看到整个内部宽度的1/3。 现在我们需要2/3，以便在任何时候显示的两个面板的宽度总和约为67％。

我使用的数字分别是菜单和侧边栏的25％，主要内容的40％。 40％+ 25％= 65％，这足够接近此处，因为此演示中的元素中存在少量填充，而本教程中未显示。 不过，想法是，两个面板的总数将接近67％。

由于我们不再希望在菜单后面显示渐变背景，因此将背景设置为透明。 另外，侧边栏将需要一些顶部边距，因此它与主要内容均匀放置。

控制哪个面板显示还是取决于当前选择的单选按钮。 现在我们只需要两个状态。 如果选中菜单按钮或现在隐藏的内容按钮，则.inner div的左边距为0。 将此边距设置为-37％将显示主要内容和侧边栏。

@media screen and (min-width: 48em) {
.inner {
width: 150%;
margin-left: 0;
}
nav {
width: 25%;
background: none;
}
.main-content {
width: 40%;
}
#sidebar {
width: 25%;
margin-top: 3em;
}
#toggle-1:checked ~ .wrapper .inner {
margin-left: 0%;
}
#toggle-2:checked ~ .wrapper .inner {
margin-left: 0%;
}
#toggle-3:checked ~ .wrapper .inner {
margin-left: -37%;
}
}

使用单选按钮的一个缺点是，一旦选择了一个，就总是必须选择一个。 这意味着如果选择了更多按钮以显示侧栏，则返回菜单的唯一方法是选择其单选按钮。 再次单击“更多”将无效。 我们将在下一个模式中对此进行更正，但是在使用单选按钮时需要考虑这一点。 使用单选按钮时，您可能永远不想显示一个面板或所有面板，而在两者之间什么也不显示。

在75em，我们可以一次显示所有三个面板。 我们不再需要显示任何按钮，因此将所有按钮的显示都设置为无。

现在，我们希望显示.inner div的全部内容，因此将其宽度设置为100％。 不再需要隐藏任何东西。 由于不再需要过渡，因此我们还将关闭过渡。

三个面板的宽度和其他间距是任意的。 我用眼睛来确定我希望每个人在版面中的宽度。 这里的任何数字都不是神圣的，尽管理想情况下，在实际项目中，每个面板在布局中的位置后面都会有一些逻辑。

最后一项更改是确保.inner div的左边距始终为0。以防万一有人在打开侧边栏后调整浏览器的大小，我们应该重置此状态。

@media screen and (min-width: 75em) {
.btn {display: none;}
.inner {
width: 100%;
-webkit-transition: 0;
-moz-transition: 0;
-ms-transition: 0;
-o-transition: 0;
transition: 0;
}
nav {
width: 20%;
}
.main-content {
width: 53%;
padding: 0 2% 0 0;
}
#sidebar {
width: 23%;
padding: 0 1%;
}
#toggle-3:checked ~ .wrapper .inner {
margin-left: 0%;
}
}
@media screen and (min-width: 80em) {
.logo {margin-left: -1.4%}
}

思想

此模式需要考虑一些事项。 虽然这里有三个面板，但您可以根据需要设置任意数量的面板。 您需要使用不同数量的面板来更改宽度和边距的数学运算，但是总体思路是相同的。

如果您已在屏幕打开到48em以下的位置检查了演示，则可能会比菜单或侧边栏显示时要注意的地方要小得多。 .inner div的高度在这里由主要内容面板控制，因为它包含最多的内容。 这表明，当每个面板包含相似数量的内容时，或者您不介意某些面板内容下方有很多空白时，此模式可能最有效。

要考虑的另一件事是，尽管我们在此处使用了单选按钮，但您始终可以使用Javascript。 除了可以使用所有：checked选择器之外，您还可以像在上面的侧边栏nav js模式中那样向每个面板添加和删除类。 在下一个模式中，我们将再次使用jQuery，以允许面板彼此独立地工作。

例子

以下是三个使用面板模式的演示。 这三者均使用Javascript进行点击事件，因此您可以在此处将其与演示进行比较。 同样，这些演示仅一次显示一个面板，而不管浏览器打开的宽度如何。

• 演示者Zurb
• 演示Jason Weaver
• Jason Weaver的演示-面板上下滚动的替代版本

边栏+模式

该模式结合了上面模式中的某些内容。 在某些方面，它的作用类似于面板模式，即单击按钮将称为“面板”。 就面板可以独立于其他面板打开和关闭的意义而言，它就像侧边栏样式一样工作。

方法：在最小的屏幕上，默认情况下仅显示主要内容。 我们的标题将包含2个按钮，每个按钮分别用于菜单和侧栏。 单击任一按钮将打开该面板，然后再次单击将关闭该面板。 如果任一面板打开，则单击另一个按钮将关闭打开的面板并打开关闭的面板。 如果我们使用的是css click事件，那么我们希望某些东西有时可以像单选按钮一样工作，而其他时候则需要一个复选框。 相反，我们将扩展现在应该是熟悉的jQuery函数以控制click事件。

步骤1：HTML

该html几乎与我们在面板模式中看到的相同。 再一次，所有三个信息面板都包含在.wrapper和.inner div中。 由于我们将Javascript用于点击事件，因此我们将删除单选输入并将标签转换为链接。

我们只需要两个按钮，而不是面板模式使用的三个按钮，因此我们将删除一个按钮，并将其余两个按钮放置在徽标的任意位置。

<header>
<div class="container">
<a class="btn btn-1">Menu</a>
<img class="logo" src="data:images/logo.png" width="252" height="46" />
<a class="btn btn-2">More</a>
</div>
</header>
<div class="wrapper">
<div class="inner">
<nav>
<ul id="nav">
<li><a href="">Back to Post</a></li>
<li><a href="sidebar-nav.html">Sidebar Nav</a></li>
<li><a href="sidebar-nav-js.html">Sidebar Nav JS</a></li>
<li class="current"><a href="sidebar+.html">Sidebar+</a></li>
<li><a href="panels.html">Panels</a></li>
</ul>
</nav>
<div class="container main-content">
<div id="content"></div>
</div>
<div id="sidebar"></div>
</div>
</div>
<section class="subfooter"></section>
<div id="footer"></div>

第2步：默认CSS

默认的css与面板模式几乎相同。 自然，我们不再需要隐藏无线电输入，并且可以删除其中一个按钮。 其余两个按钮的位置绝对正确，一个位于左侧，一个位于右侧。 否则，它们的样式将与本教程中所有按钮的样式相同。

.btn-1 {
position: absolute;
top: 1.5em;
left: 5%;
}
.btn-2 {
position: absolute;
top: 1.5em;
right: 5%;
}

由于此处CSS相同，因此您可以放心地假设我们将使用相同的通用方法来在屏幕上和屏幕外滑动“面板”。 再次将.wrapper div设置为100％宽度，并隐藏其溢出。 .inner div的宽度设置为300％，左边界设置为-100％以使其居中。

虽然未在下方显示，但每个“面板”的宽度均为.inner div总宽度的1/3。

.wrapper {
width: 100%;
overflow: hidden;
}
.inner {
width: 300%;
margin-left: -100%;
-webkit-transition: margin 0.5s;
-moz-transition: margin 0.5s;
-ms-transition: margin 0.5s;
-o-transition: margin 0.5s;
transition: margin 0.5s;
}

第3步：切换菜单和边栏CSS

由于我们使用相同的通用方法来在屏幕上和屏幕外滑动布局的不同部分，因此您可以猜到，它就像面板样式一样简单。 如果有的话，这比较容易，因为我们只有两个按钮，而不是三个。

区别在于，我们添加和删除了类而不是选中的单选按钮。 在这里，我将它们添加到.inner div中。 请注意，每个“面板”都有自己的唯一类，这使我们能够独立控制它们。

.inner.menu {
margin-left: 0;
}
.inner.more {
margin-left: -200%;
}

步骤4：媒体查询中CSS

我们在这里所做的和面板模式一样。 在48em，默认情况下，我们将同时显示菜单和主要内容。 除了将＃toggle-1：checked〜.wrapper .inner更改为.inner.menu和＃toggle-3：checked〜.wrapper .inner更改为.inner.more之外，其他所有操作都是相同的。 对于不同的宽度和边距，使用相同的值。

@media screen and (min-width: 48em) {
nav {
width: 25%;
background: none;
}
.inner {
width: 150%;
margin-left: 0;
}
.main-content {
width: 40%;
}
.container {
padding: 0 2%;
}
#content {
width: 100%;
}
#sidebar {
width: 25%;
margin-top: 3em;
}
.inner,
.inner.menu {
margin-left: 0%;
}
.inner.more {
margin-left: -37%;
}
}

在75em处，我们将一次显示所有三列，然后删除按钮。 同样，除了从：checked到class的更改外，它几乎是完全相同的，因此在这里我不会全部介绍。

我想指出我们正在做的事情，您可能会决定也可能不会决定加入。 在48em至75em之间，我们默认显示菜单和内容，并且边栏在右侧。 我们可以删除菜单按钮，而只需保留“更多”按钮，然后使其打开和关闭侧边栏。

取而代之的是，我离开了“菜单”按钮，该菜单按钮仅在存在侧边栏且菜单不在屏幕左侧时才执行某些操作。 在默认状态下，这可能会造成混淆，因为它可能导致访问者认为单击它会显示所示菜单中的其他菜单。 The tradeoff is that if someone is viewing the page below 48em and has the sidebar open and then increases their browser to 48em wide or above there's likely less confusion for how to bring the menu back.

The latter case might not seem likely, but it seemed reasonable to me if someone flips a small tablet from portrait to landscape mode so I left the button in. It is something to consider.

Step 5: The JavaScript

Hopefully the jQuery below is becoming familiar. Once again we'll intercept the click of either button and navigate the DOM to add or remove a class to the .inner div. With both buttons we need to move up a couple of containers to get to the header and so we'll use the parents() function. From there the .wrapper div is a sibling.

The .inner div is inside the .wrapper div and we can find it using the aptly named find() function.

The buttons control different panels so we do need to add and remove different classes. .btn-1 is tied to the menu. If the menu class is present on .inner we'll remove it. If it's not present we'll add it. Because the possibility exists that .more is present when .menu isn't we'll close that too.

For .btn-2 we do the same, except we reverse the menu and more classes.

$(document).ready(function() {
$('a.btn-1').click(function() {
if($(this).parents('header').siblings('.wrapper').find('.inner').hasClass('menu')){
$(this).parents('header').siblings('.wrapper').find('.inner').removeClass('menu');
} else {
$(this).parents('header').siblings('.wrapper').find('.inner').addClass('menu');
$(this).parents('header').siblings('.wrapper').find('.inner').removeClass('more');
}
return false;
});
$('a.btn-2').click(function() {
if($(this).parents('header').siblings('.wrapper').find('.inner').hasClass('more')){
$(this).parents('header').siblings('.wrapper').find('.inner').removeClass('more');
} else {
$(this).parents('header').siblings('.wrapper').find('.inner').addClass('more');
$(this).parents('header').siblings('.wrapper').find('.inner').removeClass('menu');
}
return false;
});
});

Thoughts

What's nice about this pattern is that each "panel" of content can be controlled independently and yet when one is already open a single button can both close it and open the other "panel."

However this pattern isn't really meant for a series of panels. It'll work best when you only have one piece of content off canvas on either side. You could also include a button that includes content that slides in from the top and another that slides content in from the bottom. More than one "panel" on any of the four sides is probably not a good idea with this pattern.

例子

Below are some examples of the sidebar+ nav pattern, where both sidebars open and close independent of each other. Note how the middle two examples have one sidebar sliding in from the top and a second on in from the side.

• Demo by Jason Weaver
• Variation where menu slides in from top. Demo by Jason Weaver
• Variation where menu slides in from top. Demo by Zurb
• Demo by Vince Allen - This demo has a css only fallback and uses a mouse out to close the sidebars

摘要

As we've seen from the first three tutorials in the series the patterns here are all patterns on a theme. With off canvas patterns some content is on screen and some off screen until requested. Here I only showed content off to the left or right, but the content could just as easily be off the top or bottom of the screen.

They all generally work the same. Off canvas content is placed off canvas usually through margins. When the content is positioned a left or right (or top or bottom) value can be adjusted to place the canvas off screen. Clicking different buttons adjusts these values to present different content on the screen and move other content off the screen.

These off canvas patterns are the last of the responsive patterns in this series. I hope you enjoyed is and the whole series. I didn't present every possible combination for where navigation or panels of content can move of hide or rearrange themselves. I tried instead to present all the basic methods for hiding and moving elements in the hopes that they would be easy enough to understand and you could take it from here.

We've rearranged menu items at the top of the page, hidden some while showing others, and converting a list of links into a select menu. We've fixed our menu to the bottom of the page and clicked to quickly get to it. We hid menus and revealed them in different ways on button clicks. And finally we placed menus and other content off canvas until we requested them.

We've also learned three different techniques to control click events using css pseudo selectors, the :target hack, the :checkbox hack, and the radio button hack. When css wasn't right we used jQuery to add and remove classes that represent the different states.

We also saw a lot of examples showing variations of all these patterns in demos and on live sites.

I hope you've enjoyed this tutorial, with any luck you'll feel more comfortable experimenting with these patterns and using them on live sites.

翻译自: https://webdesign.tutsplus.com/articles/examining-responsive-navigation-off-canvas-patterns--webdesign-11023

canvas画布响应式