28 de ago de 2014

Menu Horizontal com CSS e HTML

Imagem: Love From Ginger
Olá, gente! Decidi finalmente trazer um post sobre CSS & HTML, que é um assunto que eu gosto muito e considero um dos meus hobbies. Agora, vamos aprender como fazer um menu simples e bonito com códigos bem simples.

Coloque o código a seguir onde você quiser que o menu apareça:
<div class='menu'>
<a href='ENDEREÇO DO LINK'>NOME DO LINK</a>
<a href='ENDEREÇO DO LINK'>NOME DO LINK</a>
<a href='ENDEREÇO DO LINK'>NOME DO LINK</a>
<a href='ENDEREÇO DO LINK'>NOME DO LINK</a>
</div>
 Caso você queira mais links no menu, é só repetir <a href='ENDEREÇO DO LINK'>NOME DO LINK</a> quantas vezes quiser.

Agora, coloque esse link no seu arquivo CSS ou entre as tags de estilo (<style> e </style>):
.menu {
text-align: center;
padding: 15px;
font-family: 'Calibri';
font-size: 16px;
text-transform: uppercase;
letter-spacing: 1px;
}
.menu a {
color: #faf6ed;
padding: 10px;
}
Entendendo o código:

a.  Text-Align: alinhamento do menu.
b. Padding: espaço entre os links.
c. Font-Family e Font-Size: fonte e tamanho da mesma.
d. Text-Transform: define se as letras são todas maiúsculas (uppercase) ou minúsculas (lowercase).
e. Letter-Spacing: espaçamento entre as letras.

É super fácil de se fazer, e com um pouco de prática você consegue fazer sem código algum. Qualquer dúvida, deixe nos comentários!

Nenhum comentário:

Postar um comentário

Olá! Quando comentar, observe o seguinte:
- Comentários como "Amei! Seguindo, segue de volta!" não serão aceitos na moderação. Comente pelo menos alguma coisa sobre o post, certo?
- Você pode e deve deixar o link do seu blog para que eu retribua a visita. Lembre-se de não colocar o http:// ou seu comentário será considerado spam pelo Google.
- Tags são aceitas, mas não garanto que farei todas.