Já abordámos a programação HTMLprogramaçã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!

jQuery

Não perca os artigos anteriores relacionados com jQuery e Javascript:

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:

Guia jQuery

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:

Guia jQuery

Abraço!

 

Autor: Diogo Espinha

Blog do Autor | Artigos do Autor:

Workaholic e totalmente viciado em computadores, Internet e desporto motorizado. Adora praticar desporto, é um curioso da programação em PHP, CSS e HTML5 e não dispensa a companhia do seu Mac OSX 86 Snow Leopard!

  • Explorer - Factory Construction & Ship Building Joomla Theme
  • Justice - Attorney and Law Firm Joomla Template
  • OwnFolio - One Page Personal Portfolio / vCard / Resume / Showcase Joomla Template
  • Big Business - Responsive Template
  • Merab - Creative Multipurpose Drupal 8 Theme
  • Fitness Academy Joomla Template
  • Fruition - Business Joomla Template
  • Educate | Education & Courses, Kindergartens Joomla Template
  • Constructive - Contractors Multipurpose Joomla Landing Page Theme
  • Vina Bubox - VirtueMart Joomla Template for Online Stores
  • BizOne - One Page Parallax Drupal Theme
  • LawHouse - Responsive Lawyers Attorneys Joomla Template

Gostou deste artigo? Então torne-se fã do Blog no Facebook!



Comentários dos Alunos


  1. José Almy
    14 de junho de 2012

    Diogo, como sempre muito bom! Parabéns!



  2. Roberto
    4 de fevereiro de 2014

    Diogo e se eu quiser fazer assim?
    Menu1
    SubMenu1
    SubMenu2
    Menu2
    SubMenu1
    SubMenu2
    SubMenu3
    SubMenu4
    SubMenu5
    Menu3
    SubMenu1
    SubMenu2
    Sub-SubMenu1
    Sub-SubMenu2
    Sub-SubMenu3
    Sub-SubMenu4
    Sub-SubMenu5
    Sub-SubMenu6
    SubMenu3
    SubMenu4
    Sub-SubMenu1
    Sub-SubMenu2
    SubMenu5
    SubMenu6
    Menu4
    SubMenu1
    SubMenu2
    SubMenu3
    SubMenu4
    SubMenu5
    Menu5
    Menu6
    SubMenu1
    SubMenu2
    SubMenu3
    SubMenu4
    SubMenu5
    Menu7
    Menu8…?
    Estou muito preocupado com o projeto que estou fazendo e essa parte não está dando certo de menus espanciveis…


RSS
Twitter
Facebook
Comentários
ASSINANTES
SEGUIDORES
FÃS
COMENTÁRIOS
7794

Subscrever Newsletter
Subscreva a Newsletter:



Aplicativos Android, iPhone e Muito Mais!




Assine a Escola Criatividade Assine a Newsletter da Escola Criatividade Escola Criatividade no Twitter Escola Criatividade no Facebook Escola Criatividade no Youtube Escola Criatividade no Google Buzz