Menu-script nog verder aanpassen...

Status
Niet open voor verdere reacties.
ivibes

ivibes

Gebruiker
Lid geworden
15 aug 2004
Berichten
94
Menu-script nog verder aanpassen...

Ik ben momenteel bezig met een website voor een paar kennissen van mij. Op deze website maak ik gebruik van uitklap-menu script.

Ik heb dit menu al aardig aan mijn eigen wensen kunnen aanpassen maar een paar dingetjes krijg ik nog niet voorelkaar. Misschien dat hier iemand me verder kan helpen?

Momenteel is het menu en de website werkend te zien op:
http://www.tsjechienatuurlijk.com

Wat zou ik graag nog willen veranderen aan het menu?

1. Als 1 van de onderwerpen uit het menu uitgeklapt is en er wordt een ander onderwerp gekozen, moet het eerste menu weer dichtklappen.

2. het onderwerp "home" in het menu hoeft niet uit te klappen, maar direct naar de hoofdpagina linken.


Ik gebruik het volgende script;

In de Head van de pagina:


HTML Code:
<script language="JavaScript">function goToURL(){ history.go(-1); }</script><style>
.menu{background-color:#00552b;border:1pxsolidwhite;width:150px;font-size:11px;font-family:verdana;position:absolute;font:bold;color:#ffffff;cursor:hand;padding-left:6px;padding-top:6px;}.item_panel{width:150px;border-left:1pxsoliddarkgreen;border-right:1pxsoliddarkgreen;clip:rect(0,150,0,0);position:absolute;}.item_panela{text-decoration:none;color:black;cursor:hand;}.item{background-color:#DAEABC;width:148px;font-size:10px;font-family:verdana;padding-left:4px;}</style>

<script language="JavaScript">var height =30; // Hoogte van de hoofdmenu linken
var iheight =15; // hoogte van de menu elementen
var bgc ="#DAEABC" // Achtergrondkleur menu element
var tc ="black" // text kleur van het menu element
var over_bgc ="#FFFFFF";//achtergrondkleur menu item bij mouse-over
var over_tc ="#FF0000"; //teskt kleur bij mouse-over
var speed =0;
var timerID ="";
var N =(document.all) ? 0:1;
var width =152;
var self_menu =new Array();
function write_menu(){
smc =0;
document.write("<div style='position:absolute'>");
mn =0;
mni =1;
start =-1;
for(i=0;i<Link.length;i++){
la = Link.split("|");
if(la[0]=="0"){if(start ==0){
document.write("</div>");
h = csmc * iheight;
tmn = mn; //-h
self_menu[smc]=new Array(tmn,h,0,-2);
smc++;
mn--;
}
csmc =0;
document.write("<div class='menu' style='top:"+mn+";height:"+height+"' id='down"+smc+"' onclick='pull_down("+smc+","+mni+")'> "+ la[1]+"</div>");
self_menu[smc]=new Array(mn,height,0,mni);
smc++;
mni++;
mn+=height;
start =1;
}else{if(start ==1){if(N)mn+=2;
document.write("<div class='item_panel' id='down"+smc+"' style='top:"+mn+"'>");
start =0;
}

document.write("<a href='"+la[2]+"'");
if(la[3]!="") document.write(" target='"+ la[3]+"' ");
document.write("><div class='item' id='d"+i+"' style='height:"+iheight);
if(N) document.write(";width:150");
document.write("' onmouseover='color(this.id)' onmouseout='uncolor(this.id)'> "+ la[1]+"</div></a>");
csmc++;
}}if(start ==0){
document.write("</div>");
h = csmc * iheight;
tmn = mn +5; //-h
self_menu[smc]=new Array(tmn,h,0);
name ="down"+(self_menu.length-1);
obj = document.getElementById(name);
obj.style.borderBottomColor ="darkgreen";
obj.style.borderBottomWidth =1;
obj.style.borderBottomStyle ="solid";
}
document.write("</div>");}function color(obj){
document.getElementById(obj).style.backgroundColor = over_bgc;
document.getElementById(obj).style.color = over_tc
}function uncolor(obj){
document.getElementById(obj).style.backgroundColor = bgc;
document.getElementById(obj).style.color = tc
}function pull_down(nr,c){if(timerID ==""){
to = self_menu[nr+1][1]
begin = nr +2;
if(timerID !="") clearTimeout(timerID);
if(self_menu[nr+1][2]==0){
self_menu[nr+1][2]=1;
if(nr == self_menu.length-2){to++;}
epull_down(begin,to,0);
}else{
to =0;
self_menu[nr+1][2]=0;
name ="down"+(nr+2);
open_item =0;
for(i=0;i<nr;i++){if(self_menu[2]==1){open_item += self_menu[1];
}}if(N ==false){open_item-=(c*1)};
if(nr== self_menu.length-2){val = self_menu[self_menu.length-1][1];to=-1;}else val = parseInt(document.getElementById(name).style.top)-(open_item)-(c*height);
epull_up(begin,to,val);
}}}function epull_down(nr,to,nowv){
name ="down"+(nr-1);
obj = document.getElementById(name).style.clip ="rect(0,"+width+","+(nowv+1)+",0)";
for(i=nr;i<self_menu.length;i++){
name ="down"+ i;
obj = document.getElementById(name);
obj.style.top = parseInt(obj.style.top)+1;
}
nowv++;
if(nowv < to) timerID = setTimeout("epull_down("+nr+","+to+","+nowv+")",speed);
else timerID ="";
}function epull_up(nr,to,nowv){
name ="down"+(nr-1);
obj = document.getElementById(name).style.clip ="rect(0,"+width+","+nowv+",0)";
for(i=nr;i<self_menu.length;i++){
name ="down"+ i;
obj = document.getElementById(name);
obj.style.top = parseInt(obj.style.top)-1;
}
nowv--;
if(nowv > to) timerID = setTimeout("epull_up("+nr+","+to+","+nowv+")",speed);
else timerID ="";
}function startup(nr){
write_menu();
if(nr !=0){for(i=0;i<self_menu.length;i++){if(self_menu[3]== nr) pull_down(i,nr)
i==self_menu.length;
}}}</script>

En in de body:


HTML Code:

<script language="JavaScript">
//Link[nr] = "positie [0 is menu/1 is een item],Link naam ,url,target (blank|top|frame_naam)"
// je kunt eenvoudig items toevoegen, gewoon doornummeren
var Link =new Array();
Link[0]="0|home";
Link[1]="1|naar de hoofdpagina|index.html|_self";
Link[2]="0|over Tsjechie";
Link[3]="1|algemeen|overtsjechie-algemeen1.html|mainpage";
Link[4]="1|reisdocumenten e.d.|overtsjechie-reisdocumenten.html|mainpage";
Link[5]="1|wintersport|overtsjechie-wintersport.html|mainpage";
Link[6]="1|eten en drinken|overtsjechie-etenendrinken.html|mainpage"
Link[7]="1|geldzaken|overtsjechie-geldzaken.html|mainpage"
Link[8]="0|villa Jizera";
Link[9]="1|de woning en de tuin|villajizerawoningtuin1.html|mainpage";
Link[10]="1|de ligging|villajizeraligging.html|mainpage";
Link[11]="1|de streek en omgeving|villajizeraomgeving1.html|mainpage";
Link[12]="1|activiteiten|villajizeraactiviteiten1.html|main page";
Link[13]="1|wintersport|villajizerawintersport.html|mainpag e";
Link[14]="0|landgoed Sumava";
Link[15]="1|woning 1 (groot)|sumavawoninggroot1.html|mainpage";
Link[16]="1|woning 2 (klein)|sumavawoningklein.html|mainpage";
Link[17]="1|de tuin en de ligging|sumavaligging1.html|mainpage";
Link[18]="1|de streek en omgeving|sumavaomgeving1.html|mainpage";
Link[19]="1|activiteiten|sumavaactiviteiten.html|mainpa ge";
Link[20]="1|wintersport|sumavawintersport.html|mainpage ";
Link[21]="0|prijzen / reserveren";
Link[22]="1|prijzen / beschikbaarheid|prijzen.html|mainpage";
Link[23]="1|reserveren|reserveren.html|mainpage";
Link[24]="0|info en contact";
Link[25]="1|info en contact|infocontact.html|mainpage";
Link[26]="0|gastenboek";
Link[27]="1|bekijk het gastenboek|http://www.gratisgastenboek.com/gastenboek.php?id=497|mainpage";
Link[28]="1|teken het gastenboek|http://www.gratisgastenboek.com/bericht.php?id=497|mainpage";
startup(0);
</script>

Iemand een ideetje om deze aanpassingen te verwezenlijken? Bedankt!

Jeroen
 
Ik heb na een tijdje puzzelen aan de code het antwoord op vraag 2 gevonden. Dit is nu de code voor in de head:
HTML: 
<script language="JavaScript">function goToURL(){ history.go(-1); }</script><style>
.menu{background-color:#00552b;border:1pxsolidwhite;width:150px;font-size:11px;font-family:verdana;position:absolute;font:bold;color:#ffffff;cursor:hand;padding-left:6px;padding-top:6px;}.item_panel{width:150px;border-left:1pxsoliddarkgreen;border-right:1pxsoliddarkgreen;clip:rect(0,150,0,0);position:absolute;}.item_panela{text-decoration:none;color:black;cursor:hand;}.item{background-color:#DAEABC;width:148px;font-size:10px;font-family:verdana;padding-left:4px;}</style>

<script language="JavaScript">var height =30; // Hoogte van de hoofdmenu linken
var iheight =15; // hoogte van de menu elementen 
var bgc ="#DAEABC" // Achtergrondkleur menu element
var tc ="black" // text kleur van het menu element 
var over_bgc ="#FFFFFF";//achtergrondkleur menu item bij mouse-over
var over_tc ="#FF0000"; //teskt kleur bij mouse-over
var speed =0;
var timerID ="";
var N =(document.all) ? 0:1;
var width =152;
var self_menu =new Array();

function write_menu(){
smc =0; 
document.write("<div style='position:absolute'>");
mn =0;
mni =1;
start =-1; 
for(i=0;i<Link.length;i++){
	la = Link[i].split("|");
	if(la[0]=="0"){
		if(start ==0){
			document.write("</div>");
			h = csmc * iheight;
			tmn = mn; //-h
			self_menu[smc]=new Array(tmn,h,0,-2);
			smc++;
			mn--;
		}
		csmc =0;
		document.write("<div class='menu' style='top:"+mn+";height:"+height+"' id='down"+smc+"' onclick='pull_down("+smc+","+mni+");'> "+ la[1]+"</div>");
		self_menu[smc]=new Array(mn,height,0,mni);
		smc++;
		mni++;
		mn+=height;
		start =1;
	}else if(la[0]=="3"){
		if(start ==0){
			document.write("</div>");
			h = csmc * iheight;
			tmn = mn; //-h
			self_menu[smc]=new Array(tmn,h,0,-2);
			smc++;
			mn--;
		}
		csmc =0;
		document.write("<a href='"+la[2]+"'");
		if(la[3]!="") document.write(" target='"+ la[3]+"' ");
		document.write("><div class='menu' id='d"+i+"' style='height:40");
		if(N) document.write(";width:150");
		document.write("'> "+ la[1]+"</div></a>");
		self_menu[smc]=new Array(mn,height,0,mni);
		smc++;
		mni++;
		mn+=height;
		start =1;
	}else{
		if(start ==1){
			if(N)mn+=2;
			document.write("<div class='item_panel' id='down"+smc+"' style='top:"+mn+"'>");
			start =0;
		}
		document.write("<a href='"+la[2]+"' style='color: #000000; text-decoration: none;'");
		if(la[3]!="") document.write(" target='"+ la[3]+"' ");
		document.write("><div class='item' id='d"+i+"' style='height:"+iheight);
		if(N) document.write(";width:150");
		document.write("' onmouseover='color(this.id)' onmouseout='uncolor(this.id)'> "+ la[1]+"</div></a>");
		csmc++;
	}
}
	if(start ==0){
		document.write("</div>");
		h = csmc * iheight;
		tmn = mn +5; //-h
		self_menu[smc]=new Array(tmn,h,0);
		name ="down"+(self_menu.length-1);
		obj = document.getElementById(name);
		obj.style.borderBottomColor ="darkgreen";
		obj.style.borderBottomWidth =1;
		obj.style.borderBottomStyle ="solid";
	}
	document.write("</div>");
}
function color(obj){
	document.getElementById(obj).style.backgroundColor = over_bgc;
	document.getElementById(obj).style.color = over_tc
}
function uncolor(obj){
	document.getElementById(obj).style.backgroundColor = bgc;
	document.getElementById(obj).style.color = tc
}
function pull_down(nr,c){
	if(timerID ==""){
		to = self_menu[nr+1][1]
		begin = nr +2;
		if(timerID !="") clearTimeout(timerID);
		if(self_menu[nr+1][2]==0){
			self_menu[nr+1][2]=1;
			if(nr == self_menu.length-2){
				to++;
			}
			epull_down(begin,to,0);
		}else{
			to =0;
			self_menu[nr+1][2]=0;
			name ="down"+(nr+2);
			open_item =0;
			for(i=0;i<nr;i++){
				if(self_menu[i][2]==1){
					open_item += self_menu[i][1];
				}
			}
			if(N ==false){
				open_item-=(c*1)
			};
			if(nr== self_menu.length-2){
				val = self_menu[self_menu.length-1][1];to=-1;
			} else val = parseInt(document.getElementById(name).style.top)-(open_item)-(c*height);
			epull_up(begin,to,val);
		}
	}
}
function epull_down(nr,to,nowv){
	name ="down"+(nr-1);
	obj = document.getElementById(name).style.clip ="rect(0,"+width+","+(nowv+1)+",0)";
		for(i=nr;i<self_menu.length;i++){
		name ="down"+ i;
		obj = document.getElementById(name);
		obj.style.top = parseInt(obj.style.top)+1;
		}
	nowv++;
	if(nowv < to) timerID = setTimeout("epull_down("+nr+","+to+","+nowv+")",speed);
	else timerID ="";
}
function epull_up(nr,to,nowv){
	name ="down"+(nr-1);
	obj = document.getElementById(name).style.clip ="rect(0,"+width+","+nowv+",0)";
	for(i=nr;i<self_menu.length;i++){
		name ="down"+ i;
		obj = document.getElementById(name);
		obj.style.top = parseInt(obj.style.top)-1;
	}
	nowv--;
	if(nowv > to) timerID = setTimeout("epull_up("+nr+","+to+","+nowv+")",speed);
	else timerID ="";
}
function startup(nr){
	write_menu();
	if(nr !=0){
		for(i=0;i<self_menu.length;i++){
			if(self_menu[i][3]== nr) pull_down(i,nr)
		i==self_menu.length;
		}
	}
}
</script>
Ik heb nu een extra cijfer toegevoegd. Nr. 3 is nu een combinatie van 1 en 2; Het is geen submenu, maar er zit wel een directe link achter.
Ik ben er net achter gekomen dat dit alleen bij het bovenste menuitem werkt! Dus je kunt er maar één van toevoegen, en die moet bovenaan staan. Dat is in dit geval geen probleem, hè?

Dit is de code voor in de body:
HTML: 
<script language="JavaScript">
//Link[nr] = "positie [0 is menu/1 is een item],Link naam ,url,target (blank|top|frame_naam)"
// je kunt eenvoudig items toevoegen, gewoon doornummeren
var Link =new Array();
Link[0]="3|home|index.html|_self";
Link[1]="1|naar de hoofdpagina|index.html|_self";
Link[2]="0|over Tsjechie";
Link[3]="1|algemeen|overtsjechie-algemeen1.html|mainpage";
Link[4]="1|reisdocumenten e.d.|overtsjechie-reisdocumenten.html|mainpage";
Link[5]="1|wintersport|overtsjechie-wintersport.html|mainpage";
Link[6]="1|eten en drinken|overtsjechie-etenendrinken.html|mainpage"
Link[7]="1|geldzaken|overtsjechie-geldzaken.html|mainpage"
Link[8]="0|villa Jizera";
Link[9]="1|de woning en de tuin|villajizerawoningtuin1.html|mainpage";
Link[10]="1|de ligging|villajizeraligging.html|mainpage";
Link[11]="1|de streek en omgeving|villajizeraomgeving1.html|mainpage";
Link[12]="1|activiteiten|villajizeraactiviteiten1.html|main page";
Link[13]="1|wintersport|villajizerawintersport.html|mainpag e";
Link[14]="0|landgoed Sumava";
Link[15]="1|woning 1 (groot)|sumavawoninggroot1.html|mainpage";
Link[16]="1|woning 2 (klein)|sumavawoningklein.html|mainpage";
Link[17]="1|de tuin en de ligging|sumavaligging1.html|mainpage";
Link[18]="1|de streek en omgeving|sumavaomgeving1.html|mainpage";
Link[19]="1|activiteiten|sumavaactiviteiten.html|mainpa ge";
Link[20]="1|wintersport|sumavawintersport.html|mainpage ";
Link[21]="0|prijzen / reserveren";
Link[22]="1|prijzen / beschikbaarheid|prijzen.html|mainpage";
Link[23]="1|reserveren|reserveren.html|mainpage";
Link[24]="0|info en contact";
Link[25]="1|info en contact|infocontact.html|mainpage";
Link[26]="3|gastenboek";
Link[27]="1|bekijk het gastenboek|http://www.gratisgastenboek.com/gastenboek.php?id=497|mainpage";
Link[28]="1|teken het gastenboek|http://www.gratisgastenboek.com/bericht.php?id=497|mainpage";
startup(0);
</script>


Het is een best wel ingewikkelde code, en niet zo gemakkelijk aan te passen, daarom heb ik geen antwoord op vraag 2. Als ik er een paar uur aan ga werken, werkt het waarschijnlijk wel, maar daar heb ik eerlijk gezegd niet zo'n zin in.
 
Ik kan hier niet direct op antwoorden, maar vind het wel de moeite om die onderwerp te volgen.
Ik heb misschien wel een idee, maar daarvoor zal ik het script even goed moeten bestuderen.
Zal da sebiet eens doen.

Greetz : Jer:cool:en.
 
Ben er nog niet geraakt om ook maar te beginnen.
Het kan nog wel wat duren omdat ik momenteel in een drukke werk periode zit, en bijna niet meer op de pc kan wegens tijdsgebrek.

Greetz : Jer:cool:en.
 
Nog niet uit geraakt. :(
Ben blijkbaar nog niet bekwaam genoeg om deze op te lossen. :eek:

Greetz : Jer:cool:en.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan