SlideShare ist ein Scribd-Unternehmen logo
1 von 12
Downloaden Sie, um offline zu lesen
Menu DropDown com
JQuery
CSS - Style Sheet
Professor: Jolvani
Aula 22 e 23
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=“...)
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...
Menu DropDown com JQuery- CSS
 Css embutido...
 Bordas e outra propriedade para cada item do menu:
 Efeito “rollover” com as pseudo classes:
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.
Menu DropDown com JQuery- CSS
 Html dentro de <body> CSS
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
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.
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
Menu DropDown com JQuery- CSS
 Html CSS JQuery
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.
Próxima Aula: Posicionamentos

Weitere ähnliche Inhalte

Was ist angesagt?

Android bootcamp 06-01-2012 Part 1
Android bootcamp  06-01-2012 Part 1Android bootcamp  06-01-2012 Part 1
Android bootcamp 06-01-2012 Part 1Inael Rodrigues
 
13 Java Script - Validação de formulário
13 Java Script  - Validação de formulário13 Java Script  - Validação de formulário
13 Java Script - Validação de formulárioCentro Paula Souza
 
10 Java Script - Exemplos práticos
10 Java Script - Exemplos práticos10 Java Script - Exemplos práticos
10 Java Script - Exemplos práticosCentro Paula Souza
 
Breve explicação sobre o que é AngularJs
Breve explicação sobre o que é AngularJsBreve explicação sobre o que é AngularJs
Breve explicação sobre o que é AngularJsRubens Fernandes
 
Desenvolvimento em .Net - User Interface
Desenvolvimento em .Net - User InterfaceDesenvolvimento em .Net - User Interface
Desenvolvimento em .Net - User InterfaceVitor Silva
 

Was ist angesagt? (9)

Android bootcamp 06-01-2012 Part 1
Android bootcamp  06-01-2012 Part 1Android bootcamp  06-01-2012 Part 1
Android bootcamp 06-01-2012 Part 1
 
Java script aula 10 - angularjs
Java script   aula 10 - angularjsJava script   aula 10 - angularjs
Java script aula 10 - angularjs
 
Entrega Contínua - do Zero ao Sucesso
Entrega Contínua - do Zero ao SucessoEntrega Contínua - do Zero ao Sucesso
Entrega Contínua - do Zero ao Sucesso
 
Introdução ao JQuery e AJAX
Introdução ao JQuery e AJAXIntrodução ao JQuery e AJAX
Introdução ao JQuery e AJAX
 
13 Java Script - Validação de formulário
13 Java Script  - Validação de formulário13 Java Script  - Validação de formulário
13 Java Script - Validação de formulário
 
10 Java Script - Exemplos práticos
10 Java Script - Exemplos práticos10 Java Script - Exemplos práticos
10 Java Script - Exemplos práticos
 
Breve explicação sobre o que é AngularJs
Breve explicação sobre o que é AngularJsBreve explicação sobre o que é AngularJs
Breve explicação sobre o que é AngularJs
 
Desenvolvimento em .Net - User Interface
Desenvolvimento em .Net - User InterfaceDesenvolvimento em .Net - User Interface
Desenvolvimento em .Net - User Interface
 
Html dom, eventos, jquery
Html dom, eventos, jqueryHtml dom, eventos, jquery
Html dom, eventos, jquery
 

Andere mochten auch

Aula 12. medidas absolutas e relativas
Aula 12. medidas absolutas e relativasAula 12. medidas absolutas e relativas
Aula 12. medidas absolutas e relativasJolvani Morgan
 
Aula 31 certificação
Aula 31 certificaçãoAula 31 certificação
Aula 31 certificaçãoJolvani Morgan
 
Aula 28,29 e 30 w3 c, versões, html5
Aula 28,29 e 30   w3 c, versões, html5Aula 28,29 e 30   w3 c, versões, html5
Aula 28,29 e 30 w3 c, versões, html5Jolvani Morgan
 
Aula 21. estilização de listas
Aula 21. estilização de listasAula 21. estilização de listas
Aula 21. estilização de listasJolvani Morgan
 
Aula 09. efeito cascata e herança
Aula 09. efeito cascata e herançaAula 09. efeito cascata e herança
Aula 09. efeito cascata e herançaJolvani Morgan
 
