Menu só com CSS
CSS - Style Sheet
Professor: 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 escon...
 Como não usaremos jQuery a primeira coisa a fazer é remover as
referências javascripts dos efeitos nos menus:
 Salvamos...
 Como podemos esconder os submenus? Dentro do CSS que estiliza o submenu
devemos utilizar a propriedade display com o val...
 Devemos usar o evento hover para que quando
passarmos o mouse por cima do menu seja
apresentado o submenu. Alterando o e...
Próxima Aula: CSS Sprite
Próximos SlideShares
Carregando em…5
×

Aula 32. menu só com css

390 visualizações

Publicada em

Criação de menu vários níveis usando somente CSS.

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
390
No SlideShare
0
A partir de incorporações
0
Número de incorporações
5
Ações
Compartilhamentos
0
Downloads
14
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Aula 32. menu só com css

  1. 1. Menu só com CSS CSS - Style Sheet Professor: Jolvani Aula 32
  2. 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. 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. 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. 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
  6. 6. Próxima Aula: CSS Sprite

×