Menu só com CSS

CSS - Style SheetProfessor: Jolvani

Aula 32

Menu só com CSS

Anteriormente construímos esse menu com o uso da biblioteca jQuery

para trazer o efeito de abrir e esconder o elementos do menu dentro de

nossa lista.

Nesta aula iremos usar o mesmo efeito usando

Somente recursos CSS.

Como não usaremos jQuery a primeira coisa a fazer é remover as

referências javascripts dos efeitos nos menus:

Salvamos a aula menu22e23menuVertical.html para

aula32_menucomCSS.html, e removemos as referências ...

Vc irá notar que todos os submenus

serão apresentados a partir desse

momento.

Menu só com CSS

Como podemos esconder os submenus? Dentro do CSS que estiliza o submenudevemos utilizar a propriedade display com o valor none.

Essa propriedade irá esconder todos os submenus... (teste)

Agora precisamos apresentar o submenu...

Devemos usar o evento hover para que quando

passarmos o mouse por cima do menu seja

apresentado o submenu. Alterando o elemento

Interno da li. Ficando assim:

li:hover > ul{

}

Menu só com CSS

Devemos usar o evento hover para que quando

passarmos o mouse por cima do menu seja

apresentado o submenu. Alterando o elemento

Interno da li. Ficando assim:

li:hover > ul{

}

Apresentando para o usuário

display:block;

Menu só com CSS

Próxima Aula: CSS Sprite