Aula 10 e 11. box model
Aula 10 e 11. box modelAula 10 e 11. box model
Aula 10 e 11. box modelJolvani Morgan
 
Aula 11 04-14 prática html
Aula 11 04-14 prática htmlAula 11 04-14 prática html
Aula 11 04-14 prática htmlJolvani Morgan
 
Aula 21 e 22 tabelas introdução th head foot
Aula 21 e 22 tabelas introdução   th head footAula 21 e 22 tabelas introdução   th head foot
Aula 21 e 22 tabelas introdução th head footJolvani Morgan
 
Aula 04 e 05. seletores simples
Aula 04 e 05. seletores simplesAula 04 e 05. seletores simples
Aula 04 e 05. seletores simplesJolvani Morgan
 
Aula 18. estilização de cabeçalhos
Aula 18. estilização de cabeçalhosAula 18. estilização de cabeçalhos
Aula 18. estilização de cabeçalhosJolvani Morgan
 
Aula 06 e 07 elementos inline parte01 e 02
Aula 06 e 07 elementos inline parte01 e 02Aula 06 e 07 elementos inline parte01 e 02
Aula 06 e 07 elementos inline parte01 e 02Jolvani Morgan
 
Aula 13, 14 e 15. textos (fontes, espaçamento, alinhamento e decoração)
Aula 13, 14 e 15. textos (fontes, espaçamento, alinhamento e decoração)Aula 13, 14 e 15. textos (fontes, espaçamento, alinhamento e decoração)
Aula 13, 14 e 15. textos (fontes, espaçamento, alinhamento e decoração)Jolvani Morgan
 
Aula 16 e 17. background
Aula 16 e 17. backgroundAula 16 e 17. background
Aula 16 e 17. backgroundJolvani Morgan
 
Aula 01 introdução css
Aula 01 introdução cssAula 01 introdução css
Aula 01 introdução cssJolvani Morgan
 
Aula 03. utilização inline, incorporado e externo
Aula 03. utilização inline, incorporado e externoAula 03. utilização inline, incorporado e externo
Aula 03. utilização inline, incorporado e externoJolvani Morgan
 
Aula 24,25,26 e 27. posicionamento
Aula 24,25,26 e 27. posicionamentoAula 24,25,26 e 27. posicionamento
Aula 24,25,26 e 27. posicionamentoJolvani Morgan
 
Aula 34. bordas arredondadas e sombreamento
Aula 34. bordas arredondadas e sombreamentoAula 34. bordas arredondadas e sombreamento
Aula 34. bordas arredondadas e sombreamentoJolvani Morgan
 

Andere mochten auch (20)

Aula 12. medidas absolutas e relativas
Aula 12. medidas absolutas e relativasAula 12. medidas absolutas e relativas
Aula 12. medidas absolutas e relativas
 
Aula 31 certificação
Aula 31 certificaçãoAula 31 certificação
Aula 31 certificação
 
Aula 28,29 e 30 w3 c, versões, html5
Aula 28,29 e 30   w3 c, versões, html5Aula 28,29 e 30   w3 c, versões, html5
Aula 28,29 e 30 w3 c, versões, html5
 
Aula 21. estilização de listas
Aula 21. estilização de listasAula 21. estilização de listas
Aula 21. estilização de listas
 
Aula 09. efeito cascata e herança
Aula 09. efeito cascata e herançaAula 09. efeito cascata e herança
Aula 09. efeito cascata e herança
 
Aula 10 e 11. box model
Aula 10 e 11. box modelAula 10 e 11. box model
Aula 10 e 11. box model
 
Aula 08 cores
Aula 08 coresAula 08 cores
Aula 08 cores
 
Aula 11 04-14 prática html
Aula 11 04-14 prática htmlAula 11 04-14 prática html
Aula 11 04-14 prática html
 
Aula 21 e 22 tabelas introdução th head foot
Aula 21 e 22 tabelas introdução   th head footAula 21 e 22 tabelas introdução   th head foot
Aula 21 e 22 tabelas introdução th head foot
 
Aula 04 e 05. seletores simples
Aula 04 e 05. seletores simplesAula 04 e 05. seletores simples
Aula 04 e 05. seletores simples
 
