Construindo um

menu em jQuery
Verso 1.0 de 05/07/2016

Visite www.alfamidia.com.br/apostilas para obter a ltima verso desta

apostila, bem como outros materiais gratuitos.

Este um trabalho em construo, e seu feedback muito importante.

Visite aprendendo-javascript.blogspot.com.br para colocar comentrios e
informar de erros. Estaremos incorporando as sugestes reviso da
apostila, que pretendemos atualizar de forma continua.
 Todos os direitos reservados para Rodrigo de Losina Silva

AVISO DE RESPONSABILIDADE

As informaes contidas neste material de treinamento so distribudas NO

ESTADO EM QUE SE ENCONTRAM, sem qualquer garantia, expressa ou implcita.

A cpia e uso deste material livre inclusive para fins comerciais, desde que o
material no sofra modificaes e seja mantida a referncia ao autor e a empresa
Alfamdia.

07/2016

Alfamdia

Cursos Presenciais - www.alfamidia.com.br

Cursos Online www.alfamidiaonline.com.br
Rodrigo Losina - http://rodrigolosinasilva.blogspot.com.br/
 1. COMO UTILIZAR ESTE MATERIAL ................................................................................................... 5

1.1 DIREITO DE USO DESTE MATERIAL ....................................................................................... 5

1.2 PR-REQUISITOS PARA ACOMPANHAR ESTE CONTEDO ........................................................ 6

2. O HTML DE UM MENU DINMICO .................................................................................................... 7

2.1 UM PROGRAMA QUE EXIBE UM MENU DINMICO ................................................................. 7

2.2 COMEANDO COM UM HTML PARA O MENU ........................................................................ 8

2.3 ESTRUTURA DO HTML ......................................................................................................... 9

2.4 O MENU EM HTML ............................................................................................................. 10

2.5 CRIANDO UMA HIERARQUIA DE ELEMENTOS EM HTML ..................................................... 11

3. CRIANDO O LAYOUT DE NOSSO MENU EM CSS ......................................................................... 14

3.1 ALTERANDO O FUNDO ......................................................................................................... 14

3.2 ALTERANDO O MODO DE EXIBIO PARA INLINE ............................................................... 16

3.3 EXIBINDO O MENU NA HORIZONTAL ................................................................................... 17

3.4 DEFININDO UM ESPAO AO REDOR DOS ITENS .................................................................... 18

3.5 FORANDO O MENU SECUNDRIO PARA VERTICAL ............................................................ 20

3.6 ISOLANDO O POSICIONAMENTO DO MENU PRINCIPAL DO MENU SECUNDRIO ................... 21

3.7 O RESULTADO FINAL, HTML E CSS ................................................................................... 23

4. JQUERY - CRIANDO INTERAO COM O USURIO.................................................................... 24

4.1 NOSSO PRIMEIRO CDIGO JQUERY...................................................................................... 24

4.2 ENTENDENDO A FUNO HOVER DO JQUERY....................................................................... 25

.HOVER( HANDLERIN, HANDLEROUT ) .............................................................................................. 27

4.3 ALTERANDO A COR DE FUNDO. ........................................................................................... 27

4.4 ABRINDO E FECHANDO OS MENUS. ..................................................................................... 29

5. FINALIZANDO E SEGUINDO ADIANTE........................................................................................... 31

5.1 FONTE COMPLETO DO MENU ............................................................................................... 31
1. Como Utilizar este Material

Este contedo de jQuery parte do Extensivo Alfamdia em Desenvolvimento

Web e Mobile, mas tambm disponibilizado para uso livre.

O Extensivo Alfamdia composto por diversos mdulos, cada um com foco em

uma linguagem ou metodologia, e tem como modelo o aprendizado pela prtica.

Assim sendo, o melhor uso deste material ser com a reproduo dos exemplos e
a prtica dos cdigos, at o aluno adquirir familiaridade com o conteudo.

Os cursos extensivos Alfamdia envolvem um conjunto de elementos voltados

para o aprendizado efetivo do aluno:

Apostilas, como esta que disponibilizada livremente

Videoaulas desenvolvidas por profissionais do mercado

Avalies objetivas disponibilizadas online

Aulas presenciais (para cursos presenciais em Porto Alegre)

Este material no pretende ser uma apostila de jQuery, e de forma alguma

prepara o aluno para desenvolver cdigos com a biblioteca e com javascript. A
proposta aqui servir de apoio para o aluno praticar com alguns elementos de HTML,
CSS, javascript e jQuery.

O melhor uso desta apostila junto com os cdigos-fonte, videoaulas e apoio de

instrutor, mas ela tambm pode ser utilizada de forma autnoma para estudo.

1.1 Direito de Uso deste Material

Esta apostila pode ser utilizada livrememente para qualquer fim.

Ela pode ser utilizada para auto-estudo;

Pode ser utilizada em sala de aula, como material complementar;

Pode ser impressa e distribuda para alunos;

