De PHPhulp kroeg
Dropdown menu
Ik heb zojuist een dropdownmenu geïmplementeerd in http://tinyurl.com/26thpx5 . Nu is het zo, dat er een dropdownmenu verschijnt als je over 1 van de 2 links gaat.
Zoals je ziet, is er een mouse-over effect, namelijk dat de achtergrond van de links zwart wordt.
Als je dan met je muis beweegt over het dropdownmenu, wordt het weer geel. Hoe kan ik ervoor zorgen, dat deze zwart blijft tot het dropdownmenu verdwijnt?
Gewijzigd op 21/06/2010 20:38:36 door Roeltje M
Gewijzigd op 21/06/2010 20:04:17 door Noppes Homeland
Code (php)
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
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
<ul id="nav">
<li><a href="#"
onmouseover="mopen('m1')"
onmouseout="mclosetime()">Link</a>
<div id="m1"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">Sublink</a>
<a href="#">Sublink</a>
<a href="#">Sublink</a>
<a href="#">Sublink</a>
<a href="#">Sublink</a>
</div>
</li>
<li><a href="#"
onmouseover="mopen('m2')"
onmouseout="mclosetime()">Link</a>
<div id="m2"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">Sublink</a>
<a href="#">Sublink</a>
<a href="#">Sublink</a>
<a href="#">Sublink</a>
</div>
</li>
</ul>
<li><a href="#"
onmouseover="mopen('m1')"
onmouseout="mclosetime()">Link</a>
<div id="m1"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">Sublink</a>
<a href="#">Sublink</a>
<a href="#">Sublink</a>
<a href="#">Sublink</a>
<a href="#">Sublink</a>
</div>
</li>
<li><a href="#"
onmouseover="mopen('m2')"
onmouseout="mclosetime()">Link</a>
<div id="m2"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">Sublink</a>
<a href="#">Sublink</a>
<a href="#">Sublink</a>
<a href="#">Sublink</a>
</div>
</li>
</ul>
CSS:
Code (php)
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
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
#nav {
width:974px;
}
#nav li {
margin-top:2px;
list-style:none;
line-height:33px;
float:left;
font-size:12px;
}
#nav li a {
text-decoration:none;
color:#000;
padding-left:15px;
padding-right:15px;
display:block;
height:36px;
}
#nav li a:hover {
background:url(../images/menu_trans.png);
}
#nav div {
position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
width:200px;
background:url(../images/menu_trans.png);
}
#nav div a {
position: relative;
display: block;
padding-left:10px;
text-align: left;
text-decoration: none;
color: #f6d333;
border-bottom:1px dotted #000;
}
#nav div a:hover {
color: #FFF;
}
width:974px;
}
#nav li {
margin-top:2px;
list-style:none;
line-height:33px;
float:left;
font-size:12px;
}
#nav li a {
text-decoration:none;
color:#000;
padding-left:15px;
padding-right:15px;
display:block;
height:36px;
}
#nav li a:hover {
background:url(../images/menu_trans.png);
}
#nav div {
position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
width:200px;
background:url(../images/menu_trans.png);
}
#nav div a {
position: relative;
display: block;
padding-left:10px;
text-align: left;
text-decoration: none;
color: #f6d333;
border-bottom:1px dotted #000;
}
#nav div a:hover {
color: #FFF;
}
Gewijzigd op 21/06/2010 20:40:23 door Roeltje M
Kijk eens naar dit voorbeeld: http://www.sceneone.nl/elements/layout_results.php?which_layout=drop_down4
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a>
<ul>
<li><a href="#">Item 2.1</a></li>
<li><a href="#">Item 2.2</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
</ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a>
<ul>
<li><a href="#">Item 2.1</a></li>
<li><a href="#">Item 2.2</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
</ul>
Even uitleg: de eerste li's zijn de hoofd items. Deze li's kun je stijlen en bijvoorbeeld laten floaten of iets dergelijke. De tweede ul is het submenu, deze standaard verborgen met position absolute en dan bv left -99999px. Als de hoofd li dus dan een mouse over krijgt zorg je er voor dat het submenu zichtbaar word doormiddel van li:hover ul. en left auto. Als je dan zorgt dat je hover effect op de hoofd li zit dan blijft deze hover actief als je over de het submenu gaat omdat het submenu (de ul) in de hoofd li zit. Dit werkt in alle browser behalve ie6, want die ondersteund geen hover op de li, dus daar moet je ff zo'n css hack voor gebruiken.
Hoop dat je het een beetje snapt en succes ;)
Offtopic: verder ziet de site er wel ok uit alleen WTF moet die background_image div daar? Ten eerste word de pagina veelste breed (moet dus scrollen naar rechts) en ten tweede word de afbeelding niet gecentreerd waardoor ontwerp er minder uit komt te zien. Dus verwijder die div gewoon en zet de achtergrond afbeelding op de body...
Code (php)
1
2
3
4
2
3
4
body {
background: #000000 url(../images/background_image.png) no-repeat center top;
font-family: Verdana, Geneva, sans-serif;
}
background: #000000 url(../images/background_image.png) no-repeat center top;
font-family: Verdana, Geneva, sans-serif;
}
Gewijzigd op 22/06/2010 09:04:48 door Joakim Broden
Maar ik denk dat je me verkeerd begrijpt.
De dropdown werkt wel, maar ik wil het mouseover-effect van de hoofd-li's (dus 2x Link) behouden wanneer ik over de submenu ervan ga. Nu wordt het weer normaal wanneer je muis eraf haalt.
Gewijzigd op 22/06/2010 23:28:25 door Roeltje M