submenu

[bernadetvanos]

Hallo Allemaal,

Ik heb ooit een scriptfile van het internet gehaald die ik gebruik als submenu. Je kon alleen ook nog een tweede keer uitklappen. Deze functies gebruikte ik toen niet dus heb dat uit het script verwijderd. Maar zou het nu toch graag willen gebruiken en ben verder niet bekend met codes. Wie kan mij op weg helpen? Graag wil ik onder

Bernadet

['Bewegingstechnologie', 'bt.htm','_self','003C5A','F4FAFF','FFFFFF','99CCFF',
[
['Studie','opleiding.htm','_self','003C5A','F4FAFF','000000','99CCFF'],
['Stage','tno.htm','_self','003C5A','F4FAFF','000000','99CCFF'],
['Afstuderen','nevobo.htm','_self','003C5A','F4FAFF','000000','99CCFF']
]],

 

[That Guy]

Deze functies gebruikte ik toen niet dus heb dat uit het script verwijderd.

ik zou het originele script weer terugzoeken, want het is onbegonnen werk om vanaf zoiets (5 regels code) een heel uitklap-menu te schrijven. Het kan uiteraard wel, maar er gaat erg veel tijd in zitten.

:thumb:

 

[ScorpionX]

wat moeten die 4 kleurcodes voorstellen?

 

[That Guy]

ik neem aan iets van link-kleur, achtergrond kleur, en hover link/achtergrond oid. De 1e zal wel text zijn, 2e link, 3e locatie (ai, frames?)


@TS: ohja, overgens is het bijna nooit een goed idee om een menu met Javascript te maken. Veel dingen kunnen tegenwoordig ook met alleen CSS. Google maar eens op 'css menu'

 

[bernadetvanos]

Hallo,

bedankt voor jullie reacties. Ik ben niet zo bekend met alles, maar waarom geen javascript. Hiervan weet ik dat ik er een 3 level menu van kan maken. ALs ik op het internet menu'zoek bestaat dit veelal uit 2 levels. Ik wil graag 3 niveau's hebben. Ik weet dat het bestand er orgineel zo uitzag. Ik heb even de volledige code erop gezet. Maar als iemand tips heeft voor 3 niveau's hoor ik het graag. Maar alle links omzetten van mijn site kost ook veel tijd dus dacht kijken of ik hier wijs uit word.

Groet


Bewegingstechnologie
Studie
Stage
TNO
NEA
Afstuderen


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

1, // afstand tussen hoofditems en subitems

200, // breedte subitems
22, // hoogte subitems
1, // randdikte subitems
'black', // 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

'menuwyzer.gif' // afbeelding indien subitems
];


//---------------------------------------------------------------------------------------------

var link =
[


['Home','index2.htm','_self','003C5A','F4FAFF','FFFFFF','99CCFF',
[
['Home','index2.htm','_self','003C5A','F4FAFF','000000','99CCFF'],
['Curriculum Vitae','leeg.htm','_self','003C5A','F4FAFF','000000','99CCFF'],
['Gastenboek','leeg.htm','_self','003C5A','F4FAFF','000000','99CCFF'],
['Contact','mailto:%3ca%20href=%22mailto:bernadetvanos@hotmail.com%22%3email%3c/a%3E','_self','003C5A','F4FAFF','000000','99CCFF']
]],

['Bewegingstechnologie','leeg.htm','_self','003C5A','F4FAFF','FFFFFF','99CCFF',
[
['Studie','leeg.htm','_self','003C5A','F4FAFF','000000','99CCFF'],
['Stage','leeg.htm','_self','003C5A','F4FAFF','000000','99CCFF'],
['Afstuderen','leeg.htm','_self','003C5A','F4FAFF','000000','99CCFF']
]],

];


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("&nbsp;"+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+">&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[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];
}
}
}

 

[That Guy]

De reden dat het afgeraden wordt om Javascript voor je menu te gebruiken, is het volgende: als iemand (mischien per ongeluk) zn javascript uit heeft staan, of geen javascript ondersteund, zal deze persoon geen menu te zien krijgen! Dat is natuurlijk neit handig.

Een paar hints voor een css menu: deze pagina (voorbeeld - ook in verticale variant), nog eentje (voorbeeld), nog eentje (zie menu op die pagina)

uiteraard kan je zelf ook hier even rondzoeken.

Het voordeel van een css-menu is daarnaast dat als iemand geen css ondersteund (of deze niet wilt weergeven, dat gebeurt op sommige hand-helds zoals telefoons en pda's) wordt het menu in een simpele lijst weergeven.


:thumb:

 

[csshunter]

Mag ik even een verfijning aanbrengen?
Vegras' genoemde links naar de Suckerfish-menu's hebben allemaal een aanvullend javascript nodig om InternetExplorer (in elk geval t/m IE7) de submenu's te laten zien.
De andere links hebben een WhatEverHover.htc bestand erbij voor IE: dat draait inderdaad volledig javascriptloos.

Maar voor al deze links geldt: al staat in IE javascript uit, dan kan je toch (als je ook css uitzet) alle items van de submenu's zien. En je kunt ze horen, als je een voorlees-browser hebt die geen javascript kan verstaan.

Het grote verschil met de "pure javascript menu's" (zoals het waslijstscript van bernadet) zit hem erin, dat zo'n menu volledig door het script op de pagina geplaatst moet worden. De namen van de menu-items en de submenu-items zitten dan in het script verwerkt, en niet in de html-code van de pagina zelf. Als script uit staat > nooit menu!

De "css-menu's" zijn menu's die met hun submenu's wel gewoon in de html-code staan, en dan met css wel of niet zichtbaar worden gemaakt. Script uit / css uit > toch menu!

Een voordeel van een puur scriptmenu kan zijn, dat je maar één keer het menu + submenu hoeft op te geven, en dan vervolgens alleen maar één regeltje in de html van een pagina hoeft te zetten om het menuscript op te roepen.
Bij een css-menu moet op elke bladzij het hele menu + submenu er opnieuw in gezet worden. Dat kan lastig zijn als je iets in het menu wilt veranderen: dan moeten alle pagina's aangepast worden.

• Maar als je php op je site kunt draaien, is ook dat geen probleem. Dan zet je het menu + submenu één keer in een menu.php, en roep je het menu binnen via weer één regeltje php-oproep in je html-code. Met alleen de menu.php aanpassen heb je dan in weer in 1 klap een site-brede aanpassing in je menu.

Met vriendelijke groet,
CSShunter