Pode ter o link para o site de download da alfamidia disponibilizado

(www.alfamidia.com.br/apostilas).
 As restries para seu uso so:

No pode ser modificada sem autorizao, devendo ser mantido, inclusivo a

logotipia e esta informao

No pode ser disponibilizada para download em nenhum site no

autorizado. Para sua disponibilizao, deve ser fornecido o link
mencionado acima.

1.2 Pr-requisitos para Acompanhar este Contedo

O presente contedo ir mostrar a construo de um menu dinmico me

jQuery. No indispensvel um conhecimento prvio de HTML, Javascript e
jQuery, j que cada elemento utilizado ser descrito na apostila, mas o
conhecimento de HTML e lgica de programao, ainda assim, facilitar o
entendimento.

A apostila no tratar do processo de escrever uma pgina em editor de texto

e execut-la no Chrome ou outro browser, assuntos vistos em apostilas anteriores
tambm disponibilizadas (apostila de lgica de programao).
2. O HTML de um Menu Dinmico

2.1 Um Programa que Exibe um Menu Dinmico

O cdigo que iremos trabalhar exibe um menu dinmico, cuja funcionalidade

muito simples: medida que o mouse se move pelos itens do menu principal, que um
menu horizontal, o menu secundrio aberto na forma de um menu vertical, como
mostra a figura a seguir:

medida que o mouse se move pelos menus, tanto horizontal quanto vertical, o
item selecionado aparece em uma cor mais escura. Clicando no mesmo, iremos para a
pgina vinculada ao menu:

Se voc aluno de nossos extensivos, o cdigo fonte do menu est disponvel em

nosso portal online. Caso contrrio, no se preocupe, pois iremos construir este cdigo
nesta apostila, passo a passo.
2.2 Comeando com um HTML para o Menu

O contedo de uma pgina web tipicamente definido em HTML, e

comearemos, aqui, criando o HTML de nosso menu.

Este contedo HTML no ter as definies de layout, que vo fazer com que o
menu tenha fundo azul, seja horizontal, etc., nem ter toda a interao vinculada aos
movimentos do mouse. O layout ser mostrado na unidade seguinte, e ser especificado
em outra linguagem, a CSS, enquanto a interao ser feita por nosso programa em
jQuery, e mostrada na ltima unidade.

Observe, a seguir, nosso cdigo HTML. Iremos detalhar cada item do mesmo
abaixo. Se voc j tem um domnio do HTML, possivelmente uma rpida olhada no
cdigo-fonte j ser suficiente para voc seguir para a unidade seguinte. Ou pode
acompanhar as explicaes abaixo como forma de rever seu conhecimento de HTML.

<!DOCTYPE html>
<html>
<head>
<title>Exemplo de Menu com jQuery</title>
</head>

<body>
<nav>
<ul>
<li>
<a href="#">Sobre Ns</a>
</li>
<li>
<a href="#">Nossos Produtos</a>
</li>
<li>
<a href="#">Nossos Servios</a>
</li>
<li>
<a href="#">Nossos Clientes</a>
</li>
</ul>
</nav>
</body>
</html>
 Se este seu primeiro contato com HTML, tente escrever o contedo acima em
um arquivo texto, salve com extenso .html, e abra em um browser. Voc dever ver
algo semelhante a imagem a seguir:

2.3 Estrutura do HTML

Vamos primeiro analisar a parte do cdigo HTML que no diretamente

relacionada ao menu em si:

<!DOCTYPE html>
<html>
<head>
<title>Exemplo de Menu com jQuery</title>
</head>

<body>

Aqui onde est o cdigo em si

</body>
</html>

Este um exemplo da estrutura principal de uma pgina em HTML 5 tpica. A

primeira linha define que trata-se de um documento HTML 5, a segunda linha marca o
incio do documento, que finalizado na ltima linha, atravs das tags <html> e
</html>.

Temos dois grupos principais de elementos na nossa pgina, que esto entre as
tags <head> e </head>, e as tags <body> e </body>.

Tipicamente, elementos no visveis na pgina ficam no primeiro grupo, enquanto

os elementos visveis, como nosso menu, ficam no segundo grupo, no corpo (body em
ingls) da pgina HTML.
 Na parte head (ou cabea) de nosso HTML temos aqui um nico elemento, que
o ttulo da pgina, contido entre as tags <title> e </title>.

Voc pode inclusive copiar esta estrutura e aplicar em novas pginas HTML, se
est recm comeando a utilizar a linguagem. Basicamente, podemos nos preocupar,
principalmente enquanto ainda no processo de aprendizado do HTML, apenas em
escrever contedos dentro do corpo do HTML.

2.4 O Menu em HTML

Observe a verso simplificada de nosso menu, com apenas um item. Ns temos

basicamente as tags <nav> e </nav>, <ul> e </ul>, <li> e </li> e
<a> e </a>. A esta altura, voc j deve ter percebido que, com o uso de duas
tags, a segunda iniciando com /, estamos definindo um conjunto de elementos
dentro de outro elemento.

