plaatsing van het menu

Apresskihut · 12 aug 2006

Hoi,

Heb ik eindelijk een menu in elkaar geknutseld, weet ik niet hoe ik hem op de site moet plaatsen.
Op www.ronbudding.nl/test2.htm staat een menu en een plaatje.
nu wil ik het menu onder het plaatje hebben.
Hoe moet ik dit doen?

Volgens mij moet ik het hier ergens zoeken.

// Hier maak je de aanpassingen voor het menu-uitzicht:

var prop = [
80, // transparantie van de items (in procent)
125, // plaatsing menubalk vanaf links
10, // plaatsing menubalk vanaf boven
105, // breedte hoofditems
22, // top menu hoofditems
1, // afstand tussen hoofditems
1, // randdikte hoofditems
'#303677', // randkleur hoofditems
1, // hoofditems tekst: 0=normaal, 1=vet
10, // lettergrootte hoofditems
'verdana', // lettertype hoofditems
'solid', // randstijl hoofditems

1, // afstand tussen hoofditems en subitems

135, // breedte subitems
22, // hoogte subitems
1, // randdikte subitems
'#336699', // randkleur subitems
'solid', // randstijl subitems
10, // lettergrootte subitems
'verdana', // lettertype subitems

1, // afstand tussen subitem blokken (multi-level)

3, // padding links in hoofditem blok
10, // padding boven in hoofditem blok

'../Images/60.gif' // afbeelding indien subitems
];

Of zit het hem hierin;

<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>

groetjes rOn

JeroenE · 12 aug 2006

Heel het javascript "menu2progr.js"moet worden aangepast.

Greetz : Jer

en.

Apresskihut · 12 aug 2006

oeps

en hoe moet ik dat doen Jeroen?
kan je svp me wat verder op weg helpen.

groetjes rOn

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[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[1] != null)
{document.write("<a href='"+a_id[1]+"' ");
if(a_id[2] != null) document.write("target='"+a_id[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[4]);
document.write(";color:"+a_id[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[5]+"','"+a_id[6]+"',"+id+",-1,"+hcc+",-1,'','')\" id="+mid+"_"+hcc+">");
document.write(" "+link[0]+"</div>");
if(a_id[1] != null) document.write ("</a>");
head[hcc] = new Array(a_id[3],a_id[4],a_id[5],a_id[6],mid,"none");
if(a_id[7])
{
topv = prop_id[2] + height + prop_id[12];
if(N) topv += 2
left = l_men;
arr = a_id[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][6] = "none";
}
}
if(way != -1){
la = way.split("/");
for (i=0;i<la.length;i++) open_items[la][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][6] = "";
}
}
if(way != -1){
la = way.split("/");
for (i=0;i<la.length;i++) open_items[la][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+"> "+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[0] == 0)
{ add_col(container[1],container[2],container[3],container[4],container[5],container[6],container[7],container[8],container[9],container[10],container[11]);
container[0] = 1;
}
}
}
function close_items()
{
T1 = null;
for(i=0;i<open_items.length;i++)
{
id = open_items[2] +"_s"+open_items[3];
if(document.getElementById(id).style.display != open_items[0])
{
len = open_items[4] - open_items[3];
for(j=0;j<=len;j++)
{
name = open_items[2] +"_s"+(open_items[3]+j);
document.getElementById(name).style.display = open_items[0];
}
}
}
for (j=0;j<item_arr.length;j++)
{
i = parseInt(item_arr[j][7]);
name = item_arr[4] + "_s" + i;
if(item_arr[6] == "")
{
document.getElementById(name).style.color = item_arr[2];
document.getElementById(name).style.backgroundColor = item_arr[3];
}
else
{
document.getElementById(name).style.color = item_arr[0];
document.getElementById(name).style.backgroundColor = item_arr[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];
}
}
}

JeroenE · 12 aug 2006

