Menu

[nickmassage]

Hallo,

Ik heb op mijn website een menu dat opspringt als je op het thema gaat staan (de thema's zijn: Home, Competitie, Beker, Club en Fanzone). Een voorbeeld van hoe het menu er zou uitzien zie je op www.onsklasjeuh.tk (daar zijn de thema's Home, Leerlingen, Foto's en Allerlei). Ik wil zo'n menu op een pagina plaatsen waar ook een javascript code zal komen, het probleem is nu dat het uitflapmenu altijd achter het programma verdwijnt dat met deze javascriptcode werkt. Hoe zorg ik er nu voor dat het menu dat met onderstaande HTML-code werkt altijd bovenaan op de pagina staat / altijd in de voorgrond Wat moet ik hiervoor aanpassen in de HTML-code van het menu? Dit zijn de 2 codes van het menu:

CODE 1:

if (document.all) {n=0;ie=1;ns6=0;fShow="visible";fHide="hidden";}
if (document.getElementById&&!document.all) {n=0;ie=0;ns6=1;fShow="visible";fHide="hidden";}
if (document.layers) {n=1;ie=0;ns6=0;fShow="show";fHide="hide";}

opr6=ie&&navigator.userAgent.indexOf("Opera")!=-1

window.onerror=new Function("return true")
////////////////////////////////////////////////////////////////////////////
// Function Menu() //
////////////////////////////////////////////////////////////////////////////
rightX = 0;
function Menu()
{
this.bgColor = menucolor;
if (ie) this.menuFont = "bold xx-small Verdana";
if (n) this.menuFont = "bold x-small Verdana";
this.fontColor = "white";

this.addItem = addItem;
this.addSubItem = addSubItem;
this.showMenu = showMenu;
this.mainPaneBorder = 0;
this.subMenuPaneBorder = 0;

this.subMenuPaneWidth = submenuwidth;

lastMenu = null;

rightY = 0;
leftY = 0;
leftX = 0;

HTMLstr = "";
HTMLstr += "<!-- MENU PANE DECLARATION BEGINS -->\n";
HTMLstr += "\n";
if (ie||ns6) HTMLstr += "<div id='MainTable' style='position:relative;top:0'>\n";
// if (n) HTMLstr += "<layer name='MainTable'>\n";
HTMLstr += "<table width='100%' bgcolor='"+this.bgColor+"' border='"+this.mainPaneBorder+"'>\n";
HTMLstr += "<tr>";
if (n) HTMLstr += "<td>&nbsp;";
HTMLstr += "<!-- MAIN MENU STARTS -->\n";
HTMLstr += "<!-- MAIN_MENU -->\n";
HTMLstr += "<!-- MAIN MENU ENDS -->\n";
if (n) HTMLstr += "</td>";
HTMLstr += "</tr>\n";
HTMLstr += "</table>\n";
HTMLstr += "\n";
HTMLstr += "<!-- SUB MENU STARTS -->\n";
HTMLstr += "<!-- SUB_MENU -->\n";
HTMLstr += "<!-- SUB MENU ENDS -->\n";
HTMLstr += "\n";
if (ie||ns6) HTMLstr+= "</div>\n";
// if (n) HTMLstr+= "</layer>\n";
HTMLstr += "<!-- MENU PANE DECALARATION ENDS -->\n";
}

function addItem(idItem, text, hint, location, altLocation)
{
var Lookup = "<!-- ITEM "+idItem+" -->";
if (HTMLstr.indexOf(Lookup) != -1)
{
alert(idParent + " already exist");
return;
}
var MENUitem = "";
MENUitem += "\n<!-- ITEM "+idItem+" -->\n";
if (n)
{
MENUitem += "<ilayer name="+idItem+">";
MENUitem += "<a href='.' class=clsMenuItemNS onmouseover=\"displaySubMenu('"+idItem+"')\" onclick=\"return false;\">";
MENUitem += "|&nbsp;";
MENUitem += text;
MENUitem += "</a>";
MENUitem += "</ilayer>";
}
if (ie||ns6)
{
MENUitem += "<td>\n";
MENUitem += "<div id='"+idItem+"' style='position:relative; font: "+this.menuFont+";'>\n";
MENUitem += "<a ";
MENUitem += "class=clsMenuItemIE ";
// MENUitem += "style='text-decoration: none; font: "+this.menuFont+"; color: "+this.fontColor+"; cursor: hand;' ";
if (hint != null)
MENUitem += "title='"+hint+"' ";
if (location != null)
{
MENUitem += "href='"+location+"' ";
MENUitem += "onmouseover=\"hideAll()\" ";
}
else
{
if (altLocation != null)
MENUitem += "href='"+altLocation+"' ";
else
MENUitem += "href='.' ";
MENUitem += "onmouseover=\"displaySubMenu('"+idItem+"')\" ";
MENUitem += "onclick=\"return false;\" "
}
MENUitem += ">";
MENUitem += "|&nbsp;\n";
MENUitem += text;
MENUitem += "</a>\n";
MENUitem += "</div>\n";
MENUitem += "</td>\n";
}
MENUitem += "<!-- END OF ITEM "+idItem+" -->\n\n";
MENUitem += "<!-- MAIN_MENU -->\n";

HTMLstr = HTMLstr.replace("<!-- MAIN_MENU -->\n", MENUitem);
}

function addSubItem(idParent, text, hint, location, linktarget)
{
var MENUitem = "";
Lookup = "<!-- ITEM "+idParent+" -->";
if (HTMLstr.indexOf(Lookup) == -1)
{
alert(idParent + " not found");
return;
}
Lookup = "<!-- NEXT ITEM OF SUB MENU "+ idParent +" -->";
if (HTMLstr.indexOf(Lookup) == -1)
{
if (n)
{
MENUitem += "\n";
MENUitem += "<layer id='"+idParent+"submenu' visibility=hide bgcolor='"+this.bgColor+"'>\n";
MENUitem += "<table border='"+this.subMenuPaneBorder+"' bgcolor='"+this.bgColor+"' width="+this.subMenuPaneWidth+">\n";
MENUitem += "<!-- NEXT ITEM OF SUB MENU "+ idParent +" -->\n";
MENUitem += "</table>\n";
MENUitem += "</layer>\n";
MENUitem += "\n";
}
if (ie||ns6)
{
MENUitem += "\n";
MENUitem += "<div id='"+idParent+"submenu' onmouseout=operahide() style='position:absolute; visibility: hidden; z-index:100; width: "+this.subMenuPaneWidth+"; font: "+this.menuFont+"; top: -300;'>\n";
MENUitem += "<table border='"+this.subMenuPaneBorder+"' bgcolor='"+this.bgColor+"' width="+this.subMenuPaneWidth+">\n";
MENUitem += "<!-- NEXT ITEM OF SUB MENU "+ idParent +" -->\n";
MENUitem += "</table>\n";
MENUitem += "</div>\n";
MENUitem += "\n";
}
MENUitem += "<!-- SUB_MENU -->\n";
HTMLstr = HTMLstr.replace("<!-- SUB_MENU -->\n", MENUitem);
}

Lookup = "<!-- NEXT ITEM OF SUB MENU "+ idParent +" -->\n";
if (n) MENUitem = "<tr><td><a class=clsMenuItemNS title='"+hint+"' href='"+location+"' target='"+linktarget+"'>"+text+"</a><br></td></tr>\n";
if (ie||ns6) MENUitem = "<tr><td><a class=clsMenuItemIE title='"+hint+"' href='"+location+"' target='"+linktarget+"'>"+text+"</a><br></td></tr>\n";
MENUitem += Lookup;
HTMLstr = HTMLstr.replace(Lookup, MENUitem);

}

function showMenu()
{
document.writeln(HTMLstr);
}

////////////////////////////////////////////////////////////////////////////
// Private declaration
function displaySubMenu(idMainMenu)
{
var menu;
var submenu;
if (n)
{
submenu = document.layers[idMainMenu+"submenu"];
if (lastMenu != null && lastMenu != submenu) hideAll();
submenu.left = document.layers[idMainMenu].pageX;
submenu.top = document.layers[idMainMenu].pageY + 25;
submenu.visibility = fShow;

leftX = document.layers[idMainMenu+"submenu"].left;
rightX = leftX + document.layers[idMainMenu+"submenu"].clip.width;
leftY = document.layers[idMainMenu+"submenu"].top+
document.layers[idMainMenu+"submenu"].clip.height;
rightY = leftY;
} else if (ie||ns6) {
//alert(document.getElementById(idMainMenu+"submenu").id)
menu = ie? eval(idMainMenu) : document.getElementById(idMainMenu);
submenu = ie? eval(idMainMenu+"submenu.style") : document.getElementById(idMainMenu+"submenu").style;
submenu.left = calculateSumOffset(menu, 'offsetLeft');
// submenu.top = calculateSumOffset(menu, 'offsetTop') + 30;
submenu.top = menu.style.top+23;
submenu.visibility = fShow;
if (lastMenu != null && lastMenu != submenu) hideAll();

leftX = ie? document.all[idMainMenu+"submenu"].style.posLeft : parseInt(document.getElementById(idMainMenu+"submenu").style.left);
rightX = ie? leftX + document.all[idMainMenu+"submenu"].offsetWidth : leftX+parseInt(document.getElementById(idMainMenu+"submenu").offsetWidth);

leftY = ie? document.all[idMainMenu+"submenu"].style.posTop+
document.all[idMainMenu+"submenu"].offsetHeight : parseInt(document.getElementById(idMainMenu+"submenu").style.top)+parseInt(document.getElementById(idMainMenu+"submenu").offsetHeight);
rightY = leftY;
}
lastMenu = submenu;
}

function hideAll()
{
if (lastMenu != null) {lastMenu.visibility = fHide;lastMenu.left = 0;}
}

function calculateSumOffset(idItem, offsetName)
{
var totalOffset = 0;
var item = eval('idItem');
do
{
totalOffset += eval('item.'+offsetName);
item = eval('item.offsetParent');
} while (item != null);
return totalOffset;
}

function updateIt(e)
{
if (ie&&!opr6)
{
var x = window.event.clientX;
var y = window.event.clientY;

if (x > rightX || x < leftX) hideAll();
else if (y > rightY) hideAll();
}
if (n||ns6)
{
var x = e.pageX;
var y = e.pageY;

if (x > rightX || x < leftX) hideAll();
else if (y > rightY) hideAll();
}
}

function operahide(){
if (opr6){
if (!MainTable.contains(event.toElement))
hideAll()
}
}

if (ie||ns6)
{
document.body.onclick=hideAll;
document.body.onscroll=hideAll;
document.body.onmousemove=updateIt;
}
if (document.layers)
{
window.captureEvents(Event.MOUSEMOVE);
window.captureEvents(Event.CLICK);
window.onmousemove=updateIt;
window.onclick=hideAll;
}

CODE 2:

function showToolbar()
{
// AddItem(id, text, hint, location, alternativeLocation);
// AddSubItem(idParent, text, hint, location);
menu = new Menu();
menu.addItem("basissitesid", "Home", "Home", "home.html", "_self");
menu.addItem("compuid", "Leerlingen", "Leerlingen", null, null);
menu.addItem("favorietenid", "Foto's", "Foto's", null, null);
menu.addItem("favorieten2id", "Allerlei", "Allerlei", null, null);

menu.addSubItem("compuid", "Borremans Tom", "", "borremans.html", "_self");
menu.addSubItem("compuid", "Christiaens Kenny", "", "kenny.html", "_self");
menu.addSubItem("compuid", "De Bast Evy", "", "evy.html", "_self");
menu.addSubItem("compuid", "Defrère Elke", "", "elke.html", "_self");
menu.addSubItem("compuid", "Herremans Charlotte", "", "herremans.html", "_self");
menu.addSubItem("compuid", "Massagé Nick", "", "massage.html", "_self");
menu.addSubItem("compuid", "Steinmetz Youri", "", "steinmetz.html", "_self");
menu.addSubItem("compuid", "Vandenneucker Sam", "", "vandenneucker.html", "_self");
menu.addSubItem("compuid", "Vandensande Tom", "", "vandensande.html", "_self");
menu.addSubItem("compuid", "Vander Goten Charlotte", "", "vandergoten.html", "_self");
menu.addSubItem("compuid", "Vanheulenberghe Sabrina", "", "sabrina.html", "_self");
menu.addSubItem("compuid", "VRAGENLIJST", "", "http://groups.msn.com/onsklasjeuh/voorstelling.msnw", "_blank");
menu.addSubItem("compuid", "", "", "sabrina.html", "_self");

menu.addSubItem("favorietenid", "Kindertijd", "", "kindertijd.html", "_self");
menu.addSubItem("favorietenid", "Groepsfoto (2004)", "", "groepsfoto.html", "_self");
menu.addSubItem("favorietenid", "Bezinning (2004)", "", "http://groups.msn.com/onsklasjeuh/bezinning.msnw", "_blank");
menu.addSubItem("favorietenid", "Aken (2004)", "", "http://groups.msn.com/onsklasjeuh/aken.msnw", "_blank");
menu.addSubItem("favorietenid", "KOS (2005)", "", "http://groups.msn.com/onsklasjeuh/kos.msnw", "_blank");
menu.addSubItem("favorietenid", "Frankrijkreis (2005)", "", "http://groups.msn.com/onsklasjeuh/frankrijkreis.msnw", "_blank");
menu.addSubItem("favorietenid", "Jogging (2005)", "", "http://groups.msn.com/onsklasjeuh/jogging2005.msnw", "_blank");
menu.addSubItem("favorietenid", "", "", "http://groups.msn.com/onsklasjeuh/frankrijkreis.msnw", "_blank");

menu.addSubItem("favorieten2id", "Poll", "Poll", "login.html", "_self");
menu.addSubItem("favorieten2id", "Verjaardagen", "", "verjaardagen.html", "_self");
menu.addSubItem("favorieten2id", "Vragenlijst", "", "http://groups.msn.com/onsklasjeuh/voorstelling.msnw", "_blank");
menu.addSubItem("favorieten2id", "Links", "", "links.html", "_self");
menu.addSubItem("favorieten2id", "Lessenrooster", "", "lessenrooster.html", "_self");
menu.addSubItem("favorieten2id", "Gastenboek", "", "http://onsklasjeuh.write2me.nl", "_blank");
menu.addSubItem("favorieten2id", "", "", "http://onsklasjeuh.write2me.nl", "_blank");
menu.showMenu();
}

Zien jullie soms welk gegeven / welke gegevens ik moet aanpassen zodat mijn menu altijd op de voorgrond verschijnt?