<nav>
<ul>
<li>
<a href="#">Sobre Ns</a>
</li>
</ul>
</nav>

Assim, no exemplo, temos um elemento a dentro de um elemento li, que, por

sua vez, est dentro de um elemento ul, que, por fim, est dentro do elemento
nav. Todos eles, como j vimos anteriormente, esto dentro do elemento body.

Vamos ento entender o que representa cada um destes elementos:

nav: indica que estamos em um elemento que ser utilizado para navegao.
Ou seja, o que vem a seguir algum tipo de menu ou indce para navegar
por um site.

ul: indica uma lista no ordenada de elementos. Observe a imagem no incio

da unidade anterior. Ela exibiu justamente uma srie de elementos. Como
listas de elementos permitem construir uma hierarquia, de forma muito
semelhante a um menu tpico, muito comum encontrarmos este elemento
na construo de menus.

li: indica um elemento da lista anteriormente criada. Em geral, sempre que

temos um elemento ul, indicando uma lista, teremos um ou mais
elementos li que vo indicar cada elemento da lista.
 a: indica que o elemento um link. No caso em questo, utilizamos
href=# apenas para indicar que um link, mas sem levar a lugar algum.
Em uma verso real do menu, teramos, por exemplo, <a href=sobre-
nos.html>Sobre Ns</a> fazendo com que, ao clicar em sobre ns, o
usurio fosse levado a pgina sobre-nos.html.

Observe agora o menu completo. relativamente fcil entender que, agora, nossa
lista tem 4, e no 1 elemento:

<nav>
<ul>
<li>
<a href="#">Sobre Ns</a>
</li>
<li>
<a href="#">Nossos Produtos</a>
</li>
<li>
<a href="#">Nossos Servios</a>
</li>
<li>
<a href="#">Nossos Clientes</a>
</li>
</ul>
</nav>

2.5 Criando uma Hierarquia de Elementos em HTML

A razo de utilizarmos o elemento ul para a construo de menus porque ele

particularmente til quando queremos criar elementos hierrquicos.

Por elementos hierrquicos, queremos dizer que temos listas dentro de listas.

Observe a lista a seguir. fcil perceber que temos uma lista principal, com os itens
sobre ns, nossos produtos, etc., e para cada item desta lista principal, temos uma
nova lista vinculada a mesma. Por exemplo, para o item sobre ns da lista principal,
temos uma lista com os elementos quem somos, o que fazemos, e o que
pensamos.
 Vamos ver, no exemplo a seguir, como esta hierarquia construida. Basicamente,
dentro de cada li em que temos o texto do respectivo elemento (por exemplo sobre
ns), temos tambm uma nova lista ul com seus respectivos elementos:
 <nav>
<ul>
<li>
<a href="#">Sobre Ns</a>
<ul>
<li><a href="#">Quem Somos</a></li>
<li><a href="#">O que Fazemos</a></li>
<li><a href="#">O que Pensamos</a></li>
</ul>
</li>
<li>
<a href="#">Nossos Produtos</a>
<ul>
<li><a href="#">Produto A</a></li>
<li><a href="#">Produto B</a></li>
<li><a href="#">Produto C</a></li>
<li><a href="#">Produto D</a></li>
</ul>
</li>
<li>
<a href="#">Nossos Servios</a>
<ul>
<li><a href="#">Servio Principal</a></li>
<li><a href="#">Outro Servio</a></li>
</ul>
</li>
<li>
<a href="#">Nossos Clientes</a>
<ul>
<li><a href="#">Clientes no Varejo</a></li>
<li><a href="#">Clientes na Indstria</a></li>
<li><a href="#">Clientes Governo</a></li>
<li><a href="#">Depoimentos</a></li>
</ul>
</li>
</ul>
</nav>

Com isso, temos todo nosso menu criado. Obviamente, em um menu real,
teremos que substituir o # dentro do href no elemento a pelo link de cada item do
menu.
3. Criando o Layout de Nosso Menu em CSS

Na unidade anterior, aprendemos a criar uma pgina HTML e construirmos a

hierarquia de nosso menu. Ou seja, agora sabemos como criar o primeiro e segundo
nvel de um menu hierrquico, definindo o ttulo de cada item do menu e o link do
mesmo para outra pgina Web.

Nesta unidade, vamos trabalhar o layout deste menu, e para isso utilizaremos
outra linguagem, a CSS, ou Cascading Style Sheet, que a linguagem utilizada para
definir a forma como elementos HTML so exibidos.

3.1 Alterando o Fundo

Inicialmente, faremos uma nica alterao em nosso menu, que colocar todos
os elementos com fundo azul, como o menu final que desejamos. Isto servir para
vermos uma das formas de trabalhar com CSS em uma pgina HTML:

