# Menü help plz



## BomberJack (21. Dezember 2001)

Hi all,
ich hab ein kleines problem und zwar geht es um ein navigations menü ich hab schon im web geschaut und auch die suchfunktion genutz hier aber leider nichts passendens gefunden darum frag ich etz einfach mal so
Weiß wer ich ein menü mach das sich beim klick auf den oberpunkt (beispiel kommt unten) nach unten aufscrollt wärend sich die anderen hauptmenü punkte auch nach unten bewegen und dann die entsprechenen links anzeigt hier mal ein beispiel wie ich es meine ist blöde so zu beschreiben.

Allso so solls in etwa aussehen bloß halt mit graiken (prinzip halt)

Oberpunkt1
oberpunkt2
oberpunkt3
usw.

soll dann aufklappen zu

Oberpunkt1
unterpunkt 1
unterpunkt 2
unterpunkt 3
usw.
Oberpunkt2
Oberpunkt3
usw.

wenn ich dann auf oberpunkt 2 zumbeispiel klicke soll es sich dementsprechend so verhalten

Oberpunkt1
Oberpunkt2
Unterpunkt1
Unterpunkt2
usw.
Oberpunkt3
Oberpunkt4 
usw.

ich hoffe ihr wisst jetzt was ich meine wenn wer weiß ich das anstellen kann dann wäre ich echt froh wenn er es mir erzählt
oder gar einen link postetet wo ich son skript runterladen kann oder so.

MFG
BomberJack


PS: wenn es das falsche froum seine sollte wo ich dies jetzt reinschreibe dann verschiebt es bitte ins entprechende und gebt mir bescheit weiß nicht zu was das sonst gehören könnte thx.


----------



## Dunsti (21. Dezember 2001)

natürlich geht sowas mit HTML, aber mit JavaScript oder gleich nem JavaApplet kann man sowas natürlich eleganter machen:

probiers mal so:

Das Menü kommt in ein extra Frame. Der Link auf den Oberpunkten lädt das Menü neu mit ausgeklapptem Untermenü, ein Klick auf die Untermenüpunkte lädt eine neue Seite im Hauptframe.

Das dumme in HTML ist, daß Du pro Obermenüpunkt eine extra HTML-Seite brauchst für die Version mit ausgeklapptem Untermenü.

war das halbwegs verständlich ?

Dunsti


----------



## BomberJack (22. Dezember 2001)

jo habs in etwa verstanden d.h. soviel ich wäre ziehmlich blöde wenn ich das mit html mache wegen ladezeiten und den vielen einzelseiten weißt den jemand wie das mit javaskript geht (mit java kenne ich mich leider kaum aus code wäre vorteilhaft) das es von der ladezeit besser wird usw. du/ihr wisst nicht zufällig ne site mit vielen skripen von sowas???


----------



## Dunsti (22. Dezember 2001)

ich hab so ein Teil mal irgendwo als Java-Applet gesehen, weiß aber leider nicht mehr den Link dazu. 

vielleicht findest Du ja auf hotscripts.com was 


Dunsti


----------



## BomberJack (22. Dezember 2001)

h3h3 danke dunsti ich hab etz ein passendes dhtml appelt gefunden allerdings hab ich ein problem und zwar wie bringe ich das menü dazu den link nicht im selben festern zu öffnen sondern halt wie mit target="_top" ins hauptfenster zu laden bzw. ganz neu zu laden hier mal ein skript auszug

//Menu 1    
makeMenu('top','Foren')
  makeMenu('sub','Internes Forum','/tutorials/index.asp')
  makeMenu('sub','Externes Forum','/tutorials/index.asp')

wenn ich 
target="_top" dahinter setzte funktionierts nicht mehr wird nichtmerh angezeigt und wenn target="_top" mittenreinsetzte führt es die funktion des traget top nicht aus wäre echt super wenn wer ne lösung hat wie oder was ich ändern muß damit es die inhalte des links ins haupfester lädt oder ganz neu die website mit dem link lädt.

thx


----------



## Dunsti (22. Dezember 2001)

dazu müsstest Du schon ein wenig mehr von dem Script posten als nur die Aufrufe 

zumindest mal die Funktion "makeMenu"


Dunsti


----------



## BomberJack (23. Dezember 2001)

ok hier ist mal das ganze skript vieleicht weißte ja jetzt wie ich es schaffe das es eine neue seite lädt oder es ins haupfenster rein lädt. ich komm nämlich einfach nicht drauf warscheinlich zu wenig mit java gearbeitet 

