Uma barra de navegação fixa, também chamada de barra de navegação “fixa”, é uma barra de ferramentas que permanece no lugar enquanto o usuário está rolando a página da web. É um padrão de design de navegação de site comumente usado para exibir o menu de navegação principal de um site , bem como outros componentes de interface essenciais, como uma caixa de pesquisa, botões de mídia social e notificações. O padrão de design garante que componentes importantes da interface sejam facilmente visualizados e acessíveis, independentemente de onde o usuário esteja atualmente em uma página da Web.
Neste tutorial, mostrarei uma técnica CSS simples para implementar uma barra de navegação fixa horizontal superior.
Exemplos
Antes de começarmos com o tutorial, provavelmente é melhor olharmos para alguns sites que têm barras de navegação fixas, apenas para ter certeza de que estamos na mesma página e para mostrar aplicações práticas do padrão de design. Abaixo estão alguns exemplos de sites reais.
Niice possui uma barra de navegação fixa que contém uma caixa de pesquisa e o menu de navegação do site. Enquanto procura inspiração em designs, você pode filtrá-los rapidamente com o mínimo de interrupção em sua experiência simplesmente usando a caixa de pesquisa na parte superior da tela. 99U , uma publicação online, possui uma barra de navegação fixa onde fica o menu de navegação do site.
Isso dá aos usuários acesso conveniente ao menu do site em qualquer ponto da experiência de leitura. O site Forbes.com emprega uma barra de navegação fixa para disponibilizar seu menu, recurso de pesquisa e widget de login em qualquer lugar da experiência de leitura. A barra de navegação fixa ajuda as pessoas a pular rapidamente para outro artigo depois de concluir a leitura do artigo atual.
A barra de navegação fixa pode ter o potencial de reduzir as taxas de rejeição porque os usuários recebem constantemente um menu de outros artigos para ler. Conforme mostrado nos exemplos acima, o padrão de design de navegação funciona bem em páginas da Web que possuem muitas coisas. Uma barra de navegação fixa é uma boa maneira de minimizar o atraso e a interrupção causados pela mudança para uma nova tarefa (pesquisar no site, fazer login ou mover para outras seções do site).
O design pattern, em essência, melhora a usabilidade através da aplicação da Lei de Fitts .
Criando uma barra de navegação fixa
Agora que examinamos um punhado de aplicativos do mundo real para o padrão de design da barra de navegação fixa, além de discutir brevemente como ele pode melhorar a usabilidade, mostrarei um método de implementação rápido e fácil que requer apenas HTML e CSS. Aqui está uma página de demonstração que você pode explorar e revisar primeiro.
HTML
A marcação necessária é mínima, apenas um elemento de nível de bloco que conterá o conteúdo da barra de navegação fixa.
<nav class=”fixed-nav-bar”> <!– Conteúdo da barra de navegação fixa –> </nav>
Para semântica e potencial de interoperabilidade aprimorado com serviços da Web de terceiros, como robôs de mecanismos de pesquisa interessados em encontrar e entender o IA do seu site, um navelemento é uma boa opção aqui. O navelemento também é um elemento de nível de bloco por padrão, o que nos poupa uma linha de CSS (cereja do bolo).
No entanto, se você preferir não usar o navelemento, qualquer elemento de nível de bloco servirá, seja um elemento de nível de bloco natural como a divou um elemento embutido como um que tenha uma propriedade/valor CSS spanatribuído .display: block
CSS
Aqui está a regra de estilo que faz com que a barra de navegação fixa permaneça no lugar.
.fixed-nav-bar { posição: fixo; topo: 0; esquerda: 0; índice z: 9999; largura: 100%; altura: 50px; cor de fundo: #00a087; }
Anteriormente, demos ao nosso elemento HTML um classatributo de fixed-nav-barpara que possamos aplicar a regra de estilo acima a ele.
As três últimas propriedades ( width, height, e background-color) são variáveis; altere seus valores de acordo com suas necessidades. Vamos falar mais detalhadamente sobre as quatro principais propriedades CSS responsáveis pela mágica.
posição: fixa;
Dar à positionpropriedade um valor de fixedposiciona a barra em relação à viewport.
Essa declaração de propriedade permite que a barra permaneça no lugar mesmo quando o usuário estiver rolando o documento.
topo: 0; esquerda: 0; direita: 0;
Definir as propriedades top, lefte rightpara 0evita margens/preenchimentos não intencionais na parte superior e nas laterais da barra de navegação fixa. Dica: Se você preferir ter uma barra fixa persistente na parte inferior da janela de visualização, que é outro padrão de design comum, basta alterar top: 0para bottom: 0.
índice z: 9999;
Um valor excepcionalmente alto z-indexé usado para reduzir significativamente a possibilidade de um elemento HTML ser renderizado na parte superior da barra de navegação fixa, desde que não haja outros z-indexvalores superiores a 9999. Isso é tudo o que há para isso.
Observação
Na demonstração, há também um menu de navegação responsivo somente CSS muito rudimentar.
Este menu é apenas uma prova de conceito e não está pronto para produção . Como o foco deste tutorial é construir uma barra de navegação fixa, que pode conter diferentes tipos de menus e outros componentes de interface, não discutirei essa parte da demonstração. Vou deixar você explorar o código-fonte se quiser ver como essa parte da demonstração funciona (se estiver com problemas ou se tiver dúvidas sobre isso, envie-me um tweet e ficarei feliz para ajudar).
