Menù stile gestione risorse

Crediti:
Name: Thomas Brattli
Website: dhtmlcentral.com

Descrizione: Questo script genera un menù stile gestione risorse.

Script: Copiate e incollate il codice sottostante nella vostra pagina web, in questo caso fra i tags <head> e </head>:

<style type="text/css"> #divFoldCont {position:absolute; left:80px; top:100px; width:170px; visibility:hidden;} .clFold {position:absolute; width:170px;} .clFoldSub {position:absolute; left:15px; width:170px; visibility:hidden;} .clFoldSub2 {position:absolute; left:15px; width:170px; visibility:hidden;} .clFoldLinks {font-family:Arial, Verdana, Helvetica, Helv; font-size:14px; font-weight:bold; text-decoration:none; color:black;} .clSubLinks {font-family:Arial, Verdana, Helvetica, Helv; font-size:14px; font-weight:bold; text-decoration:none; color:black;} .clSubLinks2 {font-family:Arial, Verdana, Helvetica, Helv; font-size:12px; text-decoration:none; color:black;} </style> <script language="JavaScript" type="text/javascript"> /********************************************************************************** FoldoutMenu2 * Copyright (C) 2001 <a href="/dhtmlcentral/thomas_brattli.asp">Thomas Brattli</a> * This script was released at DHTMLCentral.com * Visit for more great scripts! * This may be used and changed freely as long as this msg is intact! * We will also appreciate any links you could give us. * * Made by <a href="/dhtmlcentral/thomas_brattli.asp">Thomas Brattli</a> *********************************************************************************/ function lib_bwcheck(){ //Browsercheck (needed) this.ver=navigator.appVersion this.agent=navigator.userAgent this.dom=document.getElementById?1:0 this.opera5=(navigator.userAgent.indexOf("Opera")>-1 && document.getElementById)?1:0 this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0; this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0; this.ie4=(document.all && !this.dom && !this.opera5)?1:0; this.ie=this.ie4||this.ie5||this.ie6 this.mac=this.agent.indexOf("Mac")>-1 this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0; this.ns4=(document.layers && !this.dom)?1:0; this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5) return this } var bw=new lib_bwcheck() if(document.layers){ //NS4 resize fix... scrX= innerWidth; scrY= innerHeight; onresize= function(){if(scrX!= innerWidth || scrY!= innerHeight){history.go(0)} } } if(navigator.userAgent.indexOf('Opera')>-1 && document.getElementById){ //Opera 5 resize fix. scrX= innerWidth; scrY= innerHeight; document.onmousemove= function(){ if(scrX<innerWidth-10 || scrY<innerHeight-10 || scrX>innerWidth+10 || scrY>innerHeight+10){ scrX = innerWidth; scrY = innerHeight; foldInit(); } }; } /************************************************************************************ This is the new foldoutmenu, with more levels! This is in some ways a rather advanced menu so please read every note in this script and in the comments in the page to understand how it works. NOTE: if you change the position of divFoldCont from absolute to relative, you can put the menu in a table. HOWEVER it will no longer work in netscape 4. If you wish to support netscape 4, you have to use absolute positioning. ************************************************************************************/ //Do you want images (if not set to 0 and remove the images from the body)? foldImg=1 //Here are the images for the top links. foldinImg=new Image(); foldinImg.src="foldoutmenu2_arrow.gif" //The image for the closed state. foldoutImg=new Image(); foldoutImg.src="foldoutmenu2_arrow_open.gif" //The image for the open state. //Here are the images for the sub links. foldsubinImg=new Image(); foldsubinImg.src="foldoutmenu2_arrow.gif" //The image for the "in" state. foldsuboutImg=new Image(); foldsuboutImg.src="foldoutmenu2_arrow_open.gif" //The image for the "out" state. //If you change the images above please remember to change the images in the actual page as well. mainmenus=4 //How many main menus do you have? //How many submenus do you have beneath each main level. submenus=new Array(3,3,2,3) //In this example I have 3 submenus in the first top menu, //3, in the second, 2 submenus in the third top menu and 3 in the forth. //It's really important that these numbers are correct. pxbetweenmain = 10 //How much space should there be between the main menus pxbetweensub = 5 //How much space should there be between the sub menus mainstayfolded = false //Should the main menus stay folded? substayfolded = false //Should the sub menus stay folded? Play with these 2 variables. /************************************************************************************ Making cross-browser objects ************************************************************************************/ function makeMenu(obj,nest){ nest=(!nest) ? "":'document.'+nest+'.'; this.css= bw.dom? document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+"document.layers." +obj):0; this.elm= bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0; this.ref= bw.dom || bw.ie4? document:bw.ns4?eval(nest+"document.layers." +obj+".document"):0; this.x= bw.ns4?this.css.left:bw.opera5?this.css.pixelLeft:this.elm.offsetLeft; this.y= bw.ns4?this.css.top:bw.opera5?this.css.pixelTop:this.elm.offsetTop; this.height= bw.ns4?this.ref.height:bw.opera5?this.css.pixelHeight:this.elm.offsetHeight; this.hideIt= b_hideIt; this.showIt= b_showIt; this.moveIt= b_moveIt; this.status= 0; return this; } // A unit of measure that will be added when setting the position of a layer. var px = bw.ns4||window.opera?"":"px"; function b_showIt(){this.css.visibility="visible"; this.status=1} function b_hideIt(){this.css.visibility="hidden"; this.status=0} function b_moveIt(x,y){this.x=x; this.y=y; /*this.css.left=this.x+px;*/ this.css.top=this.y+px;} /************************************************************************************ Initiating the page and making the menu ************************************************************************************/ function foldInit(){ //Fixing the browsercheck for opera... this can be removed if the browsercheck has been updated!! bw.opera5 = (navigator.userAgent.indexOf("Opera")>-1 && document.getElementById)?true:false if (bw.opera5) bw.ns6 = 0 //Creating the foldoutmenu oFold = new Array(); y = 0; for (var i=0; i<mainmenus; i++){ oFold[i] = new makeMenu('divFold'+i,'divFoldCont'); oFold[i].moveIt(0,y); oFold[i].size = oFold[i].height; y += oFold[i].height+pxbetweenmain; if (bw.ns4) oFold[i].css.clip.bottom = 500; oFold[i].sub = new Array(); oFold[i].subs = top_subs; suby = oFold[i].height+pxbetweensub; for (var j=0; j<submenus[i]; j++){ oFold[i].sub[j] = new makeMenu('divFoldSub'+i+'_'+j,'divFoldCont.document.divFold'+i); oFold[i].sub[j].sub = new makeMenu('divFoldSub'+i+'_'+j+'_0','divFoldCont.document.divFold'+i+'.document.divFoldSub'+i+'_'+j); oFold[i].sub[j].hideIt(); oFold[i].sub[j].sub.hideIt(); oFold[i].sub[j].moveIt(10,suby); suby += oFold[i].sub[j].height+pxbetweensub; } } oFoldCont = new makeMenu('divFoldCont'); if (bw.ns4) oFoldCont.css.clip.bottom = 800; oFoldCont.showIt(); //Showing the menu when the menu have been "created" } /************************************************************************************ Object function to the top of the menus. ************************************************************************************/ function top_subs(show, num){ for (var j=0; j<this.sub.length; j++){ if (show){ this.sub[j].showIt() if (foldImg) this.ref["imgFold"+num].src = foldoutImg.src if (substayfolded){if(this.sub[j].sub.status) this.sub[j].sub.showIt() }else{ if (foldImg) this.sub[j].ref["imgFold"+num+"Sub"+j].src = foldsubinImg.src this.sub[j].sub.hideIt() } }else{ this.sub[j].hideIt() if (foldImg) this.ref["imgFold"+num].src = foldinImg.src if (!substayfolded) this.sub[j].sub.hideIt() else if (substayfolded) this.sub[j].sub.css.visibility="hidden" } } } /************************************************************************************ Checking height of the menus, and moves them to the correct position. ************************************************************************************/ function checkheight(org){ if(mainstayfolded) istart=org; else istart=0 for(i=istart;i<oFold.length;i++){ oFold[i].size=oFold[i].height for(j=0;j<oFold[i].sub.length;j++){ oFold[i].sub[j].size=oFold[i].sub[j].height+pxbetweensub if(oFold[i].sub[j].status){ oFold[i].size+=oFold[i].sub[j].size if(oFold[i].sub[j].sub.status){ oFold[i].size+=oFold[i].sub[j].sub.height+pxbetweensub oFold[i].sub[j].size+=oFold[i].sub[j].sub.height+pxbetweensub } } if(j!=0) oFold[i].sub[j].moveIt(10,oFold[i].sub[j-1].y+oFold[i].sub[j-1].size) } if(i!=0) oFold[i].moveIt(0,oFold[i-1].y+oFold[i-1].size+pxbetweenmain) } } /************************************************************************************ Fold in and out the submenus. ************************************************************************************/ function subfoldmenu(main,sub){ if (!substayfolded){ for (var i=0; i<oFold[main].sub.length; i++){ if (i!=sub){ oFold[main].sub[i].sub.hideIt(); if (foldImg) oFold[main].sub[i].ref["imgFold"+main+"Sub"+i].src = foldsubinImg.src } } } if (!oFold[main].sub[sub].sub.status){ oFold[main].sub[sub].sub.showIt() if(foldImg) oFold[main].sub[sub].ref["imgFold"+main+"Sub"+sub].src = foldsuboutImg.src } else{ oFold[main].sub[sub].sub.hideIt() if(foldImg) oFold[main].sub[sub].ref["imgFold"+main+"Sub"+sub].src = foldsubinImg.src } checkheight(main) } /************************************************************************************ Fold in and out the mainmenus ************************************************************************************/ function foldmenu(num){ if (!mainstayfolded){ for(var i=0; i<oFold.length; i++){ if(i!=num) oFold[i].subs(0,i) } } if (!oFold[num].sub[0].status) oFold[num].subs(1,num) else oFold[num].subs(0,num) checkheight(num) } //Initiating the menus onload, if the browser is ok. if(bw.bw) onload = foldInit; </script>

