Aula 22 e 23. menu drop down com j query

303 visualizações

Publicada em

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
303
No SlideShare
0
A partir de incorporações
0
Número de incorporações
4
Ações
Compartilhamentos
0
Downloads
12
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Aula 22 e 23. menu drop down com j query

  1. 1. Menu DropDown com JQuery CSS - Style Sheet Professor: Jolvani Aula 22 e 23
  2. 2. Menu DropDown com JQuery- CSS  Bem vindos a + uma aula CSS  Crie uma nova aula a partir da css21.html renomeando para css23e23menu.html e edite com Notepad ++;  Preparamos uma página conforme a figura abaixo. (sem <link rel=“...)
  3. 3. Menu DropDown com JQuery- CSS  Construir menus padrões usa-se tags <ul>, porém muitos desenvolvedores envolvem o bloco usando uma <div>, mas isso não é necessário.  Mantemos nosso código mais limpo possível.  A <ul> </ul> já e um box suficiente para fazer o menu.  Construímos um menu conforme o menu abaixo;  Vamos estilizar direto no html....  Depois no final podemos remover e colocar o css em outro arquivo...
  4. 4. Menu DropDown com JQuery- CSS  Css embutido...  Bordas e outra propriedade para cada item do menu:  Efeito “rollover” com as pseudo classes:
  5. 5. Menu DropDown com JQuery- CSS  Criar mais um nível de menu:  Remova o estilo e faça um teste para ver como fica...  Observe que o menu deveria ficar alinhado a direita.  Podemos identificar os elementos (ul) que estão dentro das li  Usando o seguinte seletor “li > ul”,  Primeiro adicione a propriedade position em <li>.  Após crie o sub menu.  Veja o resultado.
  6. 6. Menu DropDown com JQuery- CSS  Html dentro de <body> CSS
  7. 7. Menu DropDown com JQuery- CSS  Percebam que quando passamos o mouse sobre o elemento <li> Indústrias as cores do sub elementos são modificadas... Para corrigir isso colocamos a cor no elemento novamente. “color-black”  Adicionar + um elemento sub menu. Dentro do sub menu energia; Conseguimos um efeito dropdown
  8. 8. Menu DropDown com JQuery- CSS  Esta faltando o efeito de, ao passar o mouse em cima do item Industria e Energia aparecer os submenus...  Para isso devemos usar javascript através da biblioteca jQuery em www.jquery.com...  Criamos um diretório “js” ao lado da pasta “css” para a biblioteca Jquery e baixamos a versão dela...  Agora adicionamos outra tag para adicionar o arquivo jquery.js.
  9. 9. Menu DropDown com JQuery- CSS  Criando o script jQuery:  hover = efeito de dropdown  hide = oculta o elemento de id = menu  Adicione id = “menu” na tag <ul>  Veja o resultado
  10. 10. Menu DropDown com JQuery- CSS  Html CSS JQuery
  11. 11. Menu DropDown com JQuery- CSS  Colocando o menu na horizontal: Criamos um novo arquivo chamado css22e23menuhorizontal.html (copie e cole – renomeie)  Usamos a propriedade float....  Porém o posicionamento do sub menu ficou errado...  Para o primeiro menu colocar posicionamento a esquerda (left) de –1px;  E acima (top) 27px;  Veja resultado.
  12. 12. Próxima Aula: Posicionamentos

×