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