Aula 22 e 23. Menu DropDown Com JQuery

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 pgina conforme a figura abaixo. (sem <link rel=...)
Construir menus padres usa-se tags <ul>, porm muitos

desenvolvedores envolvem o bloco usando uma <div>, mas isso no
necessrio.
Mantemos nosso cdigo mais limpo possvel.
A <ul> </ul> j e um box suficiente para fazer o menu.
Construmos 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 nvel de menu:

Remova
o estilo e faa um teste para ver como fica...
Observe que o menu deveria ficar alinhado a direita.
Podemos identificar os elementos (ul) que esto dentro das li
Usando o seguinte seletor li > ul,
Primeiro adicione a propriedade position em <li>.
Aps crie o sub menu.
Veja o resultado.
Html dentro de <body>
CSS
Percebam que quando passamos o mouse sobre o elemento <li>

Indstrias as cores do sub elementos so 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 atravs da biblioteca jQuery em

www.jquery.com...
Criamos um diretrio js ao lado da pasta css para a biblioteca

Jquery e baixamos a verso dela...
Agora adicionamos outra tag para adicionar o arquivo jquery.js.
Criando o script jQuery:
hover = efeito de dropdown
hide = oculta o elemento de id = menu
Adicione id = menu na tag <ul>
Veja o resultado
Html
CSS
JQuery
Colocando o menu na horizontal: Criamos um novo arquivo chamado

css22e23menuhorizontal.html (copie e cole renomeie)
Usamos a propriedade float....
Porm o posicionamento do sub menu ficou errado...
Para o primeiro menu colocar posicionamento a esquerda (left) de 1px;
E acima (top) 27px;
Veja resultado.
Prxima Aula: Posicionamentos

Aula 22 e 23. Menu DropDown Com JQuery

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Aula 22 e 23. Menu DropDown Com JQuery

Enviado por

Direitos autorais:

Formatos disponíveis

Menu DropDown com

Menu DropDown com JQuery- CSS

Bem vindos a + uma aula CSS

Crie uma nova aula a partir da css21.html renomeando para

Preparamos uma pgina conforme a figura abaixo. (sem <link rel=...)

Menu DropDown com JQuery- CSS

Construir menus padres usa-se tags <ul>, porm muitos

Mantemos nosso cdigo mais limpo possvel.

A <ul> </ul> j e um box suficiente para fazer o menu.

Construmos 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

Bordas e outra propriedade para cada item do menu:

Efeito rollover com as pseudo classes:

Menu DropDown com JQuery- CSS

Criar mais um nvel de menu:

o estilo e faa um teste para ver como fica...

Observe que o menu deveria ficar alinhado a direita.

Podemos identificar os elementos (ul) que esto dentro das li

Usando o seguinte seletor li > ul,

Primeiro adicione a propriedade position em <li>.

Aps crie o sub menu.

Menu DropDown com JQuery- CSS

Html dentro de <body>

Menu DropDown com JQuery- CSS

Percebam que quando passamos o mouse sobre o elemento <li>

Adicionar + um elemento sub menu. Dentro do sub menu energia;

Menu DropDown com JQuery- CSS

Esta faltando o efeito de, ao passar o mouse em cima do item Industria

Para isso devemos usar javascript atravs da biblioteca jQuery em

Criamos um diretrio js ao lado da pasta css para a biblioteca

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>

Menu DropDown com JQuery- CSS

Menu DropDown com JQuery- CSS

Colocando o menu na horizontal: Criamos um novo arquivo chamado

Usamos a propriedade float....

Porm o posicionamento do sub menu ficou errado...

Para o primeiro menu colocar posicionamento a esquerda (left) de 1px;

E acima (top) 27px;

Prxima Aula: Posicionamentos

Você também pode gostar