O Flexbox é a melhor opção para criar uma barra de navegação, especialmente quando se trata de capacidade de resposta. O Flexbox facilita o alinhamento dos elementos dentro do contêiner, fornece espaçamento e permite automaticamente itens para adotar alterações de acordo com o espaço disponível. Devido à sua compatibilidade entre navegadores, o estilo permanece o mesmo em várias versões de navegadores.
Este artigo demonstra como criar uma barra de navegação usando o layout do Flexbox, que incluirá:
Como o Flexbox pode ser usado para criar uma barra de navegação?
A barra de navegação permite ao usuário percorrer várias páginas da web no site. Ele contém uma barra de pesquisa, ícones sociais e muito mais. Siga as etapas detalhadas abaixo para criar uma barra de navegação usando o layout do Flexbox:
Etapa 1: estrutura da barra de navegação
O primeiro passo é criar uma estrutura para a barra de navegação usando HTML. Por exemplo, o Navbar contém “logotipo "," itens de menu "e" barra de pesquisa”Com um envio“botão”:
A explicação do código acima é a seguinte:
Depois de executar o código acima, a página da web aparece assim:
A saída mostra que a estrutura da barra naval foi exibida na tela.
Etapa 2: Estilo de Navbar and Logo
Primeiro, selecione o “Nav”Seletor de elementos que seleciona o“”Tag do arquivo html. Depois disso, selecione a imagem do logotipo e div, acessando -a através do “Logos”Class e aplique propriedades CSS como abaixo:
NAVA explicação do trecho de código acima é:
Após a execução do código acima, a página da web se parece com o seguinte:
A saída acima exibe que o layout flex é definido no “Nav”Tag, e a imagem do logotipo está definida no lado esquerdo.
Etapa 3: Estilo de itens de menu
Para aplicar estilos nos botões do menu, selecione as classes DIV correspondentes e aplique as seguintes propriedades CSS a eles:
.cardápioA explicação do código acima é:
Depois de adicionar o código acima, a página da web agora aparece assim:
A saída exibe que os itens do menu agora estão denominados.
Etapa 4: estilo de botão e botão de pesquisa
Usando seletores de elementos diretos, selecione o “entrada" e "botão”Elementos HTML no arquivo CSS. E aplique as seguintes propriedades CSS para aprimorar a visibilidade do usuário:
entradaA explicação do código acima é dada abaixo:
Depois de executar o trecho de código acima, a saída se parece com a seguinte:
A saída exibe que a barra de navegação agora é criada usando com sucesso o Flexbox.
Conclusão
Para criar uma barra de navegação usando o Flexbox Definir o “flex" e "espaço entre”Valores para o“mostrar"E" Justify-Content "Properties dentro das"" marcação. Depois disso, forneça “flex”Como um valor para a propriedade Display para a lista não ordenada“”. No final, as propriedades do CSS são aplicadas para estilizar os elementos html que residem dentro do “" marcação. Este artigo explicou o uso do Flexbox para criar uma barra de navegação.