Ga naar inhoud

Gecentreerd menubalk

anoniem

Door anoniem,
in Internet en hosting

Aanbevolen berichten

anoniem Nieuwkomer

anoniem

Geplaatst:
  • Auteur
Geplaatst:
[quote:4dfda2b5af="Klaas Dons"]Hey, Ik heb een menubalk en deze wil ik gecentreerd in de site hebben. Ik heb er nu dit staan: 120, // plaatsing menubalk vanaf links Hoe kan ik dit veranderen zodat het gecentreerd in de site staat???[/quote:4dfda2b5af] Kun je iets duidelijker zijn (voorbeeld?) 120 en 'menubalk' is nou niet echt denderend veel info.
Link naar reactie
anoniem Nieuwkomer

anoniem

Geplaatst:
  • Auteur
Geplaatst:
kZal het even wat duidelijker uit leggen. Ik heb van deze site: [url]http://users.skynet.be/javascript/[/url] onder navigatie scripts menubalk drie op mijn website geplaats. Nu heb ik de vraag hoe ik deze menu balk kan centreren op de website. Hier onder zie je het complete bestand van menu2items.js Vetgedrukt is wat volgens mij verandert moet worden. // Hier maak je de aanpassingen voor het menu-uitzicht: var prop = [ 95, // transparantie van de items (in procent) [b:1eed82a92f]120, // plaatsing menubalk vanaf links[/b:1eed82a92f] 115, // plaatsing menubalk vanaf boven 100, // breedte hoofditems 20, // top menu hoofditems 1, // afstand tussen hoofditems 1, // randdikte hoofditems '#394930', // randkleur hoofditems 1, // hoofditems tekst: 0=normaal, 1=vet 12, // lettergrootte hoofditems 'Tahoma', // lettertype hoofditems 'solid', // randstijl hoofditems 1, // afstand tussen hoofditems en subitems 100, // breedte subitems 17, // hoogte subitems 1, // randdikte subitems '#394930', // randkleur subitems 'solid', // randstijl subitems 10, // lettergrootte subitems 'Tahoma', // lettertype subitems 1, // afstand tussen subitem blokken (multi-level) 3, // padding links in hoofditem blok 10, // padding boven in hoofditem blok 'Menu blokje.jpg' ]; //--------------------------------------------------------------------------------------------- /* Hier maak je de aanpassingen voor de menu-inhoud: Opmaak van een link zonder subitems: [tekst,url,target,tekstkleur,agrondkleur,muisovertekstkleur,muisoveragrondkleur] //Opmaak van een link met subitems: [tekst,url,target,tekstkleur,agrondkleur,muisovertekstkleur,muisoveragrondkleur,[subitems]] Vergeet niet alle geopende rechte haakjes af te sluiten! Let bijzonder goed op het gebruik van de komma's na elke regel! Dit menu is zeer delicaat: een komma of haakje vergeten of verkeerd plaatsen en het werkt niet meer. */ //--------------------------------------------------------------------------------------------- var link = [//recht haakje om het volledige menu te openen // voorbeeld zonder subitems: ['Homepage','Homepage Boomkwekerij.htm','onder','#495940','#D3E4BC','#D3E4BC','#495940'], // voorbeeld met 2 subitems ['Ons product','#','_self','#495940','#D3E4BC','#D3E4BC','#495940', //1ste open recht haakje [ //2de open recht haakje ['Heide','Heide.htm','onder','#495940','#D3E4BC','#D3E4BC','#495940', [ ['Erica','Erica.htm','onder','#495940','#D3E4BC','#D3E4BC','#495940'], ['Calluna','Calluna.htm','onder','#495940','#D3E4BC','#D3E4BC','#495940'] ]]]], //2 open rechte haakjes gesloten //voorbeeld met 3 subitems ['Voorraad','#','_self','#495940','#D3E4BC','#D3E4BC','#495940', //1ste open recht haakje [ //2de open recht haakje ['Voorraadslijst','Voorraadslijst.htm','onder','#495940','#D3E4BC','#D3E4BC','#495940'], ['Foto','Foto.htm','onder','#495940','#D3E4BC','#D3E4BC','#495940'], ['Beladingen','Beladingen.htm','onder','#495940','#D3E4BC','#D3E4BC','#495940'] ]], //2 open rechte haakjes gesloten //laatste voorbeeld: géén komma na het laatste haakje! ['Info','#','_self','#495940','#D3E4BC','#D3E4BC','#495940', //1ste open recht haakje [ //2de open recht haakje ['Contact','Mailformulier/Contact boomkwekerij.htm','onder','#495940','#D3E4BC','#D3E4BC','#495940'], ['Adres en Tel.','Adres en Tel.htm','onder','#495940','#D3E4BC','#D3E4BC','#495940'] ]], ['Startpagina','index.htm','_top','#495940','#D3E4BC','#D3E4BC','#495940'] //4 open rechte haakjes gesloten //recht haakje om het volledige menu af te sluiten: ];
Link naar reactie
anoniem Nieuwkomer