Ik zal mij er vanavond mee bezig houden, want ik heb ff iets veranderd, maar het zit wel wat ingewikkelder dan ik dacht.
Er moeten op verschillende plaatsen in je beide scripts, zowel "menu2progr.js" als "menu2items.js" zaken aangepast worden, maar die moet ik even grondig uitzoeken.

Greetz : Jer

en.

Apresskihut · 12 aug 2006

Ok bedankt Jeroen,

ik heb die menu2prog even bijgevoegd.

groetjes rOn

JeroenE · 12 aug 2006

Dank je wel, maar ik had die eigenlijk al uit mijn tijdelijke internetbestanden gehaald.

Greetz : Jer

en.

peter vazed · 12 aug 2006

Zet dit in je style:
.plek
{position:relative;
border:solid 2px #ff0000;
}

en dit wordt je tabel:

PHP:

<table width="798" border="0">
    <tr> 
      <td><img src="http://www.ronbudding.nl/Images/klm.jpg" width="798" height="174"></td>
    </tr>
    <tr> 
      <td><div class="plek"><script language="JavaScript" type="text/javascript">
maakMenu('menu2balk',link,prop);
</script></div></td>
    </tr>
  </table>

Dit:
border:solid 2px #ff0000;
heb ik alleen in de style gezet om wat te zien, mag er dus uit.

Apresskihut · 12 aug 2006

Hoi Peter,

ik heb .plek
{position:relative;
border:solid 2px #ff0000;
}

in mijn style gezet, op http://www.ronbudding.nl/test2.htm
waarschijnlijk doe ik het fout want het werkt niet of ik heb het op de verkeerde plek gezet

groetjes rOn

Apresskihut · 12 aug 2006

Dom, dom, dom

ik had het fout neergezet.
nu heb ik het goed gedaan.
hardstikke bedankt Peter. geweldig

groetjes rOn

http://www.ronbudding.nl

peter vazed · 12 aug 2006

Perfect, staat nu onder het plaatje.

F5 al gebruikt?

Apresskihut · 12 aug 2006

F5?

wat moet er gebeuren?

groetjes rOn

peter vazed · 12 aug 2006

Apresskihut zei:
F5?

wat moet er gebeuren?

groetjes rOn

Nu niks meer, onze posten waren gelijktijdig.
F5 is verversen

Apresskihut · 12 aug 2006

Blond he,

ik snap het al Peter.

nogmaals bedankt Peter.

groetjes rOn

JeroenE · 12 aug 2006

Ik zou het dus weer veel te ver gezocht hebben.
Thx Peter :thumb:, da's veel beter dan wat ik zou gedaan hebben.

Greetz : Jer

en.

peter vazed · 12 aug 2006

Eerst even dit:
Jeroen, je handtekening is alleen code........
althans bij mij in FF..

Een js file is eigelijk een "wilde file"
Doet gewoon wat ie moet doen.

Normaal staat een menu bovenaan, dan heb je het niet in de gaten.
Nu moet de plaatsing geforceerd worden met css.

Had het al eens bij de hand gehad.
En bij aanpassen code overdrijf ik wel eens om te zien wat er gebeurt.
Dus bv positie, afstand of grootte in pixels.
In dit geval had ik een border mee gegeven.
Je moet dus makkelijk kunnen zien of een aanpassing effect heeft.

///edit
je handtekening is weer correct Jeroen.

plaatsing van het menu

Apresskihut

Gebruiker

JeroenE

Terugkerende gebruiker

Apresskihut

Gebruiker

JeroenE

Terugkerende gebruiker

Apresskihut

Gebruiker

JeroenE

Terugkerende gebruiker

peter vazed

Meubilair

Apresskihut

Gebruiker

Apresskihut

Gebruiker

peter vazed

Meubilair

Apresskihut

Gebruiker

peter vazed

Meubilair

Apresskihut

Gebruiker

JeroenE

Terugkerende gebruiker

peter vazed

Meubilair

Nieuwste berichten

Wij waarderen jouw privacy