css画布背景_如何使用CSS网格构建画布外导航

css画布背景

画布外模式是响应式导航的经典方法。 当视口足够小以至于可以保证时，笨拙的导航将隐藏在“画布外”，并且只有在切换后才可以看到。

今天，我们将构建一个脱离画布的导航，使用CSS进行切换（不需要JavaScript），并使用我们的好朋友Grid来形成页面结构。 这是我们正在努力的全页演示 。

基本页面结构

让我们从建立一个基本页面开始； 我们的目标是这样的：

这是一个非常典型的语义页面结构。 您会看到，对于小视口，所有内容都保留在同一列中，然后一边移到较大的屏幕上。 为了清楚起见， <nav>元素以蓝色突出显示。

这是我们的标记：

<header role="banner">
    <h1>Header</h1>
</header>
  
<nav id="nav" role="navigation">    
    <ul>
        <li>
            <a href="#">Item 1</a>
        </li>
        <li>
            <a href="#">Item 2</a>
        </li>
        <li>
            <a href="#">Item 3</a>
        </li>
    </ul>
</nav>
  
<section role="main">
    <article>
        <h2>Article</h2>
        <p>Curabitur orci lacus, auctor ut facilisis nec, ultricies quis nibh. Phasellus id diam sollicitudin, malesuada turpis id, gravida erat. Maecenas placerat elit vel hendrerit convallis. Sed in mauris ut justo vulputate viverra feugiat ac dui. Fusce feugiat arcu in vehicula vehicula. Donec varius justo at nulla aliquet volutpat.</p> 
        <p>Ut id rutrum eros. Nulla tristique, magna et mattis vulputate, mi eros suscipit turpis, nec bibendum turpis nunc feugiat sapien. Nunc arcu est, lacinia id diam quis, sagittis euismod neque. Nullam fringilla velit sed porta gravida. Proin eu vulputate libero. Ut a lacinia enim. Etiam venenatis mauris et orci tempor congue. Sed tempor eros et ultricies congue. Aenean sed efficitur orci. Nulla vel tempus mi.</p>
        <p>Ut cursus suscipit augue, id sagittis nibh faucibus eget. Etiam suscipit ipsum eu augue ultricies, at rhoncus mi faucibus. In et tellus vitae leo scelerisque fringilla nec at nunc.</p>
    </article>
</section>
  
<aside>
    <h3>Aside</h3>
</aside>
  
<footer>
    <h3>Footer</h3>
</footer>

现在让我们添加一些视觉样式和一些网格规则。

Gettin的网格状

首先将我们所有的结构元素包装在某种包含元素中–这就是我们的Grid容器。 我正在使用<div class="container"></div> 。

现在添加一些基本的网格样式：

.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 10px;
}

在这里，我们声明容器应display: grid; ，它应该只有一列一个小数单位的列（此时，这不是绝对必要的，但我们添加了它是为了更彻底），并且所有网格项之间的间距应为10px。

接下来，添加一些视觉样式以使事情更清晰：

.container > * {
  color: #353535;
  font-size: 1.2em;
  line-height: 1.5;
  padding: 20px;
  background: #d0cfc5;
}

.container nav {
  background: #136fd2;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav a {
  color: #d0cfc5
}

nav a:hover {
  text-decoration: none;
}

使其响应

让我们添加一个媒体查询，以便当视口达到一定大小（放600px）时，布局会发生变化。

@media only screen and (min-width: 600px) {
    
  /* grid */
  .container {
    grid-template-columns: repeat(4, 1fr);
  }
  
  /* specific item styles */

  .container header,
  .container nav,
  .container footer {
    grid-column: span 4;
  }
  .container section {
    grid-column: span 3;
  }
  
}

因此，现在在更大的屏幕上，网格声明更改为grid-template-columns: repeat(4, 1fr); 。 这给了我们四列相等的宽度，因此我们必须声明我们想要每个结构元素的宽度。 该header ， nav和footer都将跨度4（横跨四列跨度），而section将横跨只有三个跨越，留下一列的空白，为aside自动填写。

最后，一些样式可以改变导航的外观：

/* nav styles */
  nav ul li {
    display: inline-block;
    padding: 0 20px 0 0;
  }

到目前为止，这里是：

在画布上冒险

这是CSS定位如何仍然可以在结构元素上（即使在已声明的Grid中）仍然完美的示例。 我们将抓住我们的导航，将其从文档流中删除，并将其放置在画布之外。 其他网格项将恰好就位。

从另一个媒体查询开始。 我们已经有了min-width查询，但是这次我们只想将元素的样式设置为max-width 。 直到视口达到魔法600像素为止，我们都希望将导航栏放置在画布之外：

@media only screen and (max-width: 599px) {
  
    #nav {
        position: fixed; /* or choose `absolute` depending on desired behavior*/
        top: 0;
        bottom: 0;
        width: 300px;
        left: -340px;
        transition: transform .3s ease-in-out;
    }
  
}

我们为导航指定了固定的宽度，将其定位到足以完全隐藏它的位置。

我们使用了fixed位置，但您也可以在此处使用absolute ，这取决于您是否希望导航窗口随窗口滚动。

您还会注意到transition规则，一旦我们构建了一些切换控件，该规则就会生效。 我们将使用transform将导航面板转换回视图。 感谢Rachel Nabors和Joe Zimmerman提醒我，对于动画，使用transform总是比position ！

切换

使导航消失后，我们现在需要一些控件以在需要时将其恢复。 让我们添加一个触发它的链接，以及一个再次关闭它的链接。

将此添加到标题：

<a class="toggle open" href="#nav">open</a>

这到导航：

<a class="toggle close" href="#">close</a>
<!-- you might also want to use a “×” -->

我们不需要打开链接在大屏幕上可见，因此我们将.toggle元素隐藏在最小宽度媒体查询中：

.toggle {
      display: none;
    }

：目标

上述链接中重要的是存在“片段标识符”（href中的#nav ）。 浏览器使用这些标识符直接导航到页面上的特定元素。 在这种情况下，我们将定位与id“ nav”匹配的任何元素，一旦定位成功，就可以使用:target伪类对其进行样式设置。 无需JavaScript！

注意 ：以这种方式使用片段标识符将导致每次单击条目时将其添加到浏览器历史记录中。 这可能不是您的用户想要的结果！ 感谢Joe Zimmerman指出这一点。

将以下内容添加到我们的最大宽度媒体查询中：

#nav:target {
      transform: translateX(340px);
    }

而已！ 这是我们的切换。

这是我们现在拥有的：

您需要看一下整页的演示，以充分了解它在做什么。

结论

我们完成了！ 我一直将样式降至最低，以免妨碍您的使用，但您可以发疯并随意调整外观。

您可能还希望使用JavaScript切换功能，而不是:target ，在这种情况下，您也已准备就绪，可以完成所有工作。

我希望您喜欢这个小的Grid练习，敬请期待更多！

翻译自: https://webdesign.tutsplus.com/tutorials/how-to-build-an-off-canvas-navigation-with-css-grid--cms-28191

css画布背景