Já abordámos a programação HTML e programação PHP anteriormente e agora é altura de iniciarmos o nosso Guia jQuery! A esta altura você provavelmente já consegue criar as suas próprias páginas HTML / CSS com alguma qualidade, mas aquilo que se pretende não é apenas alguma qualidade, mas sim a melhor qualidade. Para adicionar mais qualidade, beleza e também funcionalidade aos seus websites, deverá considerar utilizar jQuery como um complemento que o ajudará a alcançar o que pretende. jQuery não poder ser utilizado sem Javascript, pois sem Javascript você não poderá adicionar os comportamentos, sofisticadas interacções e outras funcionalidades ao seu website. Certamente deverá saber também que Javascript é considerado um “monstro” da programação, super complexo que nem todos conseguem dominar, e é aí que está o segredo jQuery guardado. Alguns dos gigantes da internet, como o Google, WordPress ou Amazon utilizam jQuery nas suas páginas. Porquê? É isso que lhe vamos dar a entender com o Guia jQuery da Escola Criatividade!
Não perca os artigos anteriores relacionados com jQuery e Javascript:
- Tutorial jQuery: o que é e como usar o jQuery!
- Plugin jQuery para criação de Templates
- 15 Efeitos jQuery Fantásticos e Gratuitos
- Javascript para desenvolvedores PHP
- Javascript Explicado – Abordagem Básica
- Javascript Explicado – Abordagem Avançada
Nesta terceira parte do Guia jQuery vamos abordar os Menus e como os utilizar de forma correcta e brilhante em jQuery. Curioso? Continue a ler!
Já falámos sobre menus anteriormente, mas nunca aprofundámos a questão. Neste capítulo do Guia jQuery da Escola Criatividade vamos fazer uma abordagem mais intrínseca aos menus, criando menus bonitos e funcionais em jQuery para que você possa aplicá-los nos seus websites, embelezando e levando qualidade aos seus visitantes.
1. MENU EXPANSÍVEL
Vamos começar por criar um menu vertical que possa ser expandido ou compactado, o que faz com que o próprio menu esteja dividido em áreas de interesse, facilitando a navegação dos visitantes.
Insira o seguinte código num documento HTML para criar uma lista não ordenada de itens:
<nav role="navigation"> <ul id="menu"> <li><a href="#">Menu1</a> <ul class="active"> <li><a href="#">SubMenu1</a></li> <li><a href="#">SubMenu2</a></li> <li><a href="#">SubMenu3</a></li> </ul> </li> <li><a href="#">Menu2</a> <ul> <li><a href="#">SubMenu1</a></li> <li><a href="#">SubMenu2</a></li> <li><a href="#">SubMenu3</a></li> </ul> </li> <li><a href="#">Menu3</a> <ul> <li><a href="#">SubMenu1</a></li> <li><a href="#">SubMenu2</a></li> <li><a href="#">SubMenu3</a></li> </ul> </li> </ul> </nav>
De seguida crie um ficheiro CSS e insira o seguinte código para introduzir a estilização do menu:
#menu, #menu ul {
list-style-type: none;
padding: 0;
margin: 0;
}
#menu li {
cursor: pointer;
background: #94C5EB;
border-bottom: 1px solid #444;
}
#menu li a { text-decoration: none; }
#menu > li > a {
padding: 2px 10px;
font-weight: bold;
}
#menu li li {
cursor: auto;
border: 0;
padding: 0 14px;
background-color: #fff;
}
O último passo é criar uma ligação à biblioteca jQuery para que os efeitos possam ser efetuados, e criar um pequeno ficheiro com um script:
Insira dentro da tag <head> do seu documento HTML as seguintes linhas:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" ></script> <script type="text/javascript" src="script.js"></script>
De seguida crie um ficheiro script.js e insira o seguinte código:
$('#menu > li > ul')
.hide()
.click(function(event) {
event.stopPropagation();
});
$('#menu > li').toggle(function() {
$(this).find('ul').slideDown();
}, function() {
$(this).find('ul').slideUp();
});
Salve todos os ficheiros e observe o resultado:
Se clicar no titulo de cada um dos menus irá verificar que estes se expandem ou colapsam.
2. PROPAGAÇÃO DE EVENTOS
A propagação de eventos descreve a forma como um evento é tratado na hierarquia DOM. A forma mais fácil de entender a propagação de eventos é vê-la em ação. Para isso, vamos-lhe apresentar um pequeno exemplo que consiste em duas divs, uma dentro de outra. Ambas as divs irão ter um id de outer e inner. Cria um ficheiro HTML e insira o seguinte código
<div id="outer">
Clique aqui!
<div id="inner">
Click aqui!
</div>
</div>
De seguida crie um ficheiro script.js e insira o seguinte código para introduzir o evento que irá ser acionado quando você clicar em alguma das div’s:
$('div').click(function() {
alert('Hello from ' + $(this).attr('id'));
});
De seguida insira o seguinte código no seu ficheiro HTML, dentro da tag <head> para fazer a ligação ao jQuery e ao ficheiro script.js:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" ></script> <script type="text/javascript" src="script.js"></script>
3. INDICADORES NOS MENUS
É possível introduzir indicadores nos menus, fornecendo um elemento visual aos seus visitantes sobre o estado de um menu, se está expandido ou colapsado. Assim, você estará não só a introduzir um novo elemento no seu design, como também estará a contribuir para que os seus visitantes se sintam mais à vontade no seu website, contando com uma melhor usabilidade com a introdução de um simples elemento visual. São estes pequenos pormenores que podem fazer a diferença na hora de um visitante voltar ao seu website ou não, partilhá-lo com os amigos, voltar mais tarde ou se for aplicável, tornar-se um assinante do mesmo. Assim, para introduzir este elemento iremos tirar partido do CSS Sprite, utilizando uma imagem que tem os dois elementos visuais, a seta orientada para cima, e a seta orientada para baixo. Por defeito os menus estão colapsados, então por defeito também iremos introduzir a seta para baixo.
Crie um ficheiro HTML e insira o seguinte código:
<nav role="navigation"> <ul id="menu"> <li><a href="#">Menu1</a> <ul class="active"> <li><a href="#">SubMenu1</a></li> <li><a href="#">SubMenu2</a></li> <li><a href="#">SubMenu3</a></li> </ul> </li> <li><a href="#">Menu2</a> <ul> <li><a href="#">SubMenu1</a></li> <li><a href="#">SubMenu2</a></li> <li><a href="#">SubMenu3</a></li> </ul> </li> <li><a href="#">Menu3</a> <ul> <li><a href="#">SubMenu1</a></li> <li><a href="#">SubMenu2</a></li> <li><a href="#">SubMenu3</a></li> </ul> </li> </ul> </nav
De seguida crie um ficheiro CSS e insira o seguinte código:
#menu, #menu ul {
list-style-type: none;
padding: 0;
margin: 0;
}
#menu li {
cursor: pointer;
background: #94C5EB;
border-bottom: 1px solid #444;
background: #94C5EB url(arrows.png) no-repeat right top;
}
#menu li a { text-decoration: none; }
#menu > li > a {
padding: 2px 10px;
font-weight: bold;
}
#menu li li {
cursor: auto;
border: 0;
padding: 0 14px;
background-color: #fff;
background-image: none;
}
Crie um ficheiro script.js e insira o seguinte código:
$('#menu > li').toggle(function() {
$(this)
.css('background-position', 'right -20px')
.find('ul').slideDown();
}, function() {
$(this)
.css('background-position', 'right top')
.find('ul').slideUp();
});
De seguida insira o seguinte código no seu ficheiro HTML para fazer a ligação ao jQuery e ao ficheiro script.js:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" ></script> <script type="text/javascript" src="script.js"></script>
Salve os documentos e observe o resultado:
Abraço!
José Almy
Diogo, como sempre muito bom! Parabéns!