Script: Copiate e incollate il codice sottostante nella vostra pagina web, in questo caso fra i tags: <body> e </body>:

<div id="divFoldCont">  <div id="divFold0" class="clFold"><a href="#" onclick="foldmenu(0); return false" class="clFoldLinks" onfocus="if(this.blur)this.blur()"><img src="foldoutmenu2_arrow.gif" name="imgFold0" width=12 height=12 alt="" border=0> [choice 0]</a><br> <div id="divFoldSub0_0" class="clFoldSub"><a href="#" onclick="subfoldmenu(0,0); return false" class="clSubLinks" onfocus="if(this.blur)this.blur()"><img src="foldoutmenu2_arrow.gif" name="imgFold0Sub0" alt="" border=0> [choice 0_0]</a><br> <div id="divFoldSub0_0_0" class="clFoldSub2"> <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 0_0_0</a><br> <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 0_0_1</a><br> <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 0_0_2</a><br> </div> </div> <div id="divFoldSub0_1" class="clFoldSub"><a href="#" onclick="subfoldmenu(0,1); return false" class="clSubLinks" onfocus="if(this.blur)this.blur()"><img src="foldoutmenu2_arrow.gif" name="imgFold0Sub1" alt="" border=0> [choice 0_1]</a><br> <div id="divFoldSub0_1_0" class="clFoldSub2"> <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 0_1_0</a><br> <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 0_1_1</a><br> <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 0_1_2</a><br> <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 0_1_3</a><br> <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 0_1_4</a><br> <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 0_1_5</a><br> </div> </div> <div id="divFoldSub0_2" class="clFoldSub"><a href="#" onclick="subfoldmenu(0,2); return false" class="clSubLinks" onfocus="if(this.blur)this.blur()"><img src="foldoutmenu2_arrow.gif" name="imgFold0Sub2" alt="" border=0> [choice 0_2]</a><br> <div id="divFoldSub0_2_0" class="clFoldSub2"> <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 0_2_0</a><br> <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 0_2_1</a><br> <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 0_2_2</a><br> <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 0_2_3</a><br> </div> </div>  </div>  <div id="divFold1" class="clFold"><a href="#" onclick="foldmenu(1); return false" class="clFoldLinks" onfocus="if(this.blur)this.blur()"><img src="foldoutmenu2_arrow.gif" name="imgFold1" width=12 height=12 alt="" border=0> [choice 1]</a><br> <div id="divFoldSub1_0" class="clFoldSub"><a href="#" onclick="subfoldmenu(1,0); return false" class="clSubLinks" onfocus="if(this.blur)this.blur()"><img src="foldoutmenu2_arrow.gif" name="imgFold1Sub0" alt="" border=0> [choice 1_0]</a><br> <div id="divFoldSub1_0_0" class="clFoldSub2"> <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 1_0_0</a><br> <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 1_0_1</a><br> </div> </div> <div id="divFoldSub1_1" class="clFoldSub"><a href="#" onclick="subfoldmenu(1,1); return false" class="clSubLinks" onfocus="if(this.blur)this.blur()"><img src="foldoutmenu2_arrow.gif" name="imgFold1Sub1" alt="" border=0> [choice 1_1]</a><br> <div id="divFoldSub1_1_0" class="clFoldSub2"> <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 1_1_0</a><br> <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 1_1_1</a><br> <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 1_1_2</a><br> <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 1_1_3</a><br> </div> </div> <div id="divFoldSub1_2" class="clFoldSub"><a href="#" onclick="subfoldmenu(1,2); return false" class="clSubLinks" onfocus="if(this.blur)this.blur()"><img src="foldoutmenu2_arrow.gif" name="imgFold1Sub2" alt="" border=0> [choice 1_2]</a><br> <div id="divFoldSub1_2_0" class="clFoldSub2"> <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 1_2_0</a><br> <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 1_2_1</a><br> <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 1_2_2</a><br> <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 1_2_3</a><br> </div> </div> </div>  <div id="divFold2" class="clFold"><a href="#" onclick="foldmenu(2); return false" class="clFoldLinks" onfocus="if(this.blur)this.blur()"><img src="foldoutmenu2_arrow.gif" name="imgFold2" width=12 height=12 alt="" border=0> [choice 2]</a><br> <div id="divFoldSub2_0" class="clFoldSub"><a href="#" onclick="subfoldmenu(2,0); return false" class="clSubLinks" onfocus="if(this.blur)this.blur()"><img src="foldoutmenu2_arrow.gif" name="imgFold2Sub0" alt="" border=0> [choice 2_0]</a><br> <div id="divFoldSub2_0_0" class="clFoldSub2"> <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 2_0_0</a><br> <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 2_0_1</a><br> <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 2_0_2</a><br> </div> </div> <div id="divFoldSub2_1" class="clFoldSub"><a href="#" onclick="subfoldmenu(2,1); return false" class="clSubLinks" onfocus="if(this.blur)this.blur()"><img src="foldoutmenu2_arrow.gif" name="imgFold2Sub1" alt="" border=0> [choice 2_1]</a><br> <div id="divFoldSub2_1_0" class="clFoldSub2"> <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 2_1_0</a><br> </div> </div> </div> <div id="divFold3" class="clFold"><a href="#" onclick="foldmenu(3); return false" class="clFoldLinks" onfocus="if(this.blur)this.blur()"><img src="foldoutmenu2_arrow.gif" name="imgFold3" width=12 height=12 alt="" border=0> [choice 3]</a><br> <div id="divFoldSub3_0" class="clFoldSub"><a href="javascript://this link doesn't have a onclick, and can be used just like a regular link" class="clSubLinks" onfocus="if(this.blur)this.blur()"><img src="foldoutmenu2_arrow.gif" name="imgFold3Sub0" alt="" border=0> [empty]</a> <div id="divFoldSub3_0_0" class="clFoldSub2"></div> </div> <div id="divFoldSub3_1" class="clFoldSub"><a href="#" onclick="subfoldmenu(3,1); return false" class="clSubLinks" onfocus="if(this.blur)this.blur()"><img src="foldoutmenu2_arrow.gif" name="imgFold3Sub1" alt="" border=0> [choice 3_1]</a><br> <div id="divFoldSub3_1_0" class="clFoldSub2"> <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 3_1_0</a><br> <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 3_1_1</a><br> <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 3_1_2</a><br> </div> </div> <div id="divFoldSub3_2" class="clFoldSub"><a href="#" onclick="subfoldmenu(3,2); return false" class="clSubLinks" onfocus="if(this.blur)this.blur()"><img src="foldoutmenu2_arrow.gif" name="imgFold3Sub2" alt="" border=0> [choice 3_2]</a><br> <div id="divFoldSub3_2_0" class="clFoldSub2"> <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 3_2_0</a><br> <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 3_2_1</a><br> <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 3_2_2</a><br> <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 3_2_3</a><br> </div> </div> </div>  </div>