Baixado 22 vezes
Carregado porJolvani Morgan
Aula 22 e 23. menu drop down com j query
Este documento apresenta instruções para criar um menu dropdown com HTML, CSS e jQuery. Inicialmente, é construído um menu básico com tags <ul> e estilizado com CSS embutido. Em seguida, é adicionado um segundo nível de submenu e efeito dropdown ao passar o mouse com jQuery. Por fim, o menu é posicionado horizontalmente com a propriedade float do CSS.
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 comJQuery- 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 comJQuery- 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 comJQuery- CSS Css embutido... Bordas e outra propriedade para cada item do menu: Efeito “rollover” com as pseudo classes:
- 5. Menu DropDown comJQuery- 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 comJQuery- CSS Html dentro de <body> CSS
- 7. Menu DropDown comJQuery- 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 comJQuery- 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 comJQuery- 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 comJQuery- CSS Html CSS JQuery
- 11. Menu DropDown comJQuery- 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.