1. Menu só com CSS
CSS - Style Sheet
Professor: Jolvani
Aula 32
2. 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.
3. 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
4. Como podemos esconder os submenus? Dentro do CSS que estiliza o submenu
devemos 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
5. 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