PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
S

Java script bij css menu

Door Sander Spijk op 02-01-2006 23:52 gewijzigd op 03-01-2006 00:50
362 views
Hoi, op mijn site maak ik gebruik van 3 menus (algemeen, user en admin) die afhankelijk van de user en inloggegevens verschijnen. Nu heb ik nav een tutorial over css dropdown menus een dropdown menu gemaakt voor mijn site (eigenlijk dus 3 menus). Dit werkt in firefox erg goed, maar in IE niet, dit is een bekend probleem wat door de TUT opgelost werd met een script. Dit werkt echter bij mij alleen voor het eerst menu.

Ik zoek daarom een oplossing voor mijn 3 menus, de eerst heeft als ID "nav" mee gekregen, hoe herschrijf ik het script voor de andere 2 menus (nav2 en nav3)?

hieronder staat het script:

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
Jan Koehoorn
02-01-2006 23:55
Hoi Sander,

in je JS doe je dit:
navRoot = document.getElementById("nav");

Daaronder volgt code die voor "nav" geldt.

Dat zelfde stuk code moet je uitvoeren voor nav2 en nav3
S Sander Spijk
02-01-2006 23:57 gewijzigd op 02-01-2006 23:58
Dus alleen dat stukje moet er 3 keer in staan?
of moet ik het hele script kopieren met die zin anders?
S Sander Spijk
03-01-2006 00:01
Jan Koehoorn schreef op 02.01.2006 23:55
Hoi Sander,

in je JS doe je dit:
navRoot = document.getElementById("nav");

Daaronder volgt code die voor "nav" geldt.

Dat zelfde stuk code moet je uitvoeren voor nav2 en nav3


Ik heb nu het script 3 keer in mijn <head> staan en met de zin veranderd naar nav2 en nav3, maar dan werkt alleen mijn nav3.
Willem Jan Z
03-01-2006 00:09
Dat komt omdat hij dan 3 keer de functie uit voert, en hij eindigt bij nav3, en dus alleen die laat zien...


startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
}

if (document.all&&document.getElementById) {
navRoot2 = document.getElementById("nav2");
for (i=0; i<navRoot2.childNodes.length; i++) {
node = navRoot2.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
}

if (document.all&&document.getElementById) {
navRoot3 = document.getElementById("nav3");
for (i=0; i<navRoot3.childNodes.length; i++) {
node = navRoot3.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
}


}
window.onload=startList;


Ik denk dat dit wel werkt...
Willem Jan Z
03-01-2006 00:10
Staan wat overbodige dingen in zie ik (die je geen 3x hoeft uit te voeren), maar dat beinvloed de werking denk ik niet...
Jan Koehoorn
03-01-2006 00:10
Kwestie van uittesten.
S Sander Spijk
03-01-2006 00:13
Bedankt voor het meedenken, na veel copy/pasten en uitproberen heb ik dit script gekregen:

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
navRoot = document.getElementById("nav2");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
navRoot = document.getElementById("nav3");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;

en dat lijkt te werken... lijkt dit jullie ook goed?
Jan Koehoorn
03-01-2006 00:15
Ziet er op zich goed uit. Maar heb je al getest in IE, FF en Opera? Geef anders ff een link.
S Sander Spijk
03-01-2006 00:22
gastaccount:

user: gast
ww: 12345

Reageren

Inloggen om te reageren