Demo Dynamic HTML - Menú jerárquico con carpetas

Menú jerárquico con carpetas

Compatibilidad: Ms Internet Explorer

Un menú idéntico a las aplicaciones de Win95, con las correspondiente carpetas y subcarpetas. Es posible personalizar la demo según las propias exigencias y anidar nuevas subcarpetas además de las ya existentes.

[ Muestra el ejemplo práctico ]

el código para insertar en tu página

<TITLE>Demo Dynamic HTML: ejemplo práctico </TITLE>

var head="display:''"
img1=new Image()
img1.src="fold.gif"
img2=new Image()
img2.src="open.gif"

function change(){
   if(!document.all)
      return
   if (event.srcElement.id=="foldheader") {
      var srcIndex = event.srcElement.sourceIndex
      var nested = document.all[srcIndex+1]
      if (nested.style.display=="none") {
         nested.style.display=''
         event.srcElement.style.listStyleImage="url(open.gif)"
      }
      else {
         nested.style.display="none"
         event.srcElement.style.listStyleImage="url(fold.gif)"
      }
   }
}

document.onclick=change

//-->
</script>

</HEAD>

<ul>
   <li id="foldheader">Informática Italiana</li>
   <ul id="foldinglist" style="display:none" style=&{head};>
      <li><a href="http://www.in-it.com">Sitio oficial</a></li>
   </ul>

<li id="foldheader">Top site</li>
   <ul id="foldinglist" style="display:none" style=&{head};>
      <li><a href="http://www.hwuprade.it">Hardware Upgrade</a></li>
      <li><a href="http://www.anfyjava.com">Anfy Java</a></li>
      <li><a href="http://www.freeonline.org">Free on Line</a></li>
   </ul>

<li id="foldheader">HTMLpoint</li>
   <ul id="foldinglist" style="display:none" style=&{head};>
      <li><a href="http://www.htmlpoint.com">Javascript</a></li>
      <li><a href="http://www.htmlpoint.com">Applet Java</a></li>
      <li id="foldheader">Nested</li>
      <ul id="foldinglist" style="display:none" style=&{head};>
         <li><a href="http://www.htmlpoint.com">Un javascript a la semana</a></li>
         <li><a href="http://www.htmlpoint.com">Un gif al día</a></li>
      </ul>
      <li><a href="http://www.htmlpoint.com">True Type Font</a></li>
      <li><a href="http://www.htmlpoint.com">XML</a></li>
   </ul>
</ul>

if (get_cookie(window.location.pathname) != ''){
  var openresults=get_cookie(window.location.pathname).split(" ")
  for (i=0 ; i < openresults.length ; i++){
    foldinglist[openresults[i]].style.display=''
    document.all[foldinglist[openresults[i]].sourceIndex -
1].style.listStyleImage="url(open.gif)"
  }
}

if (document.all){
  var nodelength=foldinglist.length-1
  var nodes=new Array(nodelength)
  var openones=''
}

function check(){
  for (i=0 ; i <= nodelength ; i++){
    if (foldinglist[i].style.display=='')
       openones=openones + " " + i
  }
  document.cookie=window.location.pathname+"="+openones
}

if (document.all)
  document.body.onunload=check
//-->
</script>

</body>
</html>

[Baja en un único archivo .zip, las imágenes y demás archivos necesarios
para el funcionamiento de las demo de esta sección]