[HTML] Drop-down Menü

*Emma
Hallo
Ich möchte für meinen VRH ein Drop-down Menü erstellen. Habe aber keine Ahung wie das funktioniert, was passendes hier im Forum hab ich leider nicht gefunden.
Kann mir jemand von euch helfen, der weiß wie sowas funktioniert und wie man so etwas codet?

Würde mich freuen,
Liebe Grüße
*Emma
*Emma
kann mir niemand helfen?
Snatsch
Dropdown - Menü

Evtl. ist das hier ja was für dich smile .


LG,
Snatsch
*Emma
dankesschön fröhlich
habs auch ausprobiert, daber irgendwie funktiionierts nicht:

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:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:
202:
203:
204:
205:
206:
207:
208:
209:
210:
211:
212:
213:
214:
215:
216:
217:
218:
219:
220:
221:
222:
223:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

  <link rel="stylesheet" href="http://gswaldenstein.bplaced.net/Winter09/CSS.css" type="text/css">
  <title>menu_neu</title>

<script type="text/javascript">

//Dies sind die Links, die in den Menüs angezeigt werden

//Inhalt Menü1 Bei uns ist das home
var menu1=new Array()
menu1[0]='<a href="http://www.test.com">Startseite</a>'
menu1[1]='<a href="http://www.test.com">Kontakt</a>'
menu1[2]='<a href="http://www.test.com">Impressum</a>'
menu1[3]='<a href="http://www.test.com">Bildernachweis</a>'
menu1[4]='<a href="http://www.test.com">Forum</a>'



//Inhalt Menü2 Bei uns ist das Webmiss
var menu2=new Array()
menu2[0]='<a href="http://www.test.com">Faq´s</a>'
menu2[1]='<a href="http://www.test.com">Regeln</a>'
menu2[3]='<a href="http://www.test.com">Schulpferde</a>'
menu2[4]='<a href="http://www.test.com">Formulare</a>'

//Inhalt Menü3 Bei uns ist das Other
var menu3=new Array()
menu3[0]='<a href="http://www.test.com">Übersicht</a>'
menu3[1]='<a href="http://www.test.com">Anlagen</a>'
menu3[2]='<a href="http://www.test.com">Stallungen</a>'
menu3[3]='<a href="http://www.test.com">Koppeln</a>'
menu3[4]='<a href="http://www.test.com">Umgebung</a>'
menu3[5]='<a href="http://www.test.com">Hofkonto</a>'
menu3[6]='<a href="http://www.test.com">Hoftiere</a>'

//Inhalt Menü4 Bei uns ist das Other
var menu4=new Array()
menu4[0]='<a href="http://www.test.com">Bank</a>'
menu4[1]='<a href="http://www.test.com">Reiterladen</a>'
menu4[2]='<a href="http://www.test.com">Futterhändler</a>'
menu4[3]='<a href="http://www.test.com">Arbeitsamt</a>'
menu4[4]='<a href="http://www.test.com">Tierarzt</a>'
menu4[5]='<a href="http://www.test.com">Hufschmied</a>'


//Inhalt Menü5 Bei uns ist das Other
var menu5=new Array()
menu5[0]='<a href="http://www.test.com">Verkaufspferde</a>'
menu5[1]='<a href="http://www.test.com">Privatpferde</a>'
menu5[2]='<a href="http://www.test.com">Kosten</a>'
menu5[3]='<a href="http://www.test.com">Statistik</a>'


//Inhalt Menü6 Bei uns ist das Other
var menu5=new Array()
menu6[0]='<a href="http://www.test.com">Verzeichnis</a>'
menu6[1]='<a href="http://www.test.com">Auf Probe</a>'
menu6[2]='<a href="http://www.test.com">Geburtstage</a>'
menu6[3]='<a href="http://www.test.com">Staten</a>'
menu6[4]='<a href="http://www.test.com">Reitniveau</a>'

//Inhalt Menü7 Bei uns ist das Other
var menu5=new Array()
menu7[0]='<a href="http://www.test.com">Abzeichen</a>'
menu7[1]='<a href="http://www.test.com">Lizenzen</a>'
menu7[2]='<a href="http://www.test.com">Reitunterricht</a>'
menu7[3]='<a href="http://www.test.com">Spiele</a>'
menu7[4]='<a href="http://www.test.com">MdM&PdM</a>'

//Inhalt Menü8 Bei uns ist das Sonstiges
var menu8=new Array()
menu8[0]='<a href="http://www.test.com">Awards</a>'
menu8[1]='<a href="http://www.test.com">Partnerhöfe</a>'
menu8[2]='<a href="http://www.test.com">Designfriedhof</a>'
menu8[3]='<a href="http://www.test.com">Turniere</a>'



var menuwidth='165px' //Die Breite des Menüs
var menubgcolor='#FFA8C5' //Hintergrundfarbe
var disappeardelay=250 //Wie schnell das Menü verschwindet wenn man wegfährt mit der Maus(in msec)
var hidemenu_onclick="yes" //Ob das Menü verschwindet, wenn man woanderst hin klickt

/////Ab hier bitte stehen lassen!! ausser ihr habt Ahnung xD

var ie4=document.all
var ns6=document.getElementById&&!document.all

if (ie4||ns6)
document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}


function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top="-500px"
if (menuwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
}
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
obj.visibility=visible
else if (e.type=="click")
obj.visibility=hidden
}

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function clearbrowseredge(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
}

function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}


function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)

if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
}

return clickreturnvalue()
}

function clickreturnvalue(){
if (ie4||ns6) return false
else return true
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}

function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
}
}

function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}

function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}

if (hidemenu_onclick=="yes")
document.onclick=hidemenu

</script>

<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()">Allgemeines</a> |
<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu2, '150px')" onMouseout="delayhidemenu()">Bewerbung</a> |
<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu3, '150px')" onMouseout="delayhidemenu()">Das Gestüt</a> |
<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu4, '150px')" onMouseout="delayhidemenu()">Das Dorf</a> |
<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu5, '150px')" onMouseout="delayhidemenu()">Pferde</a> |
<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu6, '150px')" onMouseout="delayhidemenu()">Mitglieder</a> |
<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu7, '150px')" onMouseout="delayhidemenu()">Aktivitäten</a> |
<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu8, '150px')" onMouseout="delayhidemenu()">Sonstiges</a> 

</head>

</body>
</html>