Hallo,
ik ben dus bezig met een site over Artsen zonder Grenzen voor school.
Ik heb een dropdown menu gevonden, maar dit vind ik nog niet super qua kleuren. Ik weet niet veel van css.
Dit is hem tot nu toe: klik
Code:
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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!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" xml:lang="en" lang="en">
<head>
<title>Horizontal expanding menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
<!--
window.onload=drop;
function drop(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 0;
left: 0;
z-index:100;
width: 100%;
}
#menu dl {
float: left;
width: 12em;
margin: 0 1px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}
a {text-decoration: none;
color: white;
color: #FFFFF;
}
-->
</style>
</head>
<body>
<div id="menu">
<dl>
<dt onmouseover="javascript:drop();"><a href="index.php" title="Home">Home</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:drop('smenu1');">Multimedia</dt>
<dd id="smenu1">
<ul>
<li><a href="foto.php">Foto's</a></li>
<li><a href="video.php">Video's</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:drop('smenu2');">Informatie</dt>
<dd id="smenu2">
<ul>
<li><a href="#">Wat doet artsen zonder grenzen?</a></li>
<li><a href="#">Waar doet Artsen Zonder Grenzen zijn werk?</a></li>
<li><a href="#">Hoe kun je Artsen Zonder Grenzen steunen?</a></li>
<li><a href="#">Wat voor activiteiten doet Artsen Zonder Grenzen?</a></li>
<li><a href="#">Wat is de geschiedenis van Artsen Zonder Grenzen?</a></li>
<li><a href="#">Wat is het uiteindelijke doel van Artsen Zonder Grenzen?</a></li>
<li><a href="#">Wie zijn de Artsen Zonder Grenzen?</a></li>
<li><a href="#">Waarom is Artsen Zonder Grenzen opgericht?</a></li>
<li><a href="#">Met wie werkt Artsen Zonder Grenzen samen?</a></li>
<li><a href="#">Hoe gaat Artsen Zonder Grenzen te werk?</a></li>
<li><a href="#">Wie betaalt Artsen Zonder Grenzen?</a></li>
<li><a href="#">Over deze site</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:drop('smenu3');">Menu 3</dt>
<dd id="smenu3">
<ul>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.2</a></li>
<li><a href="#">Sous-Menu 3.3</a></li>
<li><a href="#">Sous-Menu 3.4</a></li>
<li><a href="#">Sous-Menu 3.5</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:drop('smenu4');">Menu 4</dt>
<dd id="smenu4">
<ul>
<li><a href="#">Sous-Menu 4.1</a></li>
<li><a href="#">Sous-Menu 4.2</a></li>
<li><a href="#">Sous-Menu 4.3</a></li>
</ul>
</dd>
</dl>
</div>
</body>
</html>Maar mijn vraag:
Wie kan deze dropdown menu in de kleuren maken die Azg ook gebruikt voor hun drop down menu?
Dit is de site van Artsen zonder grenzen.
[url]www.artsenzondergrenzen.nl/home[/url]
Je helpt mij hier echt heel erg mee.
Alvast bedankt.