<!DOCTYPE html>
<html>
- <head>
- <title>Exemplo de Menu com jQuery</title>
-
- <style>
- nav ul li {background-color:#0BD;}
-
- </style>
-
-
- </head>
-
-
- <body>
- <nav>
-
- <ul>
- <li>
-
- <a href="#">Sobre Ns</a>
- <ul>
-
- <li><a href="#">Quem Somos</a></li>
- <li><a href="#">O que Fazemos</a></li>
M
I <li><a href="#">O que Pensamos</a></li>
N </ul>
H
A </li>
-------------AQUI SEGUE COM O RESTANTE DA PGINA HTML--------
P
 Observe que acrescentamos apenas trs linhas para fazer a alterao da cor do
fundo, resultando neste efeito da imagem a seguir:

O que nos interessa, aqui, e analisar as trs linhas que foram adicionadas em
nossa pgina HTML:

<style>
nav ul li {background-color:#0BD;}
</style>

As tags <style> e </style> definem que o que est entre elas o estilo da
pgina, e est escrito em linguagem CSS, no em linguagem HTML. Vamos ento nos
concentrar neste contedo, para entender exatamente o que ele est fazendo:

Primeiro, olharemos o que entre { e }. Basicamente, aqui, temos a definio

de valores de propriedades CSS de alguns elementos da pgina HTML. No caso em
questo, estamos dizendo que a propriedade background-color, ou seja, a propriedade
cor do fundo, passa a ter o valor 0BD.

No nosso objetivo nesta apostila tratarmos de codificaes de cor. Basta, por

enquanto, saberem que 0BD representa uma cor azul com um certo toque de verde.
(voc pode pesquisar mais na Internet ou mesmo nas apostilas sobre cor da Alfamdia.
Da mesma forma, diversos sites na Internet fornecem o cdigo HTML ou CSS da cor
que voc selecionar).

A parte mais complexa, e importante, a definio de que elementos tero este

novo valor de cor de fundo. Isto dado pela lista de elementos antes das chaves. No
caso em questo, temos a sequncia nav, ul e li. Isto significa todos os elementos
li que esto dentro de algum elemento ul que esto dentro de algum elemento
nav.

Obs: neste momento, obteramos o mesmo efeito com o cdigo li {background-

color:#0BD;}, porm com um efeito colateral muito importante e grave. Se a pgina
HTML utilizasse listas em outro local, sem nenhuma relao com a navegao do site,
tais listas teriam sua cor de fundo tambm alterada para azul, que no o que
queremos. Desta forma, estamos limitando este efeito do CSS apenas aos elementos
contidos dentro de nosso elemento nav, ou seja, apenas ao cdigo HTML entre as
tags <nav> e </nav>.

3.2 Alterando o Modo de Exibio para Inline

Por padro, listas so exibidas de uma forma particular, como mostrado nas
imagens anteriores. No entanto, no queremos que nossa lista seja exibida como uma
lista tpica, pois estamos utilizando os elementos ul e li apenas para estruturar
nosso menu.

Felizmente, a prpria exibio no formato lista algo que podemos controlar no

CSS, atravs de um atributo chamado display. Ao alterarmos este atributo, podemos
definir que uma lista ir se comportar como outro elemento.

Um dos valores possvels de display, o inline, que basicamente significa

que o elemento no interfere no fluxo de exibio. Por exemplo, um elemento i, que
significa itlico, do tipo inline. Em uma frase, podemos ter uma palavra em itlico,
e o texto segue fluindo normalmente.

Observe como alteramos o CSS para que os elementos da lista sejam exibidos
como inline, e o resultado que isso gera em nossa exibio:

<style>
nav ul li {display:inline;background-color:#0BD;}
</style>
 Voc pode observar que, utilizando ; como separador, podemos alterar o valor
de diversos atributos CSS. No caso, alteramos display para inline, com o resultado
conforme mostrado a seguir:

3.3 Exibindo o Menu na Horizontal

Utilizaremos agora o atributo float com valor de left para fazermos o menu
funcionar na horizontal.

float um atributo muitas vezes utilizado para posicionarmos imagens em uma

pgina HTML com o texto circulando ao redor, como na imagem a seguir:

No exemplo acima, definimos o atributo float da imagem como left, fazendo

com que a imagem ficasse posicionada a esquerda e o texto a direita.

Se utilizamos duas imagens com atributo float como left, temos o efeito
mostrado a seguir:
 Utilizaremos o mesmo atributo float com outro objetivo, o de alinharmos os
elementos do menu principal, um ao lado do outro. Observem o cdigo e o efeito
resultante:

<style>
nav ul li {float:left;display:inline;background-color:#0BD;}
</style>

relativamente bvio que ainda temos alguns elementos para ajustar. Por
exemplo, queremos que os menus de segundo nvel sejam verticais, e no horizontais
como os de primeiro nvel. Porm, nosso menu j comea a tomar forma.

3.4 Definindo um Espao ao Redor dos Itens

Neste momento, sem nenhuma especificao de layout a respeito, o fundo em cor

azul est encostando nos textos, sem nenhuma borda. Alm disso, nossos items de
menu tem um sublinhado. Isso um layout padro nos browsers para indicar que
determinado texto um link, mas desnecessrio para um menu.

Vamos enderear estes dois aspectos do layout com nosso novo comando CSS:
 <style>
nav a {text-decoration:none;display:block;padding:10px 10px;}
nav ul li {float:left;display:inline;background-color:#0BD;}
</style>

Observe que nossa nova linha afeta o elemento a. Note tambm que a instruo
CSS utiliza a sequncia nav, a. Com isso, estamos redefinindo os atributos de todos
os elementos a contidos em nosso elemento de navegao, sem afetar o layout do
restante da pgina.

No caso especfico, estamos definindo o valor de trs atributos, conforme a

seguir:

text-decoration: este atributo tem alguns valores possveis, entre eles

underline, que faz com que um elemento apresente um sublinhado. Ao
definirmos como none, estamos dizendo que nenhum efeito, inclusive o
de sublinhado, mostrado.

Display: ns j vimos o valor inline para o atributo display. O valor

block faz com que o elemento fique isolado dos demais, iniciando uma
nova linha e ocupando todo o espao disponvel. Elementos como p, de
pargrafo, so exibidos por padro no formato block.

Padding: este atributo define o espao entre a borda e o elemento. Por

exemplo, ao definirmos 10px 10px estamos dizendo que tanto para os
lados, quanto para cima e para baixo, estamos criando um espao de 10
pixels.

O resultado deste novo conjunto de atributos mostrado a seguir. Note que agora
temos um espaamento maior entre os elementos, que um dos objetivos que
queremos, alm de no existir mais o sinal de sublinhado.
 Obs: um observador mais atento pode se perguntar por que os elementos do
submenu no esto um abaixo do outro, j que definimos o display como block.
Isso se deve ao fato de que fizemos a definio de block apenas no elemento a, e
ele est contido no elemento li que esta definido como float de valor left. Assim,
cada elemento li, por seu float: left, est ao lado do outro, e mudanas no elemento
interno a no fazem diferena no alinhamento entre os elementos li.

3.5 Forando o Menu Secundrio para Vertical

Observe agora, quando colocamos uma terceira linha em nosso css:

<style>
nav a {text-decoration:none;display:block;padding:10px 10px;}
nav ul li {float:left;display:inline;background-color:#0BD;}
nav ul li ul {width:170px;}
</style>

Ns apenas defimos uma largura (170 pixels) para as listas (ul) que esto
dentro dos elementos (li) da lista (ul) principal. Notem a sequncia de tags: nav,
ul,li,ul.

S que a simples definio de uma largura mxima de nossos elementos de lista

secundria gera uma mudana significativa no layout. Observe a imagem:
 Como agora existe um limite na largura dos elementos do menu secundrio, eles
no podem mais ficar alinhados um ao lado do outro, apesar do atributo float como
left. Agora cada linha ocupa no mximo 170 pixels, e o elemento seguinte
mostrado na linha abaixo do elemento anterior.

3.6 Isolando o Posicionamento do Menu Principal do Menu

Secundrio

Observando a imagem anterior, fcil ver que o segundo item do menu principal
est alinhado a direita dos items do menu secundrio do primeiro item do menu
principal.

Isso nos gera dois problemas. Primeiro, temos uma distncia entre os itens que
talvez seja maior do que gostaramos. Mas, em segundo lugar, se ns deixarmos a
posio do menu principal ser afetada pelo menu secundrio, isso vai resultar que o
menu principal vai mudar a medida que os menus secundrios so mostrados e
apagados. No o que queremos.

Para resolver isso, utilizaremos o atributo CSS que faz com que um elemento no
afete o fluxo dos demais elementos da pgina, o atributo position com valor
absolute. Sempre que um elemento tem position:absolute, isso significa que a
pgina exibida do mesmo jeito, quer aquele elemento exista ou no.

Observe o cdigo e o efeito resultante. Observe tambm o efeito colateral

indesejado e como endereamos o mesmo:

<style>
nav a {text-decoration:none;display:block;padding:10px 10px;}
nav ul li {float:left;display:inline;background-color:#0BD;}
nav ul li ul {position:absolute;width:170px;}
</style>
 O lado positivo deste cdigo que agora o alinhamento dos elementos do menu
principal independe dos menus secundrios. Se, por experincia, voc remover o menu
secundrio, o menu principal permanecer inalterado.

Ocorre que, justamente por os elementos no terem mais um impacto nas

posies uns dos outros, eles pararam de ter uma largura fixa, que o efeito colateral
mencionado. Compare com o prximo cdigo e imagem resultante.

<style>
nav a {text-decoration:none;display:block;padding:10px 10px;}
nav ul li {float:left;display:inline;background-color:#0BD;}
nav ul li ul {position:absolute;width:170px;}
nav ul li ul li {width:170px;background-color:#0BD}
</style>

a
l
e
r
t
(

 Com a alterao anterior, os elementos da lista secundria (o li do ul de
dentro da lista principal) pararam de ocupar obrigatoriamente todo o espao,
precisamos tambm nestes elementos especificar a largura como 170 pixels.

3.7 O Resultado Final, HTML e CSS

Se voc nunca trabalhou com CSS antes, provavelmente considerou difcil esta
unidade.

O motivo para isso muito simples: CSS Difcil.

Mais exatamente, CSS em si no difcil, mas entender como os diferentes

atributos CSS afetam o layout de uma pgina realmente complexo. Mesmo
webdesigners experientes encontram dificuldade quando especificam um layout mais
complexo.

Considere, ento, que se voc conseguiu entender o suficiente para ter uma
percepo razovel de como o CSS funciona e como ele foi utilizado para modelar o
layout da pgina, mesmo que voc no se sinta seguro para criar um layout to
complexo sozinho, estamos no caminho certo.

Apesar de serem apenas 4 linhas de cdigo CSS, mostramos aqui um layout

bastante sofisticado, especialmente no que diz respeito ao posicionamento dos
elementos. Levar bastante tempo at voc adquirir naturalidade em utilizar o CSS para
posicionamentos desta natureza. Por hora, pense apenas que importante voc ter uma
noo de que estes comandos CSS dizem respeito a cores (background-color),
detalhes dos elementos (text-decoration para definir que no teremos sublinhado) e
diversas caractersticas de largura e posicionamento.
4. jQuery - Criando Interao com o Usurio

Conforme vimos nas unidades anteriores, temos agora um menu com os

elementos definidos e com um layout adequado, porm ainda sem interao com o
usurio.

Vamos pensar, ento, nas interaes que desejamos:

Queremos que os submenus inicialmente no estejam visveis

Queremos que o item no qual o mouse estiver esteja em uma cor diferente
dos demais

Queremos que os submenus sejam exibidos e fechados conforme o usurio

navega pelos itens principais

Antes, porm, de fazermos qualquer destas aes, vamos comear a praticar o

jQuery e entender como podemos definir aes quando o mouse est sobre um
elemento de nosso menu.

4.1 Nosso Primeiro Cdigo jQuery

Observe o cdigo a seguir:

<script src="jQuery/jquery-3.0.0.min.js"></script>
<script>
$(function () {
alert(ola mundo);
});
</script>

Este cdigo pode ser colocado dentro do elemento head, ou seja, entre as tags
<head> e </head>, antes ou depois do cdigo CSS.

A primeira linha deste cdigo justamente carrega nossa biblioteca jQuery, para
podermos utiliz-la em nosso programa javascript. De forma muito simplificada,
podemos pensar neste arquivo jquery-3.0.0.min.js como uma coleo de funes j
prontas que utilizaremos em nosso programa. Podemos pensar em programar com
jQuery simplesmente como programar em javascript, fazendo uso de toda uma srie de
funes que algum j criou antes.
 Na primeira linha, temos ento <script src=jQuery/jquery-
3.0.0.min.js></script>. Se voc est utilizando esta apostila junto com os cdigos-
fonte, por exemplo como parte do curso de Desenvolvimento Web, esta linha far com
que o programa acesse o arquivo que est no diretrio jQuery.

Se voc est com acesso apenas a esta apostila, pode alterar esta linha para a
linha abaixo, que far com que o jQuery seja trazido da internet:

<script src="https://code.jquery.com/jquery-3.0.0.min.js></script>

Se tudo funcionar, ao acessar a pgina, voc ver uma janela popup com a
mensagem ola mundo. Para isso, utilizamos o comando javascript alert, mas o que
nos interessa neste momento entender o uso que estamos fazendo do jQuery.

Para tanto, observe a linha a seguir:

$(function () {
//commandos em javascript e jQuery.
});
Esta linha uma forma simplificada de escrever o seguinte comando jQuery:

$(document).ready(function(){
//commandos em javascript e jQuery.
});

Por sua vez, o commando acima est nos dizendo que, quando o documento
estiver pronto, ou seja, quando a pgina HTML tiver sido toda trazida para o
navegador, deve ser executada a funo definida por function() { }.

Assim sendo, ao ser exibido o alerta, sabemos que o jQuery est funcionando,
que o documento foi carregado, e que estamos prontos para substituir o alert pelos
cdigos em javascript e jQuery que permitiro o controle de nosso menu.

4.2 Entendendo a funo hover do jQuery

Vamos agora entender como funciona a funo hover e como associamos funes
a elementos do HTML. Felizmente, a sintaxe do jQuery para identificar elementos
lembra um pouco o que acabamos de ver como forma do CSS tambm identificar
elementos.

Assim, observe o cdigo jQuery a seguir:

 <script>
$(function () {
$('nav li').hover(function () {console.log("entrou");} , function ()
{console.log("saiu");}); });
</script>

A duas questes nesta chamada de funo que precisamos entender. A primeira

delas se refere a forma como o jQuery trabalha. Observe como feita a chamada da
funo hover, prestando ateno a parte em negrito:

$('nav li').hover()

Este um conceito fundamental no uso do jQuery, que visa facilitar a construo

de programas utilizando o mesmo. Estamos associando a funo hover a nav li. O
que isso significa? Algo bastante semelhante ao conceito que utilizamos tambm no
CSS. Estamos dizendo que todos os elementos do tipo li contidos dentro de nav,
tero, associado a determinados eventos vinculados a funo jQuery hover, um
conjunto de aes.

Para entendermos isso melhor, criamos duas funes que chamam console.log.
Console.log exibe mensagens na tela do console, que no Chrome aberta teclado
F12.

Observe a figura abaixo, com este cdigo aberto no Chrome e a tela de console
sendo exibida:
 Vamos agora ver a especificao da funo jQuery de hover, para entender
melhor o que estamos vendo:

.hover( handlerIn, handlerOut )

handlerIn: uma funo que executa quando o mouse entra o elemento.

handlerOut: uma funo que executa quando o mouse sai do elemento.

Assim, observando nossa funo, o que temos uma funo jQuery associada a
todos os elementos do tipo li includos dentro do elemento nav. Em todos eles,
vinculamos a funo .hover, dois handlers, ou seja, duas funes. A primeira delas
exibe uma mensagem no console (entrou), e a segunda, uma outra mensagem no
console (saiu).

4.3 Alterando a Cor de Fundo.

Observe o cdigo a seguir:

 $(function () {
$('nav li').hover(
function () {
$(this).css({"background-color" : "#0AC"});
},
function () {
$(this).css({"background-color" : "#0BD"});
}
);
});

Novamente, estamos com um cdigo que, em alguns aspectos, se assemelha ao

cdigo de nosso CSS. fcil identificar o atributo background-color e os valores de
cor 0AC e 0BD. Em termos do significado destes valores, como dissemos, no
objetivo desta apostila, mas basicamente temos o valor de 0AC uma cor azul com
tons de verde ligeiramente mais escura que o tom anterior.

O item que merece uma ateno bastante particular o this.

Conforme vimos em $(nav li), ns podemos definir o acesso aos elementos

do HTML de uma forma muito semelhante ao que fazemos no CSS. Por exemplo,
poderamos utilizar o cdigo a seguir no primeiro handler de hover:

$(nav li).css({"background-color" : "#0AC"});

Neste caso, que resultado teramos?

Teramos que, assim que o mouse entrasse em qualquer elemento li contido no

elemento nav, todos os elementos li dentro de nav teriam sua cor de fundo
alterada.

Obviamente no o que queremos, queremos que apenas um elemento,

especificamente o elemento que gerou a chamada da funo, tenha sua cor de fundo
alterada.

Eis, assim, que temos aqui um primeiro contato com o uso de this em
javascript. O this faz uma referncia a instncia do objeto em que aquela funo est
executando. Em outras palavras, no caso em questo, this vai referenciar exatamente o
elemento li que gerou a chamada do hover.
 Assim sendo, o cdigo acima faz com que, sempre que o mouse entrar em um
elemento li de nav, seja atribudo um valor 0AC ao atributo background-color
daquele elemento em particular, e sempre que o mouse sair do elemento, seja atribudo
o valor 0BD.

Como resultado, temos agora que todo elemento li no qual o mouse se encontra
mostrado com um cor mais escura que os demais.

Resta-nos, agora, ento, apenas fazer a abertura e fechamento dos menus.

4.4 Abrindo e Fechando os Menus.

Para abrir e fechar os menus secundrios, vamos utilizar duas funes chamadas
slideDown e slideUp.

Basicamente, ambas so chamadas como mtodos de um elemento, da mesma

forma que as funes css e hover que vimos anteriormente. Enquanto
slideDown, sendo chamada em uma das listas ir mostra-la, slideUp ir fazer ela
desaparecer. Adicionalmente, isso ser feito com um movimento de respectivamente
ampliar e reduzir a altura do elemento, dando a ideia que o menu est abrindo para
baixo, e depois fechando.

Estaremos utilizando um parmetro na funo, que define o nmero de

milissegundos que levar para a animao de abrir e fechar o menu transcorrer.

Assim, em nosso exemplo utilizaremos 200 milisegundos, mas voc pode alterar
este cdigo para tornar a animao mais lenta ou mais rpida.

Em resumo, portanto, um comando do tipo $('nav ul).slideDown(200) faria

com que todos os elementos ul de dentro do nav ficassem visveis com uma
animao que duraria 200 milisegundos.

Entretanto, assim como vimos na alterao da cor de fundo, isso no resolve

exatamente nosso problema. Precisamos utilizar o parmetro this para poder indicar
que queremos animar um elemento ul especfico, mais exatamente, um elemento ul
que est contido dentro do elemento li referenciado pelo this, aquele elemento li,
alias, cuja cor de fundo acabamos de mudar.

Observem o cdigo abaixo, e vamos ento discutir esta questo:

 $(function () {
$('nav li').hover(
function () {
$(this).css({"background-color" : "#0AC"});
$('ul', this).slideDown(200);
},
function () {
$(this).css({"background-color" : "#0BD"});
$('ul', this).slideUp(200);
}
);
});

A maior parte deste cdigo j foi explicada. Estamos utilizando slideDown e

slideUp para abrir e fechar os menus. O que nos resta entender uma nova forma de
referenciar que utilizamos:

$(ul,this)

Ocorre que no queremos tratar do elemento this que recebemos, pois ele se
refere ao elemento li, e ns queremos o elemento ul contido dentro do elemento
li (revisem a unidade 2, em que construmos o HTML original).

Este comando justamente realiza isso, ele retorna o objeto ul apenas do

universo de elementos contidos dentro do elemento especificado pelo segundo
parmetro, que no caso o elemento li que gerou a chamada de hover.

Na verdade, tambm este um comando simplificado, cujo equivalente :

jQuery(this).find("ul");

Ou seja, estamos utilizando um comando que encontra (find) os elementos ul

que esto contidos no elemento especificado por this.
5. Finalizando e Seguindo Adiante

Se voc foi construindo todo o cdigo at aqui, deve ter percebido que restou
apenas um ltimo detalhe. Inicialmente, todos os menus comeam visveis. Isso
facilmente resolvvel alterando um detalhe no CSS, que mostramos em negrito a seguir:

<style>
nav a {text-decoration:none;display:block;padding:10px 10px;}
nav ul li {float:left;display:inline;background-color:#0BD;}
nav ul li ul {display:none;position:absolute;width:170px;}
nav ul li ul li {width:170px;background-color:#0BD}
</style>

Assim como mostramos valores de display como inline e block, temos

tambm o none, que simplesmente faz com que o elemento no seja exibido. No
nosso caso, teremos o elemento exibido apenas a partir da execuo da funo
slideDown.

E, com isso, encerramos a construo de um menu simples de dois nveis em

jQuery. A seguir, para o caso de no teres acesso aos fontes, apresentamos o cdigo
completo da pgina HTML que construmos.

O que voc far a partir daqui depender da forma como est utilizando esta
apostila. Se como parte de nossos treinamentos, nossa recomendao revisar os
vdeos, que podem conter mais detalhes sobre o processo de construo do menu,
assistir ou revisar nossos vdeos e apostilas de HTML, CSS, Lgica de Programao e
Javascript, e, se estiver realizando nossas modalidades presenciais, levar ao instrutor
suas dvidas no prximo encontro.

Em qualquer das hipteses, agora hora de trabalhar e modificar este menu.

Incluir e excluir elementos do menu, alterar detalhes no CSS e entender os efeitos deles
no layout, modificar parmetros como a velocidade do slideDown, e, por fim,
comear a incluir alguns cdigos adicionais para tornar o menu mais sofisticado.

Somente praticando, voc comear a ter uma naturalidade maior no uso de

HTML, CSS e jQuery.

5.1 Fonte Completo do Menu

<!DOCTYPE html>
<html>
<head>
<title>Exemplo de Menu com jQuery</title>
<style>
nav a {text-decoration:none;display:block;padding:10px 10px;}
nav ul li {float:left;display:inline;background-color:#0BD;}
nav ul li ul {display:none;position:absolute;width:170px;}
nav ul li ul li {width:170px;background-color:#0BD}
</style>
<script src="https://code.jquery.com/jquery-3.0.0.min.js></script>
<script>
$(function () {
$('nav li').hover(
function () {
$(this).css({"background-color" : "#0AC"});
$('ul', this).slideDown(200);
},
function () {
$(this).css({"background-color" : "#0BD"});
$('ul', this).slideUp(200);
}
);
});
</script>

</head>
<body>
<nav>
<ul>
<li>
<a href="#">Sobre Ns</a>
<ul>
<li><a href="#">Quem Somos</a></li>
<li><a href="#">O que Fazemos</a></li>
<li><a href="#">O que Pensamos</a></li>
</ul>

</li>
<li>
<a href="#">Nossos Produtos</a>
<ul>
<li><a href="#">Produto A</a></li>
<li><a href="#">Produto B</a></li>
 <li><a href="#">Produto C</a></li>
<li><a href="#">Produto D</a></li>
</ul>

</li>
<li>
<a href="#">Nossos Servios</a>
<ul>
<li><a href="#">Servio Principal</a></li>
<li><a href="#">Outro Servio</a></li>
</ul>

</li>
<li>
<a href="#">Nossos Clientes</a>
<ul>
<li><a href="#">Clientes no Varejo</a></li>
<li><a href="#">Clientes na Indstria</a></li>
<li><a href="#">Clientes Governo</a></li>
<li><a href="#">Depoimentos</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>