Aula 22 e 23. menu drop down com j query

Menu DropDown com

JQuery

CSS - Style SheetProfessor: 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=“...)


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...


Css embutido...

Bordas e outra propriedade para cada item do menu:

Efeito “rollover” com as pseudo classes:


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.


Html dentro de <body> 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


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.

http://www.jquery.com/


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

Technology

Aula 22 e 23. menu drop down com j query