******************************************************************* Primeiro vamos criar o Banco de Dados, as Tabelas e os Dados ******************************************************************* CREATE DATABASE loja; USE loja; CREATE TABLE `categorias` ( `idcategoria` int(10) unsigned NOT NULL auto_increment, `categoria` varchar(45) NOT NULL default '', PRIMARY KEY (`idcategoria`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1; CREATE TABLE `produtos` ( `idproduto` int(10) unsigned NOT NULL auto_increment, `nome` varchar(100) NOT NULL default '', `idcategoria` int(10) unsigned NOT NULL default '0', PRIMARY KEY (`idproduto`), KEY `FK_produtos_categorias` (`idcategoria`), CONSTRAINT `FK_produtos_categorias` FOREIGN KEY (`idcategoria`) REFERENCES `categorias` (`idcategoria`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1; Inserindo os dados para testes INSERT INTO `categorias` (`idcategoria`,`categoria`) VALUES (1,'frutas'), (2,'legumes'), (3,'verduras'); INSERT INTO `produtos` (`idproduto`,`nome`,`idcategoria`) VALUES (1,'alface',3), (2,'chicoria',3), (3,'bertalha',3), (5,'banana',1), (6,'uva',1), (7,'melão',1), (8,'melancia',1), (11,'abacaxi',1), (12,'batata',2), (13,'cenoura',2), (14,'beterraba',2); Agora Vamos aos scripts Primeiro o XMLHTTPRequest que eu chamei de script5.js //Cria a fila de requisições //Variáveis Globais var fila=[]; var ifila=0; var req=CriaReq(); /* Objetivo: Verificar se o navegador suporta XML e criar instâcia do XML. Retorno : tXHR - objeto XML */ function CriaReq() { var tXHR=0; if (window.XMLHttpRequest) { tXHR=new XMLHttpRequest(); //objeto nativo (FF / Safari / Konqueror / Opera / etc) } else{ if (window.ActiveXObject) { // tXHR=new ActiveXObject("Msxml2.XMLHTTP"); //activeX (IE5.5+/MSXML2+) tXHR=new ActiveXObject("Microsoft.XMLHTTP"); //activeX (IE5+/MSXML1) } else //O navegador não tem suporte { tXHR=false; } } return tXHR; //retornar resultado (objeto, ou "false", no caso de erro) } /**********************************************/ function limpaID(id){ var obj= document.getElementById(id); while (obj.hasChildNodes()) obj.removeChild(obj.lastChild); } /**********************************************/ function msg(id,msg) { var obj= document.getElementById(id); obj.appendChild(document.createTextNode(msg)); } /**********************************************/ function RespServOK() { if (req.readyState == 4){ if (req.status == 200) { return true; } else { //Se o servidor retornou outro código que não "200", mostrar o erro. //alert('Erro no acesso aos dados '+ req.readyState +' - '+req.status) ; return false; } } } /**********************************************/ function carregaDados() { var obj= document.getElementById(fila[ifila][0]); req.open('GET', fila[ifila][1], true); req.onreadystatechange=function() { if (RespServOK()){ //Mostra o HTML recebido obj.innerHTML=req.responseText; //Roda o próximo ifila++ if(ifila < fila.length)setTimeout("carregaDados()",100); } } //Executa req.send(null); } /**********************************************/ function ajaxHTML(id,url){ var obj= document.getElementById(id); if (req){ if (!obj.hasChildNodes(obj)){ //Se não tem nós mostra itens //Exibe mensagem msg(id,'Carregando...'); //Adiciona à fila fila[fila.length]=[id,url]; //Se não há conexões pendentes, executa if((ifila+1)==fila.length) carregaDados(); } else{ limpaID(id); } } else{ alert('O navegador não suporta esta tecnologia, use Internet Explorer 6 ou Mozilla FireFox para este sistema'); } } /******************************************************************* Agora o PHP Nome: index.php Objetivo: Listar os registros da tabela Categorias em links que quando clicados mostram os produtos desta categoria e clicando novamente fecha a lista exibida. *******************************************************************/ Teste de Menus Dinâmicos $nome"; echo '
'; } mysql_close($conec); ?> /******************************************************************* finalmente o filtra.php Nome: filtra.php Objetivo: Exibir os produtos de determinada categoria. *******************************************************************/ 0) { while ($linha_tb_prod=mysql_fetch_array($tb_prod)) { $nome=utf8_encode($linha_tb_prod['nome']); echo '   '; echo "$nome"; //echo '
'; echo '
'; } } else{ echo '   '; echo utf8_encode('produto não encontrado'); } mysql_close($conec); ?> Espero que seja interessante pra vocês e ajude em algo.