Demo Dynamic HTML - Menú jerárquico modelo Windows

Menú jerárquico modelo Windows

Compatibilidad: Ms Internet Explorer

Un menú vertical que permite visualizar el contenido de cada voz de forma expandida o comprimida, tal y como sucede con los menús de los sistemas Windows.

[ Muestra el ejemplo práctico ]

el código para insertar en tu página

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

/************************************************************************************
This script is a "foldout" menu script, all the "foldouts" will
stay outfolded in older browsers. Works in ie4+ and ns4+.
ADDED: Images

To change where the menu appears change the left and top values of the divCont
in the stylesheets, it's currently placed relative so you can
place this menu in tables or similar if you want. Change the 
text colors and size in the A.clMain and A.clSubb classes.
************************************************************************************/

/************************************************************************************
Change this to false if you want all the submenus to get unfold when you
foldout a new one.
************************************************************************************/
var stayFolded=false

//This is the image that it changes to when it expands.
var exImg=new Image(); exImg.src='arrow1.gif'
//This is the image is changes to with it's "unfolded" or something :}
//Remeber to change the actual images in the page aswell, but remember to
//keep the name of the image.
var unImg=new Image(); unImg.src='arrow.gif'

/************************************************************************************
Browsercheck
************************************************************************************/
var n = (document.layers) ? 1:0;
var ie = (document.all) ? 1:0;
var browser=((n || ie) && parseInt(navigator.appVersion)>=4)

/************************************************************************************
Making cross-browser objects
************************************************************************************/
function makeMenu(obj,nest){
	nest=(!nest) ? '':'document.'+nest+'.'										
	this.css=(n) ? eval(nest+'document.'+obj):eval('document.all.'+obj+'.style')					
   	this.ref=(n) ? eval(nest+'document.'+obj+'.document'):eval('document');		
	this.height=n?this.ref.height:eval(obj+'.offsetHeight')
	this.x=(n)? this.css.left:this.css.pixelLeft;this.y=(n)? this.css.top:this.css.pixelTop;							
	this.hideIt=b_hideIt;	this.showIt=b_showIt; this.vis=b_vis; this.moveIt=b_moveIt											
	return this
}
function b_showIt(){this.css.visibility="visible"}
function b_hideIt(){this.css.visibility="hidden"}
function b_vis(){if(this.css.visibility=="hidden" || this.css.visibility=="hide") return true;}
function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x; this.css.top=this.y}
/************************************************************************************
Initiating the page. Just add to the arrays here to get more menuitems
and add divs in the page
************************************************************************************/
function init(){
	oTop=new Array()
	oTop[0]=new makeMenu('divTop1','divCont')
	oTop[1]=new makeMenu('divTop2','divCont')
	oTop[2]=new makeMenu('divTop3','divCont')
	oTop[3]=new makeMenu('divTop4','divCont')
	oTop[4]=new makeMenu('divTop5','divCont')
	oSub=new Array()
	oSub[0]=new makeMenu('divSub1','divCont.document.divTop1')
	oSub[1]=new makeMenu('divSub2','divCont.document.divTop2')
	oSub[2]=new makeMenu('divSub3','divCont.document.divTop3')
	oSub[3]=new makeMenu('divSub4','divCont.document.divTop4')
	oSub[4]=new makeMenu('divSub5','divCont.document.divTop5')
	for(i=0;i<oSub.length;i++){ oSub[i].hideIt() }
	for(i=1;i<oTop.length;i++){ oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height) }
}
/************************************************************************************
This is the function that changes the sub menus to folded or unfolded state.
************************************************************************************/
function menu(num){
	if(browser){
		if(!stayFolded){
			for(i=0;i<oSub.length;i++){
				if(i!=num){
					oSub[i].hideIt()
					oTop[i].ref["imgA"+i].src=unImg.src
				}
			}
			for(i=1;i<oTop.length;i++){
				oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height)
			}
		}
		if(oSub[num].vis()){
			oSub[num].showIt()
			oTop[num].ref["imgA"+num].src=exImg.src
		}else{
			oSub[num].hideIt()
			oTop[num].ref["imgA"+num].src=unImg.src
		}
		for(i=1;i<oTop.length;i++){ 
			if(!oSub[i-1].vis()) oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height+oSub[i-1].height) 
			else oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height)
		}
	}
}
//Initiating the menus onload, if it's a 4.x+ browser.
if(browser) onload=init;

</script>

</HEAD>

<div id="divCont">
	<div id="divTop1" class="clTop"><a href="#" onclick="menu(0); return false" class="clMain"><img src="arrow.gif" name="imgA0" width=12 height=12 alt="" border="0"> LISTA DE DISTRIBUCIÓN</a><br>
		<div id="divSub1" class="clSub">
			 <a href="http://www.htmlpoint.com/mailing/gif.htm" class="clSubb">-Un gif al día</a><br>
			 <a href="http://www.htmlpoint.com/mailing/script.htm" class="clSubb">-Un javascript a la semana</a><br>
		</div><br>
	</div>
	<div id="divTop2" class="clTop"><a href="#" onclick="menu(1); return false" class="clMain"><img src="arrow.gif" name="imgA1" width=12 height=12 alt="" border="0"> GRÁFICA</a><br>
		<div id="divSub2" class="clSub">
			 <a href="http://www.htmlpoint.com/grafica/gif.htm" class="clSubb">-GIF animados</a><br>
			 <a href="http://www.htmlpoint.com/grafica/sfondi.htm" class="clSubb">-Fondos</a><br>
		</div><br>
	</div>
	<div id="divTop3" class="clTop"><a href="#" onclick="menu(2); return false" class="clMain"><img src="arrow.gif" name="imgA2" width=12 height=12 alt="" border="0"> GUÍAS</a><br>
		<div id="divSub3" class="clSub">
			 <a href="http://www.htmlpoint.com/guida" class="clSubb">-Guía a HTML</a><br>
			 <a href="http://www.htmlpoint.com/css" class="clSubb">-Guía a  CSS</a><br>
			 <a href="http://www.htmlpoint.com/xml" class="clSubb">-Guía a XML</a><br>
		</div><br>
	</div>
	<div id="divTop4" class="clTop"><a href="" onclick="menu(3); return false" class="clMain"><img src="arrow.gif" name="imgA3" width=12 height=12 alt="" border="0"> OTRO</a><br>
		<div id="divSub4" class="clSub">
			 <a href="http://www.htmlpoint.com/font" class="clSubb">-True Type Font</a><br>
			 <a href="http://www.htmlpoint.com/articoli" class="clSubb">-Artículos</a><br>
		</div><br>
	</div>
	<div id="divTop5" class="clTop"><a href="" onclick="menu(4); return false" class="clMain"><img src="arrow.gif" name="imgA4" width=12 height=12 alt="" border="0"> OTROS SITIOS</a><br>
		<div id="divSub5" class="clSub">
			 <a href="http://www.in-it.com" class="clSubb">-Informática Italiana</a><br>
			 <a href="http://www.hwupgrade.com" class="clSubb">-Hardware Upgrade</a><br>
			 <a href="http://www.freeonline.org" class="clSubb">-Free On line</a><br>
			 <a href="http://www.cellularmania.com" class="clSubb">-Cellularmania</a><br>
		</div><br>
	</div>
</div>

</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]