MFG
BomberJack
---------------------------Das Skript-------------------------

```
<style type="text/css">
DIV.clSlide{position:absolute;  ;z-index:10; left:0; width:138; height:22; clip:rect(0,138,22,0); padding:3px;}
DIV.clSlideSub{position:absolute; ;z-index:10; padding:2px; clip:rect(0,127,20,0); width:127; height:20; left:8; visibility:hidden}
DIV.clSlideSub2{position:absolute; ;z-index:10; padding:2px; clip:rect(0,118,20,0); width:118; height:20; left:8; visibility:hidden}
#divSlideCont{position:absolute; z-index:10; left:0; top:100; height:600; width:170; visibility:hidden}
A.clSlideLinks{font-family:Verdana, Helvetica, Helv; font-size:11px; font-weight:bold; text-decoration:none; color:white}
A.clSlideSubLinks{font-family:Verdana, Helvetica, Helv; font-size:10px; text-decoration:none; color:Navy}
A.clSlideSub2Links{font-family:Verdana, Helvetica, Helv; font-size:9px; text-decoration:none; color:Navy} 
</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()


//Opera didn't seem to like the padding in the layers, it messes up the background-images, so here's a version without it.
if(bw.opera5) document.write("<style>DIV.clSlide{padding:0px; background-image:url(' ')}\nDIV.clSlideSub{padding:0px; background-image:url(' ')}\nDIV.clSlideSub2{padding:0px; background-image:url(' ')}</style>")

/************************************************************************************
Making cross-browser objects
************************************************************************************/
function makeMenuObj(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.el=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 || bw.ns5)? this.css.left:this.css.offsetLeft;
	this.y=(bw.ns4 || bw.ns5)? this.css.top:this.css.offsetTop;		
	this.hideIt=b_hideIt; this.showIt=b_showIt; this.movey=b_movey
	this.moveIt=b_moveIt; this.moveBy=b_moveBy; this.status=0; 
	this.bgImg=b_bgImg;	this.obj = obj + "Object"; eval(this.obj + "=this"); 
	this.clipTo=b_clipTo;
	return this
}
function b_showIt(){this.css.visibility="visible"; this.status=1}
function b_hideIt(){this.css.visibility="hidden"; this.status=0}
function b_movey(y){this.y=y; this.css.top=this.y}	
function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x;this.css.top=this.y}
function b_moveBy(x,y){this.x=this.x+x; this.y=this.y+y; this.css.left=this.x;this.css.top=this.y}
function b_bgImg(img){if(bw.ie||bw.dom)this.css.backgroundImage="url('"+img+"')"
else this.css.background.src=img
}
function b_clipTo(t,r,b,l,w){if(bw.ns4){this.css.clip.top=t;this.css.clip.right=r
this.css.clip.bottom=b;this.css.clip.left=l
}else{this.css.clip="rect("+t+","+r+","+b+","+l+")"; if(w){this.css.width=r; this.css.height=b}}}
/********************************************************************************
Initiating page, making objects..
********************************************************************************/
function SlideMenuInit(){
	oSlideMenu=new makeMenuObj('divSlideCont')
	oSlideMenu.moveIt(menux,menuy)
	oSlide=new Array()
	for(i=0;i<menus.length;i++){
		oSlide[i]=new makeMenuObj('divSlide'+i,'divSlideCont')
		oSlide[i].subs=menus[i].subs
		oSlide[i].sub=new Array()
		oSlide[i].moveIt(0,mainheight*i)
		oSlide[i].starty=oSlide[i].y
    if(bw.opera) oSlide[i].css.paddingLeft="10px"
		if(!menus[i].seperator) oSlide[i].bgImg(level0_regular)
		for(j=0;j<oSlide[i].subs;j++){
			oSlide[i].sub[j]=new makeMenuObj('divSlideSub'+i+"_"+j,'divSlideCont')
			oSlide[i].sub[j].moveIt(10,oSlide[i].y+subheight*j+between)
			oSlide[i].sub[j].starty=oSlide[i].sub[j].y
			oSlide[i][j]=new Array()
			oSlide[i][j].subs=menus[i][j].subs
			oSlide[i][j].sub=new Array()
			img=level1_round
			if(oSlide[i][j].subs!=0){
				if(j!=oSlide[i].subs-1) img=level1_sub
				else img=level1_sub_round
				oSlide[i].sub[j].css.color="white"
			}else{
				if(j!=oSlide[i].subs-1)img=level1_regular
			}
			oSlide[i].sub[j].origimg=img
			oSlide[i].sub[j].bgImg(img)
			for(a=0;a<oSlide[i][j].subs;a++){
				oSlide[i][j].sub[a]=new makeMenuObj('divSlideSub'+i+"_"+j+"_"+a,'divSlideCont')
				oSlide[i][j].sub[a].moveIt(20,oSlide[i].sub[j].y+subheight*a+between-2)
				oSlide[i][j].sub[a].starty=oSlide[i][j].sub[a].y			
				oSlide[i][j][a]=new Array()
				oSlide[i][j][a].subs=menus[i][j][a].subs
				oSlide[i][j][a].sub=new Array()
				if(a!=oSlide[i][j].subs-1) img=level2_regular
				else img=level2_round
				oSlide[i][j].sub[a].origimg=img
				oSlide[i][j].sub[a].bgImg(img)
			}
		}
	}
	oSlideMenu.showIt()
}
/********************************************************************************
Variables
********************************************************************************/
var active=-1;var going;var isthere; var sactive=-1; var sisthere=-1; var s2active=-1; var s2isthere=-1
/********************************************************************************
Switch menu function.
********************************************************************************/
function swmenu(num,snum,s2num){
	if(snum!=-1){
		if(oSlide[num][snum].subs==0) return
	}
	if(s2num!=-1){
		if(oSlide[num][snum][s2num].subs==0) return
	}
	if((num!=active || snum!=sactive || s2num!=s2active) && !going){going=true;isthere=0;sisthere=0;moveUp(num,snum,s2num)}
}
/********************************************************************************
```


