menu hover in css
Ik wil graag css gebruiken om een plaatje in een menu een soort mouse-over effect te geven. Zo doe ik het nu.
In de html:
Code (php)
1
2
3
4
2
3
4
<div id="navigatie">
<a id="menu1" href="/home"></a>
<a id="menu2" href="/werkwijze"></a>
</div>
<a id="menu1" href="/home"></a>
<a id="menu2" href="/werkwijze"></a>
</div>
In de css:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#menu1 {
width: 67px;
height: 25px;
display: block;
background-image: url(img/menu_top_home.jpg);
}
#menu1:hover {
background-image: url(img/menu_top_home_h.jpg);
}
#menu2 {
width: 107px;
height: 25px;
display: block;
background-image: url(img/menu_top_werkwijze.jpg);
}
#menu2:hover {
background-image: url(img/menu_top_werkwijze_h.jpg);
}
width: 67px;
height: 25px;
display: block;
background-image: url(img/menu_top_home.jpg);
}
#menu1:hover {
background-image: url(img/menu_top_home_h.jpg);
}
#menu2 {
width: 107px;
height: 25px;
display: block;
background-image: url(img/menu_top_werkwijze.jpg);
}
#menu2:hover {
background-image: url(img/menu_top_werkwijze_h.jpg);
}
Vraag: hoe maak ik dat dat tweede plaatje naast de eerste wordt weergegeven? Met bovenstaande code komt ie eronder. Margin-left ging ook niet werken.
Hoe doe ik dat?
Ik dank bij voorbaat!
Heb mijn (foutieve) uitspraak van hierboven verwijderd. (edit)
Je hebt gelijk: ook met de display bleef ie goed werken.
Ik wilde dat hover-effect voor elkaar krijgen zonder javascript. Ik had lang zitten prutsen. Die display: block; die heb ik gebruikt omdat die <a> verder leeg waren. Zonder die display kreeg ik mn achtergrondje nog niet te zien.
http://www.subcide.com/tutorials/csslayout/index.aspx
Maar nu doet mn menuutje het nog niet helemaal zoals ik wens. Het 'hover'-effect werkt helemaal goed. Maar eigenlijk zou ik nu nog willen dat de link 'opgelicht' blijft zolang de gebruiker op die pagina is. Zodat ie aan de menu-balk kan zien waar hij zich bevindt.
Hoe doe ik dat? Ook gewoon in css? Of moet er dan toch javascript aan te pas komen?
Dit heb ik:
In de html:
Code (php)
1
2
3
2
3
<a id="menu1" href=""></a>
<a id="menu2" href="werkwijze/"></a>
<a id="menu3" href="prijzen/"></a>
<a id="menu2" href="werkwijze/"></a>
<a id="menu3" href="prijzen/"></a>
En in de 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
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
#menu1 {
width: 67px;
height: 25px;
display:block;
float:left;
background-image: url(img/menu_top_home.jpg);
}
#menu1:hover {
background-image: url(img/menu_top_home_h.jpg);
}
#menu1:active {
background-image: url(img/menu_top_home_h.jpg);
}
#menu2 {
width: 107px;
height: 25px;
display:block;
float: left;
background-image: url(img/menu_top_werkwijze.jpg);
}
#menu2:hover {
background-image: url(img/menu_top_werkwijze_h.jpg);
}
#menu2:active {
background-image: url(img/menu_top_werkwijze_h.jpg);
}
width: 67px;
height: 25px;
display:block;
float:left;
background-image: url(img/menu_top_home.jpg);
}
#menu1:hover {
background-image: url(img/menu_top_home_h.jpg);
}
#menu1:active {
background-image: url(img/menu_top_home_h.jpg);
}
#menu2 {
width: 107px;
height: 25px;
display:block;
float: left;
background-image: url(img/menu_top_werkwijze.jpg);
}
#menu2:hover {
background-image: url(img/menu_top_werkwijze_h.jpg);
}
#menu2:active {
background-image: url(img/menu_top_werkwijze_h.jpg);
}
Ik zou willen dat wanneer de gebruiker in 'werkwijze' is, dat dan ook de 'hover'-image getoond wordt...
Zet in je CSS dit i.p.v. de :hover
Code (php)
1
2
3
4
2
3
4
#menu1:hover,
#menu1 .active {
background-image: url(img/menu_top_home_h.jpg);
}
#menu1 .active {
background-image: url(img/menu_top_home_h.jpg);
}
Het is vrijdag! ;-)
Maar hij doet het helemaal nu!