Menu Responsivo Colorido

Menu Responsivo Colorido

Neste tutorial vamos fazer um mini menu responsivo colorido para hotsite.

Vamos adicionar o Html:

<nav class="menu single-menu">

  <ul>
    
    <li>
      <a href="#" title="Home">
        <div class="icon"><i class="icofont-coffee-mug"></i></div>
          <div class="text">Cafeteria <span>Expresso</span>
        </div>
      </a>
    </li>

    <li>
      <a href="#" title="Home">
        <div class="icon"><i class="icofont-sushi"></i></div>
          <div class="text">Restaurante <span>Japones</span>
        </div>
      </a>
    </li>

    <li>
      <a href="#" title="Home">
        <div class="icon"><i class="icofont-fast-food"></i></div>
          <div class="text">Lanches <span>Fastfood</span>
        </div>
      </a>
    </li>

    <li>
      <a href="#" title="Home">
        <div class="icon"><i class="icofont-pizza-slice"></i></div>
          <div class="text">Pizzaria <span>Entregas</span>
        </div>
      </a>
    </li>

  </ul>

</nav>

Vamos Adiconar o Css:

.menu ul {

  list-style-type: none;
  padding: 0;
  margin: 0;
  border-top:1px #eaeaea solid; 

}

.menu ul li a {
  display: block;
  text-decoration: none;
  color:#4c4c4c;
  padding: 0.5em 0.8em;
  transition:0.3s; 
}

.menu ul li:hover:nth-child(1) { background-color: #955252; }
.menu ul li:hover:nth-child(2) { background-color: #b51515; }
.menu ul li:hover:nth-child(3) { background-color: #fd7700; }
.menu ul li:hover:nth-child(4) { background-color: #fde100; }


.menu ul li a:hover, .menu ul li a :focus {

   color:#fff;  

}


/*single Menu*/
.single-menu ul li a {
  display: flex;
  justify-content: flex-start;
  width: 100%;
}

.single-menu ul li a .icon {

  font-size: 1.8em;
  flex: 0 0 1.5em;
  margin-right: 4px;

}

.single-menu ul li .text {
  font-size: 1.8em;
}

.single-menu ul li .text span {

  font-size: 40%;
  display: block;
  font-weight: lighter;

}

@media screen and (min-width: 60em) {

  .single-menu ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .single-menu ul li {
    flex: 1 0 1.5em;
    display: flex;
  }

}

Veja o Resultado!

Baixar Código Veja Funcionando