Aula 22 e 23. menu drop down com j query
-
Upload
jolvani-morgan -
Category
Technology
-
view
48 -
download
0
Transcript of Aula 22 e 23. menu drop down com j query
![Page 1: Aula 22 e 23. menu drop down com j query](https://reader035.fdocumentos.com/reader035/viewer/2022071816/55abe7ab1a28abb5678b461f/html5/thumbnails/1.jpg)
Menu DropDown com
JQuery
CSS - Style SheetProfessor: Jolvani
Aula 22 e 23
![Page 2: Aula 22 e 23. menu drop down com j query](https://reader035.fdocumentos.com/reader035/viewer/2022071816/55abe7ab1a28abb5678b461f/html5/thumbnails/2.jpg)
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=“...)
![Page 3: Aula 22 e 23. menu drop down com j query](https://reader035.fdocumentos.com/reader035/viewer/2022071816/55abe7ab1a28abb5678b461f/html5/thumbnails/3.jpg)
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...
![Page 4: Aula 22 e 23. menu drop down com j query](https://reader035.fdocumentos.com/reader035/viewer/2022071816/55abe7ab1a28abb5678b461f/html5/thumbnails/4.jpg)
Menu DropDown com JQuery- CSS
Css embutido...
Bordas e outra propriedade para cada item do menu:
Efeito “rollover” com as pseudo classes:
![Page 5: Aula 22 e 23. menu drop down com j query](https://reader035.fdocumentos.com/reader035/viewer/2022071816/55abe7ab1a28abb5678b461f/html5/thumbnails/5.jpg)
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.
![Page 6: Aula 22 e 23. menu drop down com j query](https://reader035.fdocumentos.com/reader035/viewer/2022071816/55abe7ab1a28abb5678b461f/html5/thumbnails/6.jpg)
Menu DropDown com JQuery- CSS
Html dentro de <body> CSS
![Page 7: Aula 22 e 23. menu drop down com j query](https://reader035.fdocumentos.com/reader035/viewer/2022071816/55abe7ab1a28abb5678b461f/html5/thumbnails/7.jpg)
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
![Page 8: Aula 22 e 23. menu drop down com j query](https://reader035.fdocumentos.com/reader035/viewer/2022071816/55abe7ab1a28abb5678b461f/html5/thumbnails/8.jpg)
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.
![Page 9: Aula 22 e 23. menu drop down com j query](https://reader035.fdocumentos.com/reader035/viewer/2022071816/55abe7ab1a28abb5678b461f/html5/thumbnails/9.jpg)
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
![Page 10: Aula 22 e 23. menu drop down com j query](https://reader035.fdocumentos.com/reader035/viewer/2022071816/55abe7ab1a28abb5678b461f/html5/thumbnails/10.jpg)
Menu DropDown com JQuery- CSS Html CSS JQuery
![Page 11: Aula 22 e 23. menu drop down com j query](https://reader035.fdocumentos.com/reader035/viewer/2022071816/55abe7ab1a28abb5678b461f/html5/thumbnails/11.jpg)
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.
![Page 12: Aula 22 e 23. menu drop down com j query](https://reader035.fdocumentos.com/reader035/viewer/2022071816/55abe7ab1a28abb5678b461f/html5/thumbnails/12.jpg)
Próxima Aula: Posicionamentos