3 svar · 128 visningar · startad av Clashman
Behöver ett script för ett meny system i tre nivåer, dvs om det finns nivåer under en "länk" skall den öppnas när man klickar på den, om det saknas nivåer under skall de vara en egen länk till vad som helst. Skall sedan ritas ut från en 3D array eller recordset.
------------------
Det som inte dödar dig gör dig starkare...
Du kan väl använda denna antar jag, men du får fixa till recordsetet och det andra själv... <html>
<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">
function lib_bwcheck(){ //Browsercheck (needed)
this.ver=navigator.appVersion
this.agent=navigator.userAgent
this.dom=document.getElementById?1:0
this.opera5=this.agent.indexOf("Opera 5")>-1
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();
}
};
}
//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;
}
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;*/ this.css.top=this.y}
/************************************************************************************
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 \= new makeMenu('divFold'+i,'divFoldCont');
oFold.moveIt(0,y);
oFold.size = oFold.height;
y += oFold.height+pxbetweenmain;
if (bw.ns4) oFold.css.clip.bottom = 500;
oFold.sub = new Array();
oFold.subs = top_subs;
suby = oFold.height+pxbetweensub;
for (var j=0; j\<submenus; j++){
oFold.sub\[j\] = new makeMenu('divFoldSub'+i+'\_'+j,'divFoldCont.document.divFold'+i);
oFold.sub\[j\].sub = new makeMenu('divFoldSub'+i+'\_'+j+'\_0','divFoldCont.document.divFold'+i+'.document.divFoldSub'+i+'\_'+j);
oFold.sub\[j\].hideIt();
oFold.sub\[j\].sub.hideIt();
oFold.sub\[j\].moveIt(10,suby);
suby += oFold.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.size=oFold.height
for(j=0;j<oFold.sub.length;j++){
oFold.sub[j].size=oFold.sub[j].height+pxbetweensub
if(oFold.sub[j].status){
oFold.size+=oFold.sub[j].size
if(oFold.sub[j].sub.status){
oFold.size+=oFold.sub[j].sub.height+pxbetweensub
oFold.sub[j].size+=oFold.sub[j].sub.height+pxbetweensub
}
}
if(j!=0) oFold.sub[j].moveIt(10,oFold.sub[j-1].y+oFold.sub[j-1].size)
}
if(i!=0) oFold.moveIt(0,oFold[i-1].y+oFold[i-1].size+pxbetweenmain)
}
}
/************************************************************************************
Fold in and out the submenus.
************************************************************************************/
function subfoldmenu(main,sub){
if(!substayfolded){
for(i=0;i<oFold[main].sub.length;i++){if(i!=sub){
oFold[main].sub.sub.hideIt(); if(foldImg) oFold[main].sub.ref["imgFold"+main+"Sub"+i].src=foldsubinImg.src}}
}
if(!oFold[main].sub.sub.status){
oFold[main].sub.sub.showIt()
if(foldImg) oFold[main].sub.ref["imgFold"+main+"Sub"+sub].src=foldsuboutImg.src
}else{
oFold[main].sub.sub.hideIt()
if(foldImg) oFold[main].sub.ref["imgFold"+main+"Sub"+sub].src=foldsubinImg.src
}
checkheight(main)
}
/************************************************************************************
Fold in and out the mainmenus
************************************************************************************/
function foldmenu(num){
if(!mainstayfolded){for(i=0;i<oFold.length;i++){if(i!=num) oFold.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>
</head>
<body marginleft="0" marginheight="0">
<!-- Menu container -->
<div id="divFoldCont">
<!-- Top 1 -->
<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>
\<!-- Here's an example of how the next "submenu" will look:
\<div id="divFoldSub0_3" class="clFoldSub"\>\<a href="#" onclick="subfoldmenu(0,3); return false" class="clSubLinks" onfocus="if(this.blur)this.blur()"\>\<img src="foldoutmenu2_arrow.gif" name="imgFold0Sub3" alt="" border=0\> \[choice 0_3\]\</a\>\<br\>
\<div id="divFoldSub0_3_0" class="clFoldSub2"\>
\<a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()"\>Sub 0_3_0\</a\>\<br\>
\<a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()"\>Sub 0_3_1\</a\>\<br\>
\<a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()"\>Sub 0_3_2\</a\>\<br\>
\<a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()"\>Sub 0_3_3\</a\>\<br\>
\</div\>
\</div\>
Note all the numbers that are changed:
divFoldSub0_CHANGED
subfoldmenu(0,CHANGED)
imgFold0SubCHANGED
divFoldSub0_CHANGED_0
Locate those places to see where the numbers should be increased by one each time.
If you add more submenus be sure to change it in the submenus array as well.
\--\>
\</div\>
\<!-- Top 2 --\>
\<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\>
\<!-- Top 3 --\>
\<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\>
<!--
Here's how it would look if we added one more top menu.
(in this case a top menu with one sublevel.
\<div id="divFold4" class="clFold"\>\<a href="#" onclick="foldmenu(4); return false" class="clFoldLinks" onfocus="if(this.blur)this.blur()"\>\<img src="foldoutmenu2_arrow.gif" name="imgFold4" width=12 height=12 alt="" border=0\> \[choice 4\]\</a\>\<br\>
\<div id="divFoldSub4_0" class="clFoldSub"\>\<a href="#" onclick="subfoldmenu(4,0); return false" class="clSubLinks" onfocus="if(this.blur)this.blur()"\>\<img src="foldoutmenu2_arrow.gif" name="imgFold4Sub0" alt="" border=0\> \[choice 4_0\]\</a\>\<br\>
\<div id="divFoldSub4_0_0" class="clFoldSub2"\>
\<a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()"\>Sub 4_0_0\</a\>\<br\>
\</div\>
\</div\>
\</div\>
Note all the places the numbers changed:
divFoldCHANGED
foldmenu(CHANGED)
imgFoldCHANGED
divFoldSubCHANGED_0
subfoldmenu(CHANGED,0)
imgFoldCHANGEDSub0
divFoldSubCHANGED_0_0
Locate those places to see where the numbers should be increased by one each time.
If you add more topmenus be sure to change the "mainmenus" variable
and add it in the "submenus" array.
-->
</div>
</body>
</html>
MvH
/A
------------------
Om du gör jobbet rätt första gången blir jobbet gjort. Om du gör jobbet fel fjorton gånger skapar du fler arbetstillfällen.
Tackar
Detta script är vad som behövs MEN...
Om en nivå saknar under nivåer/länkar skall denna nivå automatiskt kunna vara en länk i stället.
Detta får jag inte till med mina mycket begränsade kunskaper inom JavaScript/DHTML...
Så änn ne gång... Hjälp ;-)
------------------
Det som inte dödar dig gör dig starkare...
Hej igen,
Om du använder ASP för att hmmm...loopa upp eventuella undermenyer och sub undermenyer så får du nog lägga if satser runt dels hela menyn...mmm men också runt varje individuell meny val, submeny och sub sub meny...
Skulle jag gjort iallafall...blir lite pillande men det går!
MvH
/A
------------------
Om du gör jobbet rätt första gången blir jobbet gjort. Om du gör jobbet fel fjorton gånger skapar du fler arbetstillfällen.