Toon posts:

drop down menu

Pagina: 1
Acties:

Verwijderd

Topicstarter
Een jaar geleden heb ik een perfect werkend css drop down menu gebruikt namelijk het overbekende suckerfish dropdowns menu (http://alistapart.com/articles/dropdowns/)

Blijkt de code te worden gebroken in IE7. De meeste mensen hebben er ook problemen mee. Het probleem bij hun is dat de menu niet WEG gaat. Bij mij verschijnt de menu niet meer! Daarmee zit ik een beetje in de knoei.

JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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;


en de css code
Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
#navigatie li { /* all list items */
    float: left;
    position: relative;
    padding-right:7px;
    padding-left:7px;
    background: #EAEAEA;
}

#navigatie li ul { /* second-level lists */
    display: none;
    float:left;
    position: absolute;
    top:1em;
    left: 0;
}

#navigatie li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
    top: auto;
    left: auto;
}

#navigatie ul>li:after {
    content: " | ";
}

#navigatie ul>li.last:after {
    content: " ";
}

#navigatie li:hover ul, #navigatie li.over ul { /* lists nested under hovered list items */
    display: block;
}

We weten dat in FF alleen li:hover werkt, en ik geloof dat dit nog steeds niet wordt ondersteund in IE 7.0. Daarom moet er een fout zitten in de js. Misschien wordt deze niet opgeroepen vanwege de if conditie: zo ja waarom (get element by id of document.all weggelaten)?
Het probleem is dat ik zelf niet kan debuggen want IE7 werkt niet op ubuntu.
alvast bedankt

  • André
  • Registratie: Maart 2002
  • Nu online

André

Analytics dude

IE7 ondersteund li:hover prima, het script zou dan ook alleen in IE6 uitgevoerd hoeven te worden. Dat kun je regelen met conditional comments.