Aula 18. estilização de cabeçalhos
Aula 18. estilização de cabeçalhosAula 18. estilização de cabeçalhos
Aula 18. estilização de cabeçalhos
 
Aula 06 e 07 elementos inline parte01 e 02
Aula 06 e 07 elementos inline parte01 e 02Aula 06 e 07 elementos inline parte01 e 02
Aula 06 e 07 elementos inline parte01 e 02
 
Aula 13, 14 e 15. textos (fontes, espaçamento, alinhamento e decoração)
Aula 13, 14 e 15. textos (fontes, espaçamento, alinhamento e decoração)Aula 13, 14 e 15. textos (fontes, espaçamento, alinhamento e decoração)
Aula 13, 14 e 15. textos (fontes, espaçamento, alinhamento e decoração)
 
Aula 33. css sprite
Aula 33. css spriteAula 33. css sprite
Aula 33. css sprite
 
Aula 16 e 17. background
Aula 16 e 17. backgroundAula 16 e 17. background
Aula 16 e 17. background
 
Aula 01 introdução css
Aula 01 introdução cssAula 01 introdução css
Aula 01 introdução css
 
Aula 20 div e spans
Aula 20 div e spansAula 20 div e spans
Aula 20 div e spans
 
Aula 03. utilização inline, incorporado e externo
Aula 03. utilização inline, incorporado e externoAula 03. utilização inline, incorporado e externo
Aula 03. utilização inline, incorporado e externo
 
Aula 24,25,26 e 27. posicionamento
Aula 24,25,26 e 27. posicionamentoAula 24,25,26 e 27. posicionamento
Aula 24,25,26 e 27. posicionamento
 
Aula 34. bordas arredondadas e sombreamento
Aula 34. bordas arredondadas e sombreamentoAula 34. bordas arredondadas e sombreamento
Aula 34. bordas arredondadas e sombreamento
 

Ähnlich wie Aula 22 e 23. menu drop down com j query

Ähnlich wie Aula 22 e 23. menu drop down com j query (8)

Vb
VbVb
Vb
 
Mini curso de c#.net
Mini curso de c#.netMini curso de c#.net
Mini curso de c#.net
 
Material Design - Melhorando a experiência de seu App
Material Design - Melhorando a experiência de seu AppMaterial Design - Melhorando a experiência de seu App
Material Design - Melhorando a experiência de seu App
 
CURSO JAVA 02
CURSO JAVA 02CURSO JAVA 02
CURSO JAVA 02
 
Sobre Visual studio
Sobre Visual studioSobre Visual studio
Sobre Visual studio
 
Componentes para a Web
Componentes para a WebComponentes para a Web
Componentes para a Web
 
Iniciando com Jquery
Iniciando com JqueryIniciando com Jquery
Iniciando com Jquery
 
Hello vue
Hello vueHello vue
Hello vue
 

Mehr von Jolvani Morgan

Aula 28,29,30 e 31. layout (tableless)
Aula 28,29,30 e 31. layout (tableless)Aula 28,29,30 e 31. layout (tableless)
Aula 28,29,30 e 31. layout (tableless)Jolvani Morgan
 
Aula 19 e 20. estilização de links
Aula 19 e 20. estilização de linksAula 19 e 20. estilização de links
Aula 19 e 20. estilização de linksJolvani Morgan
 
Aula 12. medidas absolutas e relativas
Aula 12. medidas absolutas e relativasAula 12. medidas absolutas e relativas
Aula 12. medidas absolutas e relativasJolvani Morgan
 
Aula 06, 07 e 08 seletores compostos e pseudo seletores
Aula 06, 07 e 08 seletores compostos e pseudo seletoresAula 06, 07 e 08 seletores compostos e pseudo seletores
Aula 06, 07 e 08 seletores compostos e pseudo seletoresJolvani Morgan
 
Aula 03. utilização inline, incorporado e externo
Aula 03. utilização inline, incorporado e externoAula 03. utilização inline, incorporado e externo
Aula 03. utilização inline, incorporado e externoJolvani Morgan
 
