Dropdown menu
ik zit met een best wel ingewikkeld probleem.
Ik heb een website klaar in photoshop en ben hem
aan het slicen. maar nu het volgende wat ik aan de
hand van plaatjes laat zien.
Het menu komt er zo uit te zien:
Nu als je met de muis er over heen gaat wil ik het volgende krijgen
natuurlijk niet alleen bij het tabblad vereniging maar als ik er 1 heb weet ik ook
hoe ik de rest moet doen.
ik heb al wat dingen geprobeerd maar ik krijg het niet voorelkaar.
kan iemand mij helpen of mij op weg helpen hoe en wat.
ik zou u echt heel heel erg dankbaar wezen
Met vriendelijke groeten,
Bham
Topic titel aangepast. Kies in het vervolg zelf een duidelijke titel.[/modedit]
Gewijzigd op 31/12/2010 11:34:52 door Joren de Wit
Haal alsjeblieft die plz help!! uit je topic titel. Dit voegt niks toe en we gaan je daardoor echt niet beter helpen.
Verdiep je eens in HTML/CSS dropdown menu's en ga wat puzzelen.
www.rbvhoogeveen.nl/nieuw
ben alleen bezig geweest voor het menu knop home
de html en css code heb ik als volgt
HTML:
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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>R.B.V. Hoogeveen</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/menu.css" />
</head>
<body>
<div id="main-wrapper"> <!-- wrapper om hele site -->
<div id="bg-image"></div>
<div id="menu-balk"> <!-- begin menu -->
<div id="navigatie">
<ul id="nav">
<li><a href="index.php">Home</a>
<ul>
<li><a href="#">test0</a></li>
<li><a href="#">test1</a></li>
<li><a href="#">test2</a></li>
<li><a href="#">test3</a></li>
<li><a href="#">test4</a></li>
<li><a href="#">test5</a></li>
<li><a href="#">test6</a></li>
</ul>
</li>
</ul>
</div>
</div> <!-- einde menu -->
</div> <!-- einde main wrapper -->
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>R.B.V. Hoogeveen</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/menu.css" />
</head>
<body>
<div id="main-wrapper"> <!-- wrapper om hele site -->
<div id="bg-image"></div>
<div id="menu-balk"> <!-- begin menu -->
<div id="navigatie">
<ul id="nav">
<li><a href="index.php">Home</a>
<ul>
<li><a href="#">test0</a></li>
<li><a href="#">test1</a></li>
<li><a href="#">test2</a></li>
<li><a href="#">test3</a></li>
<li><a href="#">test4</a></li>
<li><a href="#">test5</a></li>
<li><a href="#">test6</a></li>
</ul>
</li>
</ul>
</div>
</div> <!-- einde menu -->
</div> <!-- einde main wrapper -->
</body>
</html>
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
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
#navigatie {
position: absolute;
font-size: 16px;
font-family: Calibri;
margin-top: 11px;
margin-left: 20px;
}
#nav, #nav ul {
padding: 0px;
margin: 0px;
list-style: none;
}
#nav li {
float: left;
width: 120px;
}
#nav ul {
position: absolute;
width: 120px;
left: -1000px;
}
#nav li:hover ul {
left: auto;
padding: 4px;
background-image: url(../images/bg-hover.png);
background-repeat: no-repeat;
}
#nav a {
display: block;
}
position: absolute;
font-size: 16px;
font-family: Calibri;
margin-top: 11px;
margin-left: 20px;
}
#nav, #nav ul {
padding: 0px;
margin: 0px;
list-style: none;
}
#nav li {
float: left;
width: 120px;
}
#nav ul {
position: absolute;
width: 120px;
left: -1000px;
}
#nav li:hover ul {
left: auto;
padding: 4px;
background-image: url(../images/bg-hover.png);
background-repeat: no-repeat;
}
#nav a {
display: block;
}
ik heb de hover nu als hele image gedaan, maar de hover moet mee gaan met het aantal sublinks. hoe krijg ik dit voor
elkaar heb er al best mee zitten kloten als ik dit mag zeggen.
nu zit ik nog met 2 vraagjes:
zoals u op de afbeelding zit moet ik nog een wit vak om de hoofd tekst
heen krijgen die weer mooi moet aansluiten op de hover en nog tussen stukjes per kop vb Home | Vereniging
hou raden jullie mij dit aan om te doen