Aula HTML5 e CSS3

CURSO DESENVOLVIMENTO WEB
MÓDULO HTML

AULA

11

Menu com CSS3:
Nesta aula vamos dar continuidade ao nosso site criando um Menu Flutuante com CSS3.
Até agora criamos uma lista está funcionando como o nosso menu:

Agora nós vamos transforma-lo em um menu.
Primeiro vamos abrir o arquivo index.html e estilo.css que criamos nas aulas anteriores:

CURSO DESENVOLVIMENTO WEB
HTML-CSS-JAVASCRIPT

1

CURSO DESENVOLVIMENTO WEB
MÓDULO HTML

AULA

11

Observe que nosso menu é apenas uma lista. No HTML5 temos a tag que cria um container para o menu de navegação, permitindo assim aplicar várias formatações sobre ele.
Primeiro vamos criar o container do menu de navegação com

Então, tudo que estiver entre e será considerado nosso menu de navegação. Agora, para que possamos aplicar configurações em CSS3 especificas para este menu de navegação, vamos identificá-lo com o nome menu utilizando o parâmetro id, assim:

Vamos agora para nosso arquivo CSS, o estilo.css, e a primeira coisa será criar um comentário, para que tudo fique organizado, lembrando que comentário em CSS é tudo aquilo que colocamos entre /* e */:

Vamos entender a estrutura deste menu:
Nós temos um nav, dentro do nav temos uma lista que é formada por um ul onde os itens desta lista são os li.

CURSO DESENVOLVIMENTO WEB
HTML-CSS-JAVASCRIPT

2

CURSO DESENVOLVIMENTO WEB
MÓDULO HTML

AULA

11

Vamos iniciar a formatação então do nav, colocamos nav, o sinal de cerquilha (#) e o nome dele, ou seja, menu:

Então, esta é a estrutura de formatação para o nav menu. Para cada item do que iremos formatar, nós indicaremos a partir desta estrutura, assim:
Formatação do nav menu, tudo que for ul:

Vamos aplicar a primeira formatação: Retirar os marcadores da lista com list-style:

Salvando e atualizando temos agora a lista sem marcadores:

CURSO DESENVOLVIMENTO WEB
HTML-CSS-JAVASCRIPT

3

CURSO DESENVOLVIMENTO WEB
MÓDULO HTML

AULA

11

Outra