anoniem

Geplaatst:
  • Auteur
Geplaatst:
Ik zal alles even geven wat ik van dit menu heb: Javascript luidt als volgt: [code:1:739eeda8c2] <script language="JavaScript" type="text/javascript" src="menu2items.js"></script> <script language="JavaScript" type="text/javascript" src="menu2progr.js"></script> <style type="text/css"> .menu{position:absolute;overflow:visible;} .head_items{padding:3px 0px 0px 10px;} .item_class{padding:3px 0px 0px 5px;overflow :hidden;} </style><script language="JavaScript" type="text/javascript"> maakMenu('menu2balk',link,prop); </script> [/code:1:739eeda8c2] Nu zit er bij dit menu ook nog twee bestanden. Namelijk: menu2program.js en menu2items.js Hieronder zie je menu2 program.js: [code:1:739eeda8c2] var delay = 300; var N = (document.all) ? 0 : 1; var count = 0; var count_open = 0; var open_items = new Array(); var head = new Array(); var item_arr = new Array(); var T1 = null; var hcc = 0; var container = new Array(); var ctc = 0; var screenw = screen.width; function maakMenu(mid,a_id,prop_id) { l_men = prop_id[1]; for(i=0;i<a_id.length;i++) { if(a_id[i][7]) {id = count_open;count_open++;} else id = -1; height = prop_id[4]; if(N) height -= 4; width = prop_id[3]; if(N) width -= 12; if(a_id[i][1] != null) {document.write("<a href='"+a_id[i][1]+"' "); if(a_id[i][2] != null) document.write("target='"+a_id[i][2]+"' style='text-decoration:none'"); document.write(">"); } document.write("<div style=\"position:absolute;top:"+prop_id[2]+";left:"+l_men); document.write(";padding:"+prop_id[21]+"px 0px 0px "+prop_id[22]+"px;cursor:hand"); document.write(";width:"+width); document.write(";height:"+height); document.write(";font-size:"+prop_id[9]+"px"); document.write(";font-family:"+prop_id[10]); document.write(";background-color:"+a_id[i][4]); document.write(";color:"+a_id[i][3]); document.write(";border:"+prop_id[6]+"px "+prop_id[11]+" "+prop_id[7]); if(prop_id[8] == 1) document.write(";font-weight:bold;"); document.write("\" onmouseout=\"head_out("+id+",-1,"+hcc+",-1,'','')\" onmouseover=\"head_over(this.id,'"+a_id[i][5]+"','"+a_id[i][6]+"',"+id+",-1,"+hcc+",-1,'','')\" id="+mid+"_"+hcc+">"); document.write("&nbsp;"+link[i][0]+"</div>"); if(a_id[i][1] != null) document.write ("</a>"); head[hcc] = new Array(a_id[i][3],a_id[i][4],a_id[i][5],a_id[i][6],mid,"none"); if(a_id[i][7]) { topv = prop_id[2] + height + prop_id[12]; if(N) topv += 2 left = l_men; arr = a_id[i][7]; if(N) topv += prop_id[6] + prop_id[15]; iid = ""+id add_col(topv,left,arr,prop_id,mid,iid,hcc,"","","","r"); } l_men += (prop_id[5] + prop_id[3]); //if(N) l_men += (2*(prop_id[6] + prop_id[21] +2)); hcc++; } empty_container(); } function head_out(open,confirm,header,way,lst_items,item) { if(T1 != null) clearTimeout(T1) if(item != "") item_arr[parseInt(item)][6] = "none"; if(lst_items != "") { lb = lst_items.split("/"); for (i=0;i<lb.length;i++) { item_arr[lb[i]][6] = "none"; } } if(way != -1){ la = way.split("/"); for (i=0;i<la.length;i++) open_items[la[i]][0] = 'none'; } if(confirm != -1) {open_items[confirm][0] = 'none'} if(open != -1) {open_items[open][0] = 'none';} head[header][5] = "none"; T1 = setTimeout("close_items()",delay); } function head_over(id,text,bg,open,confirm,header,way,lst_items,item) { if(T1 != null) clearTimeout(T1) if(item != "") item_arr[item][6] = ""; head[header][5] = ""; if(lst_items != "") { lb = lst_items.split("/"); for (i=0;i<lb.length;i++) { item_arr[lb[i]][6] = ""; } } if(way != -1){ la = way.split("/"); for (i=0;i<la.length;i++) open_items[la[i]][0] = ''; } if(open != -1) { len = open_items[open][4] - open_items[open][3]; for(i=0;i<=len;i++) { name = open_items[open][2] +"_s"+(open_items[open][3]+i); document.getElementById(name).style.display = ''; } open_items[open][0] = ''; } if(confirm != -1) open_items[confirm][0] = ''; document.getElementById(id).style.backgroundColor = bg; document.getElementById(id).style.color = text; T1 = setTimeout("close_items()",0); } function add_col(top,left,arr,prop_id,mid,iid,from,way,citems,lst_item,dir) { if(way == ""){vway = iid;} else vway = way + "/" + iid; if(citems != "") vcitems = citems +"/"+ lst_item; else vcitems = lst_item; t=top; ll = left; if(dir == "r") { if((ll+(prop_id[13]+prop_id[20]+50)) > screenw) { ll -= 2*(prop_id[13] + prop_id[20]) dir = "l"; } } else { if(ll < 0) { ll += 2*(prop_id[13] + prop_id[20]) dir = "r"; } } start = count for(j=0;j<arr.length;j++) { if(arr[j][7]){tid = count_open;count_open++;} else tid = -1; height = prop_id[14]; if(N) {height -= 5;t+=4;} width = prop_id[13] if(N) {width -= 7;} if(arr[j][1] != null) {document.write("<a href='"+arr[j][1]+"' "); document.write("style='text-decoration:none;color:"+arr[j][3]+"'"); if(arr[j][2] != null) document.write("target='"+arr[j][2]+"' style='text-decoration:none'"); document.write(">"); } document.write("<div class='item_class' style=\"display:none;position:absolute;left:"+ll+";top:"+t); document.write(";filter:alpha(opacity="+prop_id[0]+"); -moz-opacity:"+prop_id[0]+"%;"); document.write(";width:"+width); document.write(";height:"+height); document.write(";font-size:"+prop_id[18]+"px"); document.write(";font-family:"+prop_id[19]); document.write(";background-color:"+arr[j][4]); document.write(";color:"+arr[j][3]); document.write(";cursor:hand"); document.write(";border:"+prop_id[15]+"px "+prop_id[16]+" "+prop_id[17]); document.write("\" onmouseover=\"head_over(this.id,'"+arr[j][5]+"','"+arr[j][6]+"',"+tid+","+iid+","+from+",'"+vway+"','"+vcitems+"','"+count+"')\" onmouseout=\"head_out("+tid+","+iid+","+from+",'"+vway+"','"+vcitems+"','"+count+"')\" id="+mid+"_s"+count+">&nbsp;"+arr[j][0]); if(arr[j][7]){ ileft = prop_id[13] - 20; document.write("<img src='"+prop_id[23]+"' border=0 style='position:absolute;left:"+ileft+";top:3;'>"); } document.write("</div>") if(arr[j][1] != null)document.write("</a>"); item_arr[count] = new Array(arr[j][3],arr[j][4],arr[j][5],arr[j][6],mid,from,"none",count); if(arr[j][7]) { if(dir == "r") l = ll + prop_id[13] + prop_id[20]; else l = ll - prop_id[13] - prop_id[20]; if(N) t-=4; container[ctc] = new Array(0,t,l,arr[j][7],prop_id,mid,tid,from,vway,vcitems,count,dir); if(N) t+=4; ctc++; } count++; t += height -1; if(N) t+= 1*(prop_id[15]); } end = count-1; open_items[iid] = new Array("none",iid,mid,start,end,from,vway,vcitems,count); vway = ""; way = ""; vcitems= ""; } function empty_container() { for(i=0;i<container.length;i++) { if (container[i][0] == 0) { add_col(container[i][1],container[i][2],container[i][3],container[i][4],container[i][5],container[i][6],container[i][7],container[i][8],container[i][9],container[i][10],container[i][11]); container[i][0] = 1; } } } function close_items() { T1 = null; for(i=0;i<open_items.length;i++) { id = open_items[i][2] +"_s"+open_items[i][3]; if(document.getElementById(id).style.display != open_items[i][0]) { len = open_items[i][4] - open_items[i][3]; for(j=0;j<=len;j++) { name = open_items[i][2] +"_s"+(open_items[i][3]+j); document.getElementById(name).style.display = open_items[i][0]; } } } for (j=0;j<item_arr.length;j++) { i = parseInt(item_arr[j][7]); name = item_arr[i][4] + "_s" + i; if(item_arr[i][6] == "") { document.getElementById(name).style.color = item_arr[i][2]; document.getElementById(name).style.backgroundColor = item_arr[i][3]; } else { document.getElementById(name).style.color = item_arr[i][0]; document.getElementById(name).style.backgroundColor = item_arr[i][1]; } } for(k=0;k<head.length;k++) { name = head[k][4]+"_"+k; if(head[k][5] == "") { document.getElementById(name).style.color = head[k][2]; document.getElementById(name).style.backgroundColor = head[k][3]; } else { document.getElementById(name).style.color = head[k][0]; document.getElementById(name).style.backgroundColor = head[k][1]; } } } [/code:1:739eeda8c2] Hieronder zie je menu2items.js: [code:1:739eeda8c2] // Hier maak je de aanpassingen voor het menu-uitzicht: var prop = [ 95, // transparantie van de items (in procent) 140, // plaatsing menubalk vanaf links 115, // plaatsing menubalk vanaf boven 100, // breedte hoofditems 20, // top menu hoofditems 1, // afstand tussen hoofditems 1, // randdikte hoofditems '#394930', // randkleur hoofditems 1, // hoofditems tekst: 0=normaal, 1=vet 12, // lettergrootte hoofditems 'Tahoma', // lettertype hoofditems 'solid', // randstijl hoofditems 1, // afstand tussen hoofditems en subitems 100, // breedte subitems 17, // hoogte subitems 1, // randdikte subitems '#394930', // randkleur subitems 'solid', // randstijl subitems 10, // lettergrootte subitems 'Tahoma', // lettertype subitems 1, // afstand tussen subitem blokken (multi-level) 3, // padding links in hoofditem blok 10, // padding boven in hoofditem blok 'Menu blokje.jpg' ]; //--------------------------------------------------------------------------------------------- /* Hier maak je de aanpassingen voor de menu-inhoud: Opmaak van een link zonder subitems: [tekst,url,target,tekstkleur,agrondkleur,muisovertekstkleur,muisoveragrondkleur] //Opmaak van een link met subitems: [tekst,url,target,tekstkleur,agrondkleur,muisovertekstkleur,muisoveragrondkleur,[subitems]] Vergeet niet alle geopende rechte haakjes af te sluiten! Let bijzonder goed op het gebruik van de komma's na elke regel! Dit menu is zeer delicaat: een komma of haakje vergeten of verkeerd plaatsen en het werkt niet meer. */ //--------------------------------------------------------------------------------------------- var link = [//recht haakje om het volledige menu te openen // voorbeeld zonder subitems: ['Homepage','Homepage Boomkwekerij.htm','onder','#495940','#D3E4BC','#D3E4BC','#495940'], // voorbeeld met 2 subitems ['Ons product','#','_self','#495940','#D3E4BC','#D3E4BC','#495940', //1ste open recht haakje [ //2de open recht haakje ['Heide','Heide.htm','onder','#495940','#D3E4BC','#D3E4BC','#495940', [ ['Erica','Erica.htm','onder','#495940','#D3E4BC','#D3E4BC','#495940'], ['Calluna','Calluna.htm','onder','#495940','#D3E4BC','#D3E4BC','#495940'] ]]]], //2 open rechte haakjes gesloten //voorbeeld met 3 subitems ['Voorraad','#','_self','#495940','#D3E4BC','#D3E4BC','#495940', //1ste open recht haakje [ //2de open recht haakje ['Voorraadslijst','Voorraadslijst.htm','onder','#495940','#D3E4BC','#D3E4BC','#495940'], ['Foto','Foto.htm','onder','#495940','#D3E4BC','#D3E4BC','#495940'], ['Beladingen','Beladingen.htm','onder','#495940','#D3E4BC','#D3E4BC','#495940'] ]], //2 open rechte haakjes gesloten //laatste voorbeeld: géén komma na het laatste haakje! ['Info','#','_self','#495940','#D3E4BC','#D3E4BC','#495940', //1ste open recht haakje [ //2de open recht haakje ['Contact','Mailformulier/Contact Boomkwekerij.htm','onder','#495940','#D3E4BC','#D3E4BC','#495940'], ['Adres en Tel.','Adres en Tel.htm','onder','#495940','#D3E4BC','#D3E4BC','#495940'] ]], ['Startpagina','index.htm','_top','#495940','#D3E4BC','#D3E4BC','#495940'] //4 open rechte haakjes gesloten //recht haakje om het volledige menu af te sluiten: ]; [/code:1:739eeda8c2] [b:739eeda8c2]Weet er misschien nu iemand wat je in één van deze bestanden of javascript moet veranderen zodat het menu gecentreerd op de site komt. P.S. ik heb de hele site gecentreerd behalve dit onderdeel lukt niet.[/b:739eeda8c2]
Link naar reactie
anoniem Nieuwkomer

anoniem

Geplaatst:
  • Auteur
Geplaatst:
al je variabelen, die in menuitems2.js staan, worden in een array gestopt die prop_id heet. de afstand tot aan de linkerkant is prop_id[1]. (het tweede "ding" in de array). als je dit stukje leest: l_men = prop_id[1]; dan heet de afstand vanaf links l_men. In de opbouw zie je dat ook: document.write("<div style=\"position:absolute;top:"+prop_id[2]+";left:"+l_men); Je kan nu twee dingen doen; óf in je variabelen een waarde in % opgeven, óf een waarde meegeven in de code hierboven -en op alle andere plekken van - van menu2 program.js . t.
Link naar reactie
  • 1 maand later...

Om een reactie te plaatsen, moet je eerst inloggen

Gast
Reageer op dit topic

×   Geplakt als verrijkte tekst.   Herstel opmaak

  Er zijn maximaal 75 emoji toegestaan.

×   Je link werd automatisch ingevoegd.   Tonen als normale link

×   Je vorige inhoud werd hersteld.   Leeg de tekstverwerker

×   Je kunt afbeeldingen niet direct plakken. Upload of voeg afbeeldingen vanaf een URL in

×
Ga naar topic overzicht
×
×
  • Nieuwe aanmaken...