Aqui nesse artigo aplicarei em um menu HTML zebrado usando CSS para alternar as cores de fundo dos itens da lista. Mas você pode modificar qualquer coisa do item, seja a cor da fonte, a familia da fonte, o tamanho da fonte...
Vantagens de usar o efeito Zebrado em um menu HTML?
- Leitura Facilitada: Um menu zebrado melhora a legibilidade ao destacar alternadamente os itens, ajudando o usuário a manter o foco e evitando a perda de raciocínio durante a leitura.
- Organização Visual: A estrutura zebrada proporciona uma organização visual clara e eficiente, tornando mais fácil identificar e compreender tópicos importantes à distância, o que reforça a comunicação da informação.
- SEO: Uma estrutura bem organizada e visualmente acessível é valorizada pelos motores de busca, como o Google, contribuindo para uma melhor experiência do usuário e potencialmente melhorando o ranqueamento da página.
<style>
/* Estilo básico para a lista */
ul.zebrado {
list-style-type: none; /* Remove os marcadores padrão da lista */
padding: 0;
margin: 0;
}
/* Estilo para os itens da lista */
ul.zebrado li {
padding: 10px;
font-size: 18px;
}
/* Estilo zebrado: cor de fundo para os itens ímpares */
ul.zebrado li:nth-child(odd) {
background-color: #f0f0f0; /* Cor X (por exemplo, um cinza claro) */
}
/* Estilo zebrado: cor de fundo para os itens pares */
ul.zebrado li:nth-child(even) {
background-color: #d0eaff; /* Cor Y (por exemplo, um azul claro) */
}
</style>
<ul class="zebrado">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
Menu Zebrado
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
- Item 6
Explicação:
- ul.zebrado: Aplica o estilo à lista com a classe "zebrado".
- nth-child(odd): Aplica o estilo aos itens ímpares da lista.
- nth-child(even): Aplica o estilo aos itens pares da lista.
- background-color: Define a cor de fundo para cada item.
Esse código cria um menu zebrado onde os itens ímpares têm um fundo de cor X e os itens pares têm um fundo de cor Y. Você pode ajustar as cores para o que preferir.
Tags:
Programação
