Como criar: Links de navegação isôneticos

Aprenda a criar uma barra de navegação com links de navegação isôneticos.

Criar uma barra de navegação responsiva

Primeiro passo - Adicionar HTML：

/* Menu de navegação */
<div class="navbar">
  <a class="active" href="#">Home</a>
  <a href="#">Search</a>
  <a href="#">Contact</a>
  <a href="#">Login</a>
</div>

Segundo passo - Adicionar CSS：

/* Definir o estilo do menu de navegação */
.navbar {
  width: 100%;
  background-color: #555;
  overflow: auto;
}
/* Links de navegação */
.navbar a {
  float: left;
  padding: 12px;
  color: white;
  text-decoration: none;
  font-size: 17px;
  width: 25%; /* Quatro links de igual largura. Se você tiver dois links, use 50%, para três links, use 33.33%, e assim por diante. */
  text-align: center; /* Se você quiser centralizar o texto */
}
/* Adicionar cor de fundo ao passar o mouse */
.navbar a:hover {
  background-color: #000;
}
/* Definir o estilo do link atual/ativo */
.navbar a.active {
  background-color: #04AA6D;
}
/* Adicionar capacidade de resposta - Em telas com menos de 500 pixels, exibir links de navegação empilhados em vez de lado a lado */
@media screen and (max-width: 500px) {
  .navbar a {
    float: none;
    display: block;
    width: 100%;
    text-align: left; /* Se você desejar alinhar o texto à esquerda na tela pequena */
  }
}

Experimente você mesmo

Páginas relacionadas

Tutorial:Barra de navegação CSS