Menu Dropdown com HTML e CSS
Olá amigos, meu nome é Fabio Venâncio e este é o meu primeiro post n o blog de Webdesign da Microcamp.
Para começar, recomendo usar um editor de códigos como o Dreamweaver, mas neste tutorial, vamos usar o programa notepad++ que é um programa gratuito e que pode ser encontrado em praticamente qualquer site de download. Você pode baixá-lo diretamente no link abaixo:
http://www.baixaki.com.br/download/notepad-.htm
A instalação do programa é bem simples, siga todos os passos indicados no programa instalador e em seguida você já poderá visualizar a interface do programa:
A interface do Notepad++
A criação do menu
Vamos iniciar nosso trabalho escrevendo a sintaxe html. É interessante notar que o Notepad++ deixa tudo bem organizado, enumerando as linhas que estamos usando para criação da nossa página. Escreva os códigos exatamente como você vê na imagem abaixo:
Observe a numeração das linhas no programa
Salve este documento com o nome de menu.html Após salva-lo, vamos a partir de agora, criar uma div contendo a propriedade id=”menu”, e dentro desta div uma lista não ordenada, porque será com ela que criaremos o nosso menu dropdown.
O código da lista
Criando o CSS
Os nomes inseridos nesta lista são somente para ilustração, você pode escolher os nomes que preferir para o menu da sua página. Após ter criado a lista, vamos reservar um espaço na sessão “head” do nosso documento para as regras CSS. Dentro dessa sessão digite a sintaxe CSS, como na imagem abaixo:
Inserindo o CSS no cabeçalho (head)
Obs: a forma como organizamos o nosso documento é que vai nos ajudar a identificar melhor cada parte dele, por isso é importante seguir o modelo da imagem acima.
Dentro da área reservada para as regras CSS vamos começar a estilizar o nosso menu. faremos sua identificaçãocom a propriedade “id” e com o sinal de “#”, seguido do valor da propriedade. Exemplo: #menu. Ele será o nosso seletor, ou seja, o elemento que receberá as regras de formatação das folhas de estilo, podendo ser o nome de uma tag, uma classe (que é uma propriedade de uma tag) ou ainda um id, que também é um propriedade de tags html. Veja na imagem abaixo:
O seletor ID #Menu
Sharp menu é o nosso seletor como mostra a seta acima destacando o seu nome. Em CSS sempre vamos trabalhar pensando em Seletor{propriedade: valor;}. Para este exercício, o nosso #menu vai ter a largura de 800px (pixels), mas você poderá usar a largura que desejar em outras ocasiões.
Agora, veremos a criação da lista não ordenada.
Formatando a lista com CSS
Digitamos #menu ul para estilizar o elemento dentro da nossa div com o id=”menu”. Perceba que foi dado um espaço entre as palavras. Os comandos que utlizaremos são os seguintes:
list-style:none – com esse código retiramos o estilo de lista;
margin: 0 – colocando o valor zero nas margens retiramos todos as margens da lista não-ordenada;
padding: 0 – com esse comando retiramos todo preenchimento dentro da lista.
Agora, vamos estilizar os itens da lista:
Estilizando os itens
Na linha 9, estamos acessando os itens de lista dentro da nossa lista não-ordenada;
Linha 10, estamos flutuando os itens de lista à esquerda;
Linha 11, definimos que cada item tem 100 pixels de largura;
Linha 12, alinhamos o texto no centro;
Linha 13, dizemos que existe um preenchimento de 10 pixels em cima e embaixo e 20 pixels na direita e esquerda;
Linha 14, definimos a cor de fundo como cinza escuro;
Linha 15, colocamos uma borda na direita de 1px com um estilo de traço solido e cor cinza claro;
Linha 16, O mesmo da linha 15, só que a borda é colocada no topo;
Linha 17, O cursor será mostrado em forma de uma mão, como em um link;
Linha 18, Declaramos o posicionamento relativo, para que todos os elementos dentro deste item de lista se posicione com relação a ele mesmo.
Passamos agora a criação das opções do nosso menu. Veja figura abaixo:
As opções da lista
Cada item de lista pode ter mais opções, conforme a preferência de cada um. Dentro do primeiro item de lista, depois do texto home dê enter deixando como na figura acima, e neste novo espaço crie uma lista não ordenada também contendo as opções do seu menu, veja na figura abaixo:
Lista não ordenada
Salve tudo, clique no arquivo HTML e execute-o para ver como esta ficando sua aparência no navegador. O resultado deve estar igual ao da figura abaixo, se você seguiu os passos fielmente até aqui:
O menu quase finalizado
O efeito Dropdown
Como deve ter percebido, nosso Submenu está aparecendo junto ao Menu principal, devemos fazer com que ele apareça somente quando o cursor do mouse pousar sobre um item do menu, neste caso o menu Home. Para isso, devemos fazer as modificações necessárias, como na figura abaixo:
Entendendo a relação entre os itens
Na linha 21 das regras CSS. declaramos a propriedade position e colocamos o valor absolute, com isso temos mais liberdade para mover esta lista. Vale lembrar que como esta nova lista esta dentro de um item de lista cuja propriedade position tem o valor relativo, seu posicionamento se baseia nele.
Linha 22, declaramos que esta lista vai ter um distancia do topo de 30 pixels;
Linha 23, Distancia da esquerda 10 pixels;
Linha 24, Display:none indica que esta lista não ordenada não será exibida.
Linha 25, z-index: 2 indica que esta lista vai ficar acima do menu principal> Pense em z-index como camadas, cada valor indicando uma camada exemplo: z-index: 1 (camada 1), z-index: 2 (camada 2)…
Agora veja figura do menu:
Menu principal “fechado”
Vamos criar agora de um efeito que vai destacar o menu conforme passamos o cursor do mouse sobre ele, veja a figura abaixo:
Efeito de sobreposição com CSS
Linha 27, a pseudo-class :hover é a responsável por este efeito, quer dizer que quando o cursor ficar sobre um item de lista, sua cor de fundo muda e a cor do texto também, veja o exemplo:
Menu com a sobreposição de cor
Vamos acrescentar mais um bloco de código que será o responsável por exibir o menu dropdown assim que o cursor pousar sobre o menu principal:
Adicionando a exibição do Dropdown
Linha 33, a pseudo class :hover indica que quando o cursor passar sobre um item de lista poderá ser feito qualquer alteração. Ao colocar o elemento ul após o :hover ligamos a ação da pseudo-class ao elemento ul e alteramos a sua propriedade display, de none para block.
Vejamos o resultado:
O efeito dropdown já aparecendo
Veja o código CSS completo:
Veja também o código html completo:
O código HTML completo
Uma ultima observação, sabemos que temos diversos tipos de navegadores, e que todos eles apresentam alguma diferença com relação aos outros. Caso queira que este menu seja compatível com todos os atuais navegadores, substitua a marcação inicial a seguir:
A marcação que deverá substituir
Por esta:
A nova marcação
Esta é uma marcação indispensável, não esqueça de incluí-la. Em um próximo artigo estarei comentando esta nova marcação e o seu efeito sobre os navegadores. Espero que tenham gostado e que possam fazer um bom uso deste modelo de Menu em suas páginas. Até o próximo artigo!
