anterior
Tweet about this on TwitterPin on PinterestShare on LinkedInShare on Google+Email this to someoneShare on Facebook
QR CODE

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:

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!

Próximo

Postado por

Tenho 29 anos, fiz vários cursos na área de informática dentre os quais me identifiquei muito com Web Design, em especial a programação que trata a parte do raciocínio lógico por trás de todos os sites e programas, atualmente estou fazendo faculdade de Sistema de Informação e estudando modelagem 3D. Leciono na Microcamp de Praia Grande no curso de Web desde de 2010.