a hover internet explorer

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Mark moes

mark moes

06/12/2008 08:41:00
Quote Anchor link
Hoi.
Ik heb een verticaal menu, welke met een mouseover moeten uitklappen, menutje ernaast met links verschijnen, en met mouseout weer verdwijnen. Dit zou moeten geschieden met a hover.

Firefox is goed, alleen bij internet explorer blijft het menu uitgeklapt als ik er op klik. En dat moet niet.

De hover functie werkt dan niet meer, waarschijnlijk een fout in het javascript.
Het gaat om deze scripts:

Het javascript voor internet explorer voor de hoverfunctie:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php
<script language="JavaScript">
sfHover = function() {
var
sfEls = document.getElementById("nav").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" ie_does_hover";
}

sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" ie_does_hover\\b"), "");
}
}
}

if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>

?>



Zo de opbouw van het menu:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php
    <div id="menu_left">
        <
ul id="nav">
        <
li><a href="#">Main item 1</a>

            <
ul>
            <
li><a href="#">Sub item 1.1</a></li>
            <
li><a href="#">Sub item 1.2</a></li>
            <
li><a href="#">Sub item 1.3</a></li>
            <
li><a href="#">Sub item 1.4</a></li>
            <
/ul>
    
        <
/li>
                                <
/ul>
               <
/div>
?>


En hier de css:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<?php
#nav, #nav ul, #nav ul ul{
padding: 0;
margin: 0;
list-style: none;
background: url(none.gif) repeat 0 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 75%;
}


#nav{
width: 95px;
}


#nav li{
width: 95px;
}


#nav ul{
position: absolute;
width: 100px;
left: -1000px;
margin: -22px 0 0 95px;
font-size: 100%;
}

*
html #nav ul{
margin: -23px 0 0 95px;
}


#nav li li{
width: 100px;
}


#nav ul ul{
width: 140px;
margin: -22px 0 0 100px;
font-size: 100%;
}

*
html #nav ul ul{
margin: -23px 0 0 100px;
}


#nav li li li{
width: 140px;
}


#nav li:hover ul, #nav li.ie_does_hover ul{
left: auto;
}


#nav li:hover ul ul, #nav li.ie_does_hover ul ul{
left: -1000px;
}


#nav ul li:hover ul, #nav ul li.ie_does_hover ul{
left: auto;
}


#nav a {
display: block;
text-decoration: none;
padding: 2px 4px 3px 4px;
margin: 1px;
}


#nav a:link, #nav a:visited{
background: green;
border: 1px solid green;
color: silver;
}


#nav a:hover, #nav a:active{
background: green;
border: 1px solid silver;
color: silver;
}


/* IE only hack \*/
* html ul li, * html ul ul li{
border-bottom: 3px solid silver;
}

*
html ul ul li{
border-top: 0;
}

/* Einde IE only hack */
?>


Er zit dus ergens een fout in. Ik kan m niet meer ontdekken.
Gewijzigd op 01/01/1970 01:00:00 door Mark moes
 
PHP hulp

PHP hulp

16/05/2021 23:54:35
 
Stefan Candan

Stefan Candan

06/12/2008 08:44:00
Quote Anchor link
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script language="JavaScript">
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" ie_does_hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" ie_does_hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>


Zet dat is in je <head></head> tags
 
Niek Weevers

Niek Weevers

06/12/2008 12:12:00
Quote Anchor link
Je gerbuikt veel te veel css.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#nav li {
width: 95px;
position: relative;
}
#nav li a {
display: block;
}
#nav ul {
position: absolute;
left: -900em;
top: 0;
}
#nav li:hover ul,
#nav li.hover ul {
left: 95px;
}

Dit is het idee, daarna alleen nog opmaken. Je hebt geen hacks nodig.
Alleen een javascriptje die zorgt dat de li een class hover krijgt wanneer je erover heen gaat, dit voor ie6.
 
Mark moes

mark moes

06/12/2008 13:05:00
Quote Anchor link
Was ik vergeten te vermelden: het javascript staat in de head tags.
Ik heb het idee dat het javascriptje niet klopt, of anders niet volledig wordt aangeroepen in de <li> tag.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.