Todo website bom que se preze,
tem o seu menu principal, que normalmente fica localizado na parte superior,
como uma barra horizontal que vai de um lado a outro do site.
Existe também um outro tipo de menu: o menu
vertical, a diferença do menu vertical é que este fica em um dos lados do site,
apresentando os itens do menu um abaixo do outro, como mostra a imagem ao lado.
Esse menu é responsável por fazer
com que haja uma boa navegação entre as páginas do site, prevenindo que o
usuário tenha que digitar ou descobrir o endereço daquela página para ter
acesso a ela.
Abaixo teremos algumas dicas, e
aprenderemos como criar um menu básico utilizando HTML e CSS
Escolhendo referência para o seu menu
Antes de começarmos a criar,
precisamos ter em mente o que pretendemos fazer. É um menu arredondado? Vai ter
uma barra de fundo? Vai ser largura fixa? Qual fonte ficaria melhor?
Geralmente quando eu vou fazer um
novo menu principal, eu procuro algumas referências do que eu poderia criar.
Colocando algumas palavras-chave
no buscador de imagem como “menu horizontal” ou “menu vertical”, a gente já pode
visualizar alguns exemplos e começar a ter ideia do que faremos.
Pesquisando o termo relativo, você vai encontrar muitas
referências.
Após encontrar a referência
perfeita para o menu que você pretende criar, é hora de decidir algumas coisas.
É um menu arredondado? Existe um problema de compatibilidade entre
os navegadores, alguns interpretam alguns comandos especiais, enquanto outros
não. Por isso tome cuidado ao utilizar muitos comandos de CSS que você não
conhece. Visualize seu projeto em todos os navegadores que tiver.
Menu arredondado nem sempre fica bom e compativel com todos
os navegadores.
Vai ter barra de fundo? Barra de fundo nada mais é do que um “contêiner”
decorado, onde todos os itens do menu ficam dentro.
Vai ser largura fixa? Os itens do menu terão largura fixa? Ou serão
de largura dinâmica (dependendo da quantidade dos caracteres do item)?
Qual fonte ficaria melhor? Tome cuidado com as fontes que escolhe. Nem
todos os browsers e sistemas operacionais as reconhecem, por isso utilize o
comando “font-family” quando for escrever seu CSS. Confira aqui uma lista de
fontes seguras e veja qual se adequa melhor ao seu novo menu.
Programando menu básico com HTML e CSS
O primeiro passo é organizar os
arquivos no diretório FTP ou no seu diretório de servidor local (Xampp,
WMServerTools, etc.), como nosso exemplo é apenas HTML e CSS, não necessitamos
de servidor.
Primeiramente criaremos um
diretório para guardar os arquivos do nosso projeto.
Agora criaremos dois arquivos, um
será chamado de “menu.html” e o outro será chamado de “estilo.css”.
Agora prepare-se para colocarmos
a mão na massa. Utilizando o seu editor de texto favorito, vamos escrever a
estrutura básica – cabeçalho e rodapé - do nosso arquivo “menu.html”:
1 2 3 4 5 6 7 8 | <link rel="stylesheet" type="text/css" href="estilo.css"/> <ul class="menu_principal"> <li><a href="menu.html">Home</a></li> <li><a href="#">Downloads</a></li> <li><a href="#">Contato</a></li> <li><a href="#">Sobre Nós</a></li> </ul> |
Salve o código acima
e execute o arquivo dando um duplo clique sobre ele:
Sim, eu sei que isso não parece
nem um pouco com um menu principal, mas o que acabamos de escrever foi a
estrutura HTML, essa estrutura é responsável por criar os elementos no browser,
nós ainda precisamos estilizar estes elementos para que pareçam um menu, e é aí
que entra o CSS!
Na nossa folha de estilos, utilizaremos comandos do CSS1 e
CSS2, que é compatível com todos os navegadores modernos. Mão na massa!
1 2 3 4 5 6 7 8 9 10 11 | .menu_principal { display:list-item; background: #0BDDFF; } .menu_principal li { float: left; list-style-type: none; } |
E vamos ver como está ficando...
Particularmente eu
adoro a cor azul claro, você pode colocar a cor que você quiser no parâmetro do
comando “background-color”. Mas isso ainda não se parece com um menu,
precisamos estilizar mais algumas coisas ainda! Veja só:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | .menu_principal { /* removeremos todas as formatações da classe menu_principal */ } .menu_principal li { float: left; list-style-type: none; } /* decoraremos os links */ .menu_principal li>a { background-color: #49D7FE; display: block; padding: 8px 8px; text-decoration: none; color: #fff; } .menu_principal li>a:hover { background-color: #39C0FF; } |
E teremos isso:
Sim, eu sei, não é lá o menu mais
sofisticado do mundo, mas com base neste simples modelo, você vai poder criar
muitos outros, por que na verdade o que vai mudar muito é o CSS, o HTML será o
mesmo. vamos alterar um pouco o CSS.
Primeiramente iremos retirar a
propriedade “background-color” do nosso link, modificaremos a nossa UL
principal, colocaremos o background nela, e teremos uma barra horizontal, veja!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | /* adicionaremos o display, padding, background-color e width */ /* na nossa UL principal */ .menu_principal { display: table; padding: 0; background-color: #0BDDFF; width: 100%; } /* e removeremos o background-color daqui */ .menu_principal li>a { display: block; padding: 8px 8px; text-decoration: none; color: #fff; } |
Agora é só fazer o
que a sua imaginação permitir!
Isso é um menu básico, a partir
daí você poderá fazer outros menus, com borda, sem borda, hover, sublinhado, e
por aí vai. Na próxima semana você vai aprender como fazer menus avançados com
HTML e CSS, que incluem imagens, efeitos modernos, e etc.
Outras maneiras de ter um menu
Caso você ache que não leva jeito pra essas coisas – o que
leva tempo, dedicação e paciência pra fazer algo “espetacular” – existem
algumas ferramentas online que auxiliam na criação de menus.
Os menus criados
nesses sites ficam com uma cara bem profissional, ideal para quem não tem muita
experiência em criar os menus complexos utilizando código, nesses sites, você
escolhe o modelo, as cores, e depois salva os arquivos necessários, aí é só
incluir o CSS e colocar o HTML do menu no seu site que fica perfeito!
Confira dois sites que são ótimos para ter o seu menu pronto
de dar inveja!
·
Menucool
0 comentários:
Postar um comentário