Menu de Navegação com Flexbox Css

Menu de Navegação com Flexbox Css

Veja neste artigo vamos criar um Menu de Navegação com Flexbox estilizado com e html Css.

Estrutura Base que vamos usar no projeto!

A estrutura base do nosso pequeno projeto para projetar o Menu Flexbox vai ser composta por apenas dois arquivos, por ser apenas dois arquivos, não será algo muito complexo de realizar, o primeiro arquivo será o index.html e o segundo style.css.

Portanto, crie uma pasta CSS, para inserir o arquivo style.css, a mesma regra serve se você estiver usando scripts crie pastas para organizar o seu projeto seja qual for organização é fundamental para organização e manutenção no futuro.

Nesta seção, projetaremos uma estrutura simples nas tags <nav>, <ul>, <li> e a tag <a> para inserirmos o link de destino. 

Essa tag que usaremos para criar o Menu Flexbox.

A primeira coisa que você deve fazer é colocar todas as tags básicas que são essenciais independente de qual projeto esteja sendo desenvolvido.

Nesta seção, usaremos algumas as tags HTML para montar a estrutura do Menu.

Estrutura Código Html:

    <nav class="menu">
        
        <ul>
          
          <li><a href="#">Home</a></li>
          <li><a href="#">Sobre</a></li>
          <li><a href="#">Serviços</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">Contato</a></li>

        </ul>

    </nav> 

Estrutura Código CSS

Para conseguirmos o efeito desejado no Menu, vamos adicionar algumas propriedades CSS para as tags que foram colocadas na sessão HTML que usamos.

Portanto, você pode criar um arquivo style.css, coloque todo o código que se encontra logo mais abaixo.

Nesta seção, usaremos algumas propriedades CSS para estilizar o menu com o efeito desejado.

.menu ul {

  list-style: none;
  justify-content: center;
  align-items: center;
  display: flex;
  background: #005cb9;
}

@media all and (max-width: 768px) {

  .menu ul    { flex-direction: column; }
  .menu ul li { width:100%; border-bottom: 1px #6b95bf solid; }
  .menu ul a  { width:100%; text-align:center; }

}

.menu ul a {

  padding: 1em 2em;
  position: relative;
  display: inline-block;
  color: #f5f5f5;
  font-weight: bold;
  text-decoration: none;
}

.menu ul a:hover { 

  background-color: #00bef8;
  color: #fff; 

}

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

Veja o Resultado baixo!

Menu de Navegação com Flexbox Css

Baixar Código Veja Funcionando

Neste artigo, você aprendeu o passo a passo de como estilizar Menu de Navegação com Flexbox.

existem diversas formas de estilizar Menus com efeitos, cores, formas e animações diferentes.

Fica o desafio para você tentar criar um novo design do zero a criatividade é sua.

faça um exemplo e comente aqui em baixo e deixe um link do seu desafio.