大同网站设计公司：如何使用CSS创建全宽度响应平铺菜单

全宽度瓷砖菜单是一个清晰的方式，显示您的网站的导航和提供端到端的覆盖，创造了一个非常丰满的效果为用户。在本教程中，我们将使其完全响应，并在末尾添加一些快速JavaScript，通过导航切换按钮在较小屏幕宽度上显示/隐藏导航。我们也将加入一些CSS 3转换，以获得额外的冲击。

构造菜单

我们的响应性平铺菜单是我们在…之前从未见过的。中封装的无序列表中的一些链接。nav标签。我也有一个导航切换按钮，它将显示在较小的屏幕上，允许用户随意显示/隐藏导航，也可以保存在屏幕上的房地产。下面看一下HTML：

<a href="#" class="nav-toggle">Toggle Navigation</a><nav class="cmn-tile-nav">
  <ul class="clearfix">
    <li class="colour-1"><a href="#">HTML</a></li>
    <li class="colour-2"><a href="#">CSS</a></li>
    <li class="colour-3"><a href="#">Sass</a></li>
    <li class="colour-4"><a href="#">JS</a></li>
    <li class="colour-5"><a href="#">PHP</a></li>
    <li class="colour-6"><a href="#">Ruby</a></li>
    <li class="colour-7"><a href="#">iOS</a></li>
    <li class="colour-8"><a href="#">Android</a></li>
  </ul></nav>

现在，让我们深入研究我们开始的CSS。因为我采用的是移动第一的方法，我们的导航一开始是隐藏的。当一个阶级.open被添加到其中，它将显示。我们重置无序列表，让列表元素显示为块元素。他们唯一的转变就是背景颜色。

我们的实际链接元素也将是块元素，以便它们很好地填充空间，并且它们将在background和transform财产。

首先，当我们在链接元素上盘旋时，我们希望它们能够顺利地向右移动。这是通过应用transform财产上:hover在a元素。我们不希望它导致水平滚动条或任何意外的布局中断，所以li有.overflow属性设置为隐藏。我们也给每个li和a元素的相同集合。background属性处于正常状态和悬停状态。所以，对所有的8块瓷砖都重复这一点(我只为下面的一张展示了它)。下面是CSS：

/* nav styles */nav.cmn-tile-nav {
  display: none;}nav.cmn-tile-nav.open {
  display: block;}nav.cmn-tile-nav ul {
  list-style: none;}nav.cmn-tile-nav li {
  display: block;
  overflow: hidden;
  transition: background 0.3s;}nav.cmn-tile-nav a {
  display: block;
  padding: 20px;
  color: #fff;
  transition: background 0.3s, transform 0.3s;}nav.cmn-tile-nav a:hover {
  transform: translateX(20px);}/* repeat this section for the 8 different colours *//* --- BEGIN --- */nav.cmn-tile-nav li.colour-1,nav.cmn-tile-nav li.colour-1 a {
  background-color: #28aadc;}nav.cmn-tile-nav li.colour-1:hover,nav.cmn-tile-nav li.colour-1:hover a {
  background-color: #166888;}/* --- END --- *//* smoother transitions */nav.cmn-tile-nav li,nav.cmn-tile-nav a {
  transform: translate3d(0, 0, 0);

媒体查询

现在，让我们大同网站设计公司添加一些媒体查询到我们的设计。对于480 px的第一个断点，我们将自动显示导航，而不是最初隐藏它。我们的瓷砖将分别为原始宽度的50%并向左浮动，这是通过以下CSS实现的：

@media all and (min-width: 480px) {
  nav.cmn-tile-nav {
    display: block;
  }
  nav.cmn-tile-nav li {
    width: 50%;
    float: left;
  }}

对于768 px的第二个断点，我们的瓷砖将是原始宽度的25%，显示2行4行。我们将我们的文本对齐到中心，并移动垫一点。这一次，我们将把文本向上一点翻译，而不是在悬停时将文本翻译到左边。下面是CSS：

@media all and (min-width: 768px) {
  nav.cmn-tile-nav li {
    width: 25%;
  }
  nav.cmn-tile-nav a {
    text-align: center;
    padding: 60px 20px 20px 20px;
  }
  nav.cmn-tile-nav a:hover {
    transform: translateX(0);
    transform: translateY(-20px);
  }}

对于我们在1024 px的第三个也是最后一个断点，我们会稍微修改一下。瓷砖将显示在一行中。这是一个一行8个瓷砖，宽度为12.5%。我们将重置我们li元素，并在悬停时将链接推低一点。它会给人一种错觉，即盒子在悬停时会变得更高，而不会直接打断下面的水流。下面是CSS：

@media all and (min-width: 1024px) {
  nav.cmn-tile-nav li {
    overflow: visible;
    width: 12.5%;
  }
  nav.cmn-tile-nav a {
    padding: 80px 20px 20px 20px;
  }
  nav.cmn-tile-nav a:hover {
    transform: translateY(20px);
  }}

导航按钮

我们的导航切换按钮采取一些简单的样式匹配的瓷砖。在第一个媒体查询断点(480 Px)，我们隐藏它。这是因为导航在此断点自动显示。下面是CSS：

a.nav-toggle {
  display: block;
  margin-bottom: 20px;
  padding: 20px;
  background-color: #dce6f0;
  color: #646464;
  text-align: center;}a.nav-toggle:hover {
  background-color: #c8d2dc;}/* the breakpoint same as above */@media all and (min-width: 480px) {
  a.nav-toggle {
    display: none;
  }}

一些基本的JavaScript

我还实现了一些基本的Javascript，只是为了使导航切换工作。我在用分类js要轻松添加和删除类，请执行以下操作。下面是：

(function(window){

  var nav = document.querySelector("nav.cmn-tile-nav"),
      nav_toggle = document.querySelector("a.nav-toggle");

  nav_toggle.addEventListener("click", function(e){
    e.preventDefault();
    classie.toggle(nav, "open");
  });})(window);

包起来

大同网站设计公司有了当前的CSS技术，我们可以轻松地实现这样的布局。我们还可以通过一些CSS 3转换向它添加一些操作。别停在那儿，…试着让瓷砖更有吸引力。添加一些图标，一些边框，并使用不同的动画技术。有很多可能性！