Menu flexbox com html e css

Menu flexbox com html e css

O que é Flexbox ?

O CSS Flexible Box Layout, conhecido como Flexbox, é um modelo de layout da Web CSS3. Está no estágio de recomendação de candidatos do W3C. O layout flexível permite que os elementos responsivos dentro de um contêiner sejam organizados automaticamente, dependendo do tamanho da tela

Neste tutorial vamos criar um Menu flexbox com HTML e CSS.

Nesta seção, projetaremos uma estrutura simples na tag <ul>, <li> e a <a> para inserir o link de destino. 

Essas são as tags que usaremos para criar o nosso Menu flexbox.

Vamos Adicionar o HTML

       <ul>
                
          <li><a href="#" title="Home">Home</a></li>
          <li><a href="#" title="Sobre">Sobre</a></li>
          <li><a href="#" title="Serviços">Serviços</a></li>
          <li><a href="#" title="Artigos">Artigos</a></li>
          <li><a href="#" title="Contato">Contato</a></li>
                
       </ul>

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para estilizar o  nosso menu.

ul {

  list-style: none;
  justify-content: center;
  align-items: center;
  display: flex;
  background-color: #0093ff;

}

@media all and (max-width: 480px) {
  
  ul { flex-direction: column; }

}

ul a  {
  
        padding: 1em 2em;
        position: relative;
        display: inline-block;
        font-family: 'open_sansregular';
        font-weight: bold;
        color: #ffffff;
        text-decoration: none;
        transition: 0.3s;
      }

ul a:hover {
  
    background: #242424;

}

Combinando as Duas seções acima Html e Css temos o seguinte Resultado!

Veja o Resultado baixo!

Baixar Código Veja Funcionando