----------



## BomberJack (23. Dezember 2001)

Hier gehts weiter.


Moving the menus upward to their original position.
********************************************************************************/

```
function moveUp(num,snum){
	if(snum==-1){
		for(i=0;i<oSlide.length;i++){
			if(oSlide[i].y>oSlide[i].starty+pxspeed && active!=i) oSlide[i].moveBy(0,-pxspeed)
			else{if(active!=i) oSlide[i].moveIt(oSlide[i].x,oSlide[i].starty); isthere=i}
		}
		
		if(isthere<oSlide.length-1) setTimeout("moveUp("+num+","+snum+")",timspeed)
		else swmenu2(num,snum)
	}else{
		if(num==oSlide.length-1) isthere=num
	
		if(sactive!=-1){ //Is out!
			//Slide subs
			j=0
			for(i=sactive+1;i<oSlide[num].sub.length;i++){
				j++
				if(oSlide[num].sub[i].y>oSlide[num].sub[i].starty+pxspeed) oSlide[num].sub[i].moveBy(0,-pxspeed)
				else{oSlide[num].sub[i].moveIt(oSlide[num].sub[i].x,oSlide[num].sub[i].starty); sisthere=i}
			}
			//Slide main
			for(i=num+1;i<oSlide.length;i++){
				if(oSlide[i].y>oSlide[i].starty + oSlide[num].sub[sactive].y +subheight*j )  oSlide[i].moveBy(0,-pxspeed)
				else{oSlide[i].moveIt(oSlide[i].x,oSlide[i].starty + oSlide[num].sub[sactive].y +subheight*j ); isthere=i}
			}
		}else{ //Slide to the one clicked
			for(i=num+1;i<oSlide.length;i++){
				if(oSlide[i].y>oSlide[i].starty + snum*between+between)  oSlide[i].moveBy(0,-pxspeed)
				else{oSlide[i].moveIt(oSlide[i].x,oSlide[i].starty + snum*between+between); isthere=i}
			}
		}
		if(isthere<oSlide.length-1 || (sactive!=-1 && sisthere<oSlide[num].sub.length-1 && sactive!=oSlide[num].sub.length-1)) setTimeout("moveUp("+num+","+snum+")",timspeed)
		else swmenu2(num,snum)
	}
}
/********************************************************************************
Switch menu 2, stuff that happens before the menus are moved down again.
********************************************************************************/
function swmenu2(num,snum){
	isthere=0;
	sisthere=0;
	if(active>-1 && snum==-1){
		//Hiding submenus
		for(j=0;j<oSlide[active].subs;j++){oSlide[active].sub[j].hideIt()}
		oSlide[active].bgImg(level0_regular)
		oSlide[active].moveIt(0,oSlide[active].starty)
	}
	if(sactive>-1){
		//Hiding submenus
		for(j=0;j<oSlide[active][sactive].sub.length;j++){oSlide[active][sactive].sub[j].hideIt()}
		oSlide[active].sub[sactive].bgImg(oSlide[active].sub[sactive].origimg)
		oSlide[active].sub[sactive].moveIt(10,oSlide[active].sub[sactive].starty)
		//Move back to place
		for(i=sactive+1;i<oSlide[active].sub.length;i++){
			oSlide[active].sub[i].moveIt(oSlide[active].sub[i].x,oSlide[active].sub[i].starty)
		}
	}
	active=num
	//Showing submenus
	if(snum>-1){
		sactive=snum
		for(j=0;j<oSlide[num][snum].sub.length;j++){oSlide[num][snum].sub[j].showIt()}
		oSlide[num].sub[snum].moveBy(10,3)
		oSlide[num].sub[snum].bgImg(level1_round2)
	}else{
		sactive=-1
		for(j=0;j<oSlide[active].subs;j++){oSlide[active].sub[j].showIt()}
		oSlide[num].moveBy(10,3)
		oSlide[num].bgImg(level0_round)
	}
	if(num!=oSlide.length-1) moveDown(num,snum)
	else{
		isthere=num
		moveDown(num,snum)
	}
}
/********************************************************************************
Moving the menus down
********************************************************************************/
function moveDown(num,snum){
	//if(num==oSlide.length-1) isthere=num
	for(i=num+1;i<oSlide.length;i++){
		if(snum==-1){
			if(oSlide[i].y<(oSlide[num].subs-1)*subheight+oSlide[i].starty+between-pxspeed) oSlide[i].moveBy(0,pxspeed)
			else{oSlide[i].moveIt(oSlide[i].x,(oSlide[num].subs-1)*subheight+oSlide[i].starty+between); isthere=i}
		}else{
			if(oSlide[i].y<(oSlide[num].subs-1)*subheight+oSlide[i].starty+between-pxspeed + (oSlide[num][snum].subs-1)*subheight+between)  oSlide[i].moveBy(0,pxspeed)
			else{oSlide[i].moveIt(oSlide[i].x,(oSlide[num].subs-1)*subheight+oSlide[i].starty+between  + (oSlide[num][snum].subs-1)*subheight+between); isthere=i}
		}
	}
	if(snum!=-1){
		for(i=snum+1;i<oSlide[num].sub.length;i++){		
			if(oSlide[num].sub[i].y<(oSlide[num][snum].subs-1)*subheight+oSlide[num].sub[i].starty+between-pxspeed) oSlide[num].sub[i].moveBy(0,pxspeed)
			else{oSlide[num].sub[i].moveIt(oSlide[num].sub[i].x,(oSlide[num][snum].subs-1)*subheight+oSlide[num].sub[i].starty+between); sisthere=i}
		}
	}
	if(snum==-1){
		if(isthere<oSlide.length-1) setTimeout("moveDown("+num+","+snum+")",timspeed)
		else going=false
	}else{
		if(isthere<oSlide.length-1 || (sisthere<oSlide[num].sub.length-1 && snum!=oSlide[num].sub.length-1)) setTimeout("moveDown("+num+","+snum+")",timspeed)
		else going=false
	}
}
var test=0
/********************************************************************************
Functions to write out the layers...
********************************************************************************/
menus=new Array(); var a=0; var b=0; var c=0; var d=0
function makeMenu(type,text,lnk,target,end){
	str=""; tg="";
  if(target) tg='target="'+target+'"'
  if(!lnk) lnk="#"
  self.status=lnk
	if(a==0) str='<div id="divSlideCont">\n'
	if(type=="top"){
		menus[a]=new Array();
		if(text=="seperator"){
			str+='\t<div id="divSlide'+a+'" class="clSlide"></div>\n'
			menus[a].seperator=1
		}else{
      str+='\t<div id="divSlide'+a+'" class="clSlide"><a href="'+lnk+'" '+tg+' onclick="swmenu('+a+',-1,-1); if(bw.ie || bw.ns6) this.blur(); '
      if(lnk=="#") str+='return false'
      str+='" class="clSlideLinks"> '+text+'</a><br></div>\n'
		}
    menus[a].subs=0; a++; b=0
	}else if(type=="sub"){
		str+='\t\t<div id="divSlideSub'+(a-1)+'_'+(b)+'" class="clSlideSub"><a '+tg+' onclick="swmenu('+(a-1)+','+b+',-1); if(bw.ie || bw.ns6) this.blur(); '
    if(lnk=="#") str+='return false'
    str+='" href="'+lnk+'" class="clSlideSubLinks">  '+text+'</a><br></div>\n'
		b++; menus[a-1].subs=b; menus[a-1][b-1]=new Array(); c=0; menus[a-1][b-1].subs=0
	}else if(type=="sub2"){
		str+='\t\t<div id="divSlideSub'+(a-1)+'_'+(b-1)+'_'+c+'" class="clSlideSub2"><a '+tg+' href="'+lnk+'" class="clSlideSub2Links">  '+text+'</a><br></div>\n'
		c++; menus[a-1][b-1].subs=c; menus[a-1][b-1][c-1]=new Array(); d=0; menus[a-1][b-1][c-1].subs=0
	}
	if(end) str+="</div>"
	document.write(str)
}
function preLoadBackgrounds(){
  for(i=0;i<arguments.length;i++){
    this[i]=new Image()
    this[i].src=arguments[i]
  }
  return this
}
</script>
</head>

<body marginleft="0" marginheight="0">
<!-- START DELETE -->
<div style="position:absolute; left:0; top:0"><a href="#" onclick="self.close(); return false"></a></div>
<br><br><br>
<!-- END DELETE -->

<script>

//Variables to set
between=28 //The pixel between the menus and the submenus
mainheight=25 //The height of the mainmenus
subheight=22 //The height of the submenus
pxspeed=13 //The pixel speed of the animation
timspeed=15 //The timer speed of the animation
menuy=0 //The top placement of the menu.
menux=0 //The left placement of the menu
//Images - Play with these
level0_regular="level0_regular.gif"
level0_round="level0_round.gif"
level1_regular="level1_regular.gif"
level1_round="level1_round.gif"
level1_sub="level1_sub.gif"
level1_sub_round="level1_sub_round.gif"
level1_round2="level1_round2.gif"
level2_regular="level2_regular.gif"
level2_round="level2_round.gif"

//Leave this line
preLoadBackgrounds(level0_regular,level0_round,level1_regular,level1_round,level1_sub,level1_sub_round,level1_round2,level2_regular,level2_round)


//There are 3 different types of menus you can make
//top = Main menus
//sub = Sub menus
//sub2 = SubSub menus

//You control the look of the menus in the stylesheet

//makeMenu('TYPE','TEXT','LINK','TARGET', 'END (THE LAST MENU)')

//Menu 0 
makeMenu('top','News')
	makeMenu('sub','News Archive','/news/index.asp')
	makeMenu('sub','News einsenden','/news/archive.asp')

//Starting the menu
onload=SlideMenuInit;
</script>
```


