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

2019.05.28 大同网站设计公司

166

全宽度瓷砖菜单是一个清晰的方式,显示您的网站的导航和提供端到端的覆盖,创造了一个非常丰满的效果为用户。在本教程中,我们将使其完全响应,并在末尾添加一些快速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被添加到其中,它将显示。我们重置无序列表,让列表元素显示为块元素。他们唯一的转变就是背景颜色。

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

首先,当我们在链接元素上盘旋时,我们希望它们能够顺利地向右移动。这是通过应用transform财产上:hovera元素。我们不希望它导致水平滚动条或任何意外的布局中断,所以li有.overflow属性设置为隐藏。我们也给每个lia元素的相同集合。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转换向它添加一些操作。别停在那儿,…试着让瓷砖更有吸引力。添加一些图标,一些边框,并使用不同的动画技术。有很多可能性!


最新案例

寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监

TOP