ivibes
27 March 2006, 16:59
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.xs4all.nl/~ivibes/tsjechie/index.html
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:
<script language="JavaScript">function goToURL(){ history.go(-1); }</script><style>
.menu{background-color:#00552b;border:1pxsolidwhite;width:150px;fon t-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);posit ion:absolute;}.item_panela{text-decoration:none;color:black;cursor:hand;}.item{bac kground-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(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[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>
En in de body:
<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 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.xs4all.nl/~ivibes/tsjechie/index.html
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:
<script language="JavaScript">function goToURL(){ history.go(-1); }</script><style>
.menu{background-color:#00552b;border:1pxsolidwhite;width:150px;fon t-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);posit ion:absolute;}.item_panela{text-decoration:none;color:black;cursor:hand;}.item{bac kground-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(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[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>
En in de body:
<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