Menu de Categorias em jQuery

Menu de Categorias em jQuery


 

1. Objetivo

Faremos uma página como menu: nós criaremos uma página com uma estrutura de menus que terá:

  • Uma foto da categoria
  • O nome da categoria
  • Link qualquer

 

2. Montando a nossa estrutura HTML

Para nossa parte HTML, vamos fazer uma divisão simples, que será a divisão onde iremos concatenar todas as categorias que quisermos. Para este tutorial, iremos utilizar a categoria 0, que mostra todas as categorias principais do Buscapé + as Top 5 Categorias.

Iremos utilizar, para otimizar o tutorial, somente as Top 5 Categorias.

Então basicamente, o nosso HTML terá no seu body somente uma div, que daremos a ela o ID = concat.

 

3. Montando a nossa estrutura jQuery

Agora começa o código de verdade!
O que o script deve fazer:

  1. Ler as categorias do XML/Json chamadas pela url do findCategoryList com o parâmetro categoryId = 0;
  2. Ler o thumbnail de cada categoria na mesma url;
  3. Ler os nomes de cada categoria na mesma url;
  4. Mesclar cada uma das informações em uma só DIV;
  5. Concatenar na DIV que criamos em nosso HTML;

Nosso código jQuery deverá ficar assim:

	$(document).ready(function() {
           $.ajax({
              url: "http://{ambiente}.buscape.com/service/findCategoryList/{app-token}/?categoryId=0&format=json",
              jsonp: "callback",
              dataType: "jsonp",
              success: function(result) {
                 $.each(result.top5category, function (i, item) {
                    $("#concat").append("<div><img src=\""+result.top5category[i].top5category.thumbnail.url+"\"/><br><p>"+result.top5category[i].top5category.name+"</p><br><a id=\""+"URL"+i+"\"href=\""+"URL_DA_CATEGORIA"+i+"\"</div>"); 
                 });
              }
           });
	});

Sua página deverá ficar próxima dessa maneira:
Tutorial_Menu_Pagina.JPG

 

Agora basta implementar seu código CSS da forma que preferir e usar o script jQuery com outro loop para adicionar as URLs para suas páginas!