Aula 27 caracteres especiais & encoding
Aula 27 caracteres especiais & encodingAula 27 caracteres especiais & encoding
Aula 27 caracteres especiais & encodingJolvani Morgan
 
Aula 25 e 26 formulário acessibilidade
Aula 25 e 26 formulário acessibilidadeAula 25 e 26 formulário acessibilidade
Aula 25 e 26 formulário acessibilidadeJolvani Morgan
 
Aula 23 e 24 formulário controles
Aula 23 e 24 formulário controlesAula 23 e 24 formulário controles
Aula 23 e 24 formulário controlesJolvani Morgan
 
Aula 19 imagens mapeadas
Aula 19 imagens mapeadasAula 19 imagens mapeadas
Aula 19 imagens mapeadasJolvani Morgan
 
Aula 18 links email, call, chat
Aula 18 links email, call, chatAula 18 links email, call, chat
Aula 18 links email, call, chatJolvani Morgan
 
Aula 17 links internos
Aula 17 links internosAula 17 links internos
Aula 17 links internosJolvani Morgan
 
Aula 16 links relativos
Aula 16 links relativosAula 16 links relativos
Aula 16 links relativosJolvani Morgan
 
Aula 15 links introdução
Aula 15 links introduçãoAula 15 links introdução
Aula 15 links introduçãoJolvani Morgan
 

Mehr von Jolvani Morgan (14)

Aula 28,29,30 e 31. layout (tableless)
Aula 28,29,30 e 31. layout (tableless)Aula 28,29,30 e 31. layout (tableless)
Aula 28,29,30 e 31. layout (tableless)
 
Aula 19 e 20. estilização de links
Aula 19 e 20. estilização de linksAula 19 e 20. estilização de links
Aula 19 e 20. estilização de links
 
Aula 12. medidas absolutas e relativas
Aula 12. medidas absolutas e relativasAula 12. medidas absolutas e relativas
Aula 12. medidas absolutas e relativas
 
Aula 06, 07 e 08 seletores compostos e pseudo seletores
Aula 06, 07 e 08 seletores compostos e pseudo seletoresAula 06, 07 e 08 seletores compostos e pseudo seletores
Aula 06, 07 e 08 seletores compostos e pseudo seletores
 
Aula 03. utilização inline, incorporado e externo
Aula 03. utilização inline, incorporado e externoAula 03. utilização inline, incorporado e externo
Aula 03. utilização inline, incorporado e externo
 
Aula 02 sintaxe css
Aula 02 sintaxe cssAula 02 sintaxe css
Aula 02 sintaxe css
 
Aula 27 caracteres especiais & encoding
Aula 27 caracteres especiais & encodingAula 27 caracteres especiais & encoding
Aula 27 caracteres especiais & encoding
 
Aula 25 e 26 formulário acessibilidade
Aula 25 e 26 formulário acessibilidadeAula 25 e 26 formulário acessibilidade
Aula 25 e 26 formulário acessibilidade
 
Aula 23 e 24 formulário controles
Aula 23 e 24 formulário controlesAula 23 e 24 formulário controles
Aula 23 e 24 formulário controles
 
Aula 19 imagens mapeadas
Aula 19 imagens mapeadasAula 19 imagens mapeadas
Aula 19 imagens mapeadas
 
Aula 18 links email, call, chat
Aula 18 links email, call, chatAula 18 links email, call, chat
Aula 18 links email, call, chat
 
Aula 17 links internos
Aula 17 links internosAula 17 links internos
Aula 17 links internos
 
Aula 16 links relativos
Aula 16 links relativosAula 16 links relativos
Aula 16 links relativos
 
Aula 15 links introdução
Aula 15 links introduçãoAula 15 links introdução
Aula 15 links introdução
 

Aula 22 e 23. menu drop down com j query

  • 1. Menu DropDown com JQuery CSS - Style Sheet Professor: Jolvani Aula 22 e 23
  • 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. 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. Menu DropDown com JQuery- CSS  Css embutido...  Bordas e outra propriedade para cada item do menu:  Efeito “rollover” com as pseudo classes:
  • 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. Menu DropDown com JQuery- CSS  Html dentro de <body> CSS
  • 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. 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. 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. Menu DropDown com JQuery- CSS  Html CSS JQuery
  • 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.