----------



## BomberJack (24. Dezember 2001)

weiß wer wie der befehl dazu lautet das ich die links im haupframe oder alls nells neue seite öffnen lassen kann rest der site ist bei mir schon fertig fehlt halt nur noch dieser befehl der mir net einfällt weil traget=top geht ja net bzw. weiß net wo der rein soll.


----------



## BomberJack (25. Dezember 2001)

Hi all,
wollte nur mal sagen das ich auf die lösung gekommen bin hatte wohl gerde mal einen geitesbiltz 
allso wenn wer das skript auch benutzen will mit frames dann müssen die links so aussehen


makeMenu('sub','News Archive','/news/index.asp" target="_top"') 

und dann klapps auch mit dem neuladen wollt ihr hingegen neues fenster damit öffnen last ihr einfach die Anführungszeichen vor traget weg 

so viel spaß damit 
MFG
BomberJack


----------



## Dunsti (25. Dezember 2001)

schau Dir mal die Funktion "makeMenu" genauer an, da ist ein Target mit reinprogrammiert, so wie ich die Sache sehe.

Der Aufruf müsste dann so gehen:


```
makeMenu('sub','News Archive','/news/index.asp','_top')
```


Dunsti


----------



## BomberJack (25. Dezember 2001)

jo hab ich auch gesehen ich habs bei mir zwar nicht mit dem unterstrich (_) vor top probiert aber so wie es jetzt ist läuft es hoffentlich habs bis jetzt nur local bei mir getestet und da liefs demnächst werde ich es hochladen. danke nochmal für deinen beitrag ich habs soeben auch mit dem einfachen _top getestet und es lief naja bei soviel code übersieht man halt leicht was  aber zum gibts hier ja so nette user die einen auf sowas aufmerksam machen 

MFG
BomberJack


----------

