canvas画布响应式_检查响应式导航：离开画布模式

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, #4b47