Entrar

menu desplegable muy practico

Marttyn · · Solicitar retirada
mirad, en la pagina de www.tiendainformaticatotal.com los menues de la izquierda estan bastante chulos (no el diseño, sino la forma en que funcionan). ya que si haces clic se desplega un sub menu. pero lo curioso es que no carga otra pagina, sino que sin pedir informacion al servidor los muestra... esa informacion esta ya en la pagina, solo que esta oculta.
yo logre aislar el codigo fuente de lo que nos interesa, es este y lo podeis tomar como ejemplo:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
</head>

<body>

<div align="center">
  <table border="0" cellpadding="0" cellspacing="0" width="775">
    <tbody><tr> 
      <td valign="top" width="200"> 
        

      <div class="categoria">[url="http://www.tiendainformaticatotal.com/index.asp"]Escaparate.[/url]</div>

      
      
      <div class="categoria">[url="http://www.tiendadeinformatica.es/Comprar-monitores-C-0.html"][/url][url="#muestra"]Monitores.[/url]</div>
      
<div id="monitores" style="display: none;">
<div class="categoriasel" valign="middle">[url="http://www.tiendadeinformatica.es/Comprar-monitor_tactil-S-0.html"][/url][url="http://www.tiendainformaticatotal.com/Comprar-monitor_tactil-S-0.html"]Monitor Tactil.[/url]</div>


<div class="categoriasel" valign="middle">[url="http://www.tiendadeinformatica.es/Comprar-monitores_tft-S-0.html"][/url][url="http://www.tiendainformaticatotal.com/Comprar-monitores_tft-S-0.html"]Monitores TFT.[/url]</div>

</div>

      <div class="categoria">[url="http://www.tiendadeinformatica.es/Comprar-navegadores_gps-C-0.html"][/url][url="#muestra"]Navegadores Gps.[/url]</div>
      
<div id="navegadores_gps" style="display: none;">
<div class="categoriasel" valign="middle">[url="http://www.tiendadeinformatica.es/Comprar-navegador_gps-S-0.html"][/url][url="http://www.tiendainformaticatotal.com/Comprar-navegador_gps-S-0.html"]Navegador GPS.[/url]</div>


<div class="categoriasel" valign="middle">[url="http://www.tiendadeinformatica.es/Comprar-software_gps-S-0.html"][/url][url="http://www.tiendainformaticatotal.com/Comprar-software_gps-S-0.html"]Software GPS.[/url]</div>

</div>

      <div class="categoria">[url="http://www.tiendadeinformatica.es/Comprar-pda-C-0.html"][/url][url="#muestra"]PDA.[/url]</div>
      
<div id="pda" style="display: none;">
<div class="categoriasel" valign="middle">[url="http://www.tiendadeinformatica.es/Comprar-modulos_pda-S-0.html"][/url][url="http://www.tiendainformaticatotal.com/Comprar-modulos_pda-S-0.html"]Modulos PDA.[/url]</div>


<div class="categoriasel" valign="middle">[url="http://www.tiendadeinformatica.es/Comprar-telefono_y_pda-S-0.html"][/url][url="http://www.tiendainformaticatotal.com/Comprar-telefono_y_pda-S-0.html"]Telefono y Pda.[/url]</div>

</div>
      

<script>
function muestra(id) {
var tipo = document.getElementById(id).style.display
	if (tipo == 'none'){
    document.getElementById(id).style.display = "block";
	}else{
    document.getElementById(id).style.display = "none";
	}
 }
 //se despliega la capa???
 
</script>
      </td>
    </tr>
  </tbody></table>

</div>

</body>
</html>
si copiais esto, lo pegais en una pagina en blanco y la previsualizais, vereis solo una parte del menu... funcionando, claro! lo hice asi para que no tengais TOOOODO el codigo fuente, sino solo lo que interesa.
yo la verdad que no se como funciona esto de las capas div y todo eso... bueno, en realidad mirando el codigo te puedes llegar a dar cuenta un poco... pero si alguien sabe explicarlo, mejor, ya que lo quiero incluir en mi pagina, pero preferiria entender lo que pongo en vez de copiar y pegar. alguien se ofrece?