Gegen Bilderklau - Das Original | Druckvorschau: Switch-Menü gesucht

Geschrieben von Sidney am 16.02.2009 um 01:00:

Switch-Menü gesucht

Hallo ihr Lieben,
ich suche für meine Homepage eine Art Switch-Menü. Ich hab schon einige Seiten gewälzt, aber irgendwie ist das alles nicht so das, was ich suche...

Meine Vorstellung:
ich möchte eine Liste mit Kategorielinks haben und bei Klick auf den Link "klappt" eine Liste mit weiteren Links auf. Wenn ich dann auf einen anderen oder denselben Kategorielink klicke, klappt das zuvor geöffnete Linkmenü zu und das neue klappt auf.

z.B.
meine Kategorien könnten folgende Seite:
Index
Bla
Blubber
Blubb

Wenn ich jetzt auf Index klicke sollte das z.B. wie folgt aussehen:
Index
.home
.guestbook
.impressum
.team
Bla
Blubber
Blubb

Wenn ich dann wieder auf Index klicke, soll das gesamte Menü wieder im Urzustand sein. Klicke ich aber beispielsweise auf Blubber, soll das Menü wie folgt aussehen:
Index
Bla
Blubber
.xyz
.zyx
.abc
.cba
Blubb

Sämtliche Links sollen Textlinks sein. Hat jemand ne Idee, wie ich das am geschicktesten umsetze?

Geschrieben von Golden Hope am 16.02.2009 um 06:03:

Soll das animiert sein (wo man das zuklappen sieht) oder reicht nciht ein einfaches Klappmenü per externes Linken?

Lg

Geschrieben von Sidney am 16.02.2009 um 14:18:

Ein einfaches Klappmenü reicht. Was meinst du mit externem Linken?

Geschrieben von Golden Hope am 16.02.2009 um 14:20:

Menü 1 (Link)
Menü 1 hhh
Menü 1 hhh
Menü 2 (link)
...........

Du verlinkst die oberen Menüpunkte und fügst so die Unterpunkte ein..

Geschrieben von Sidney am 16.02.2009 um 14:34:

ok, ich glaub, ich seh den wald vor lauter bäumen nicht^^

Meinst du die Version mit mehreren Untermenüs als html-Seiten?

Geschrieben von Golden Hope am 16.02.2009 um 14:44:

Ja, ansonsten hier ein Skript:

In den Head bereich:

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:

<script type="text/javascript"> 

/*********************************************** 
* Switch Menu script- by Martial B of http://getElementById.com/ 
* Modified by Dynamic Drive for format & NS4/IE4 compatibility 
* Visit http://www.dynamicdrive.com/ for full source code 
***********************************************/ 

if (document.getElementById){ //DynamicDrive.com change 
document.write('<style type="text/css">\n') 
document.write('.submenu{display: none;}\n') 
document.write('</style>\n') 
} 

function SwitchMenu(obj){ 
if(document.getElementById){ 
var el = document.getElementById(obj); 
var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change 
if(el.style.display != "block"){ //DynamicDrive.com change 
for (var i=0; i<ar.length; i++){ 
if (ar[i].className=="submenu") //DynamicDrive.com change 
ar[i].style.display = "none"; 
} 
el.style.display = "block"; 
}else{ 
el.style.display = "none"; 
} 
} 
} 

</script>

Menü:

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:

<div id="masterdiv"> 
<div class="menutitle" onclick="SwitchMenu('sub1')"><b>• Intro</b></div> 
<span class="submenu" id="sub1"> 
Dieser Text erscheint erst, wenn der Besucher auf die Fettgedruckte Überschrift klickt. 
</span> 
<div class="menutitle" onclick="SwitchMenu('sub2')"><b>• Credits</b></div> 
<span class="submenu" id="sub2"> 
Dieser Text erscheint erst, wenn der Besucher auf die Fettgedruckte Überschrift klickt. 
</span> 
<div class="menutitle" onclick="SwitchMenu('sub3')"><b>• About Me</b></div> 
<span class="submenu" id="sub3"> 
Dieser Text erscheint erst, wenn der Besucher auf die Fettgedruckte Überschrift klickt. 
</span> 
<br> 
</div>

Geschrieben von Sidney am 16.02.2009 um 15:14:

danke dir^^
Wenn es jetzt noch ne Möglichkeit gibt die Kategorielinks wie Links zu behandeln, dann bin ich glücklich^^

Geschrieben von Golden Hope am 16.02.2009 um 15:33:

Du musst einfach statt dem namen das eingeben:

<a href="http://ADRESSE.de" target="MAIN">LINK</a>

Geschrieben von Sidney am 16.02.2009 um 15:37:

*kopf meets wand* Ich sag ja, zuviele Bäume für den Wald... Klong...
Danke euch

Edit: @Goldenhope, ich meinte eigentlich das, wo jetzt bei mir z.B. Index, Redaktion und so steht, dass das als Link behandelt wird
http://ezine.digital-art.ws

//EDIT 2: meine eigene Blödheit stand mir mal wieder im Weg. Habs jetzt. Danke für eure Hilfe^^

Geschrieben von Morgan Girl am 05.05.2009 um 17:03:

hey also der code is klasse, leider funktioniert er bei mir nicht so ganz =(
ich hätte es gerne so, dass man auf eine tabellenzeile klickt und sich darunter dann weitere zeilen reinschieben. und wenn man nochmal auf die oberzeile klcikt, dann verschwinden die eingeschobenen wieder. habs mit dem switchmenü probiert, aber es klappt nicht =(

soll ich den code reinstellen?

Geschrieben von Morgan Girl am 06.05.2009 um 14:28:

Link: klick

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:
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:
224:
225:
226:
227:
228:
229:
230:
231:
232:
233:
234:
235:
236:
237:
238:
239:
240:
241:
242:
243:
244:
245:
246:
247:
248:
249:
250:


<html>
<head>
<title>Die Pferdchenfarm</title>
<link rel=stylesheet href=style.css>
<script type="text/javascript" src="scripte/overlib.js">
<script type="text/javascript"> 

/*********************************************** 
* Switch Menu script- by Martial B of http://getElementById.com/ 
* Modified by Dynamic Drive for format & NS4/IE4 compatibility 
* Visit http://www.dynamicdrive.com/ for full source code 
***********************************************/ 

if (document.getElementById){ //DynamicDrive.com change 
document.write('<style type="text/css">\n') 
document.write('.submenu{display: none;}\n') 
document.write('</style>\n') 
} 

function SwitchMenu(obj){ 
if(document.getElementById){ 
var el = document.getElementById(obj); 
var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change 
if(el.style.display != "block"){ //DynamicDrive.com change 
for (var i=0; i<ar.length; i++){ 
if (ar[i].className=="submenu") //DynamicDrive.com change 
ar[i].style.display = "none"; 
} 
el.style.display = "block"; 
}else{ 
el.style.display = "none"; 
} 
} 
} 
</script> 
</head>
<body>
<div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div>
<?php
include("Datenbank.php");
$id = "$_GET[ID]";
$Ergebnis = mysql_query( "SELECT * FROM Mitglieder where ID='$id'" );
if (@mysql_num_rows($Ergebnis) == 0) {
echo "<font color="red"><b>Dieses Mitglied existiert nicht!</b></font>";
}
else {
$Data = mysql_fetch_array( $Ergebnis );
?>
<br>
<h1><?php echo"$Data[Username]"?></h1>
<table align="center" width="500px">
<tr>
<th colspan="3" width="100%" height="25"><b>Allgemein & Real Life</b></td>
</tr>
<tr>
<td rowspan="10" width="40%" style="border: 2px solid #8EAD1E"><img src="Userbilder/<?php echo"$Data[Username]"?>.png"></td>
<td id="dunkel" width="30%" height="27px">Username</td>
<td id="hell" width="30%"><?php echo"$Data[Username]"?></td>
</tr>
<tr>
<td id="dunkel" width="30%" height="27px">Geburtstag</td>
<td id="hell" width="30%"><?php echo"$Data[Geburtstag]"?></td>
</tr>
<tr>
<td id="dunkel" width="30%" height="27px">Wohnort</td>
<td id="hell" width="30%"><?php echo"$Data[Wohnort]"?></td>
</tr>
<tr>
<td id="dunkel" width="30%" height="27px">Lieblingsmusik</td>
<td id="hell" width="30%"><?php echo"$Data[Lieblingsmusik]"?></td>
</tr>
<tr>
<td id="dunkel" width="30%" height="27px">Lieblingsfilm</td>
<td id="hell" width="30%"><?php echo"$Data[Lieblingsfilm]"?></td>
</tr>
<tr>
<td id="dunkel" width="30%" height="27px">Lieblingsserie</td>
<td id="hell" width="30%"><?php echo"$Data[Lieblingsserie]"?></td>
</tr>
<tr>
<td id="dunkel" width="30%" height="27px">Lieblingsessen</td>
<td id="hell" width="30%"><?php echo"$Data[Lieblingsessen]"?></td>
</tr>
<tr>
<td id="dunkel" width="30%" height="27px">Interessen</td>
<td id="hell" width="30%"><?php echo"$Data[Interessen]"?></td>
</tr>
<tr>
<td id="dunkel" width="30%" height="30px">Reitet seit</td>
<td id="hell" width="30%"><?php echo"$Data[Reiten]"?></td>
</tr>
<tr>
<td id="dunkel" width="30%" height="27px">Reitstil</td>
<td id="hell" width="30%"><?php echo"$Data[Reitstil]"?></td>
</tr>
<tr>
<td id="hell" width="100%" colspan="3"><br><?php echo"$Data[Profil]"?><br><br></td>
</tr>
<tr><td>&nbsp;</td></tr>
</table>
<table align="center" width="500px">
<tr>
<th colspan="2" width="100%" height="25"><b>Virtuelles</b></td>
</tr>
<tr>
<td id="dunkel" width="50%" height="25px">Status</td>
<td id="hell" width="50%"><?php echo"$Data[Status]"?></td>
</tr>
<tr>
<td id="dunkel" width="50%" height="25px">Kontostand</td>
<td id="hell" width="50%"><img src="Geld.png"> <?php echo"$Data[Kontostand]"?></td>
</tr>
<tr>
<td id="dunkel" width="50%" height="25px">Reiterliches Können</td>
<td id="hell" width="50%"><?php echo"$Data[Koennen]"?></td>
</tr>
<div id="masterdiv"> 
<tr>
<td id="dunkel" width="50%" height="25px">Dressur &nbsp; <div class="menutitle" onclick="SwitchMenu('sub1')">&#9660;</div></td>
<td id="hell" width="50%"><img src='Ausbildung/5.<?php echo"$Data[Dressur]"?>.gif'"></td
</tr>
<span class="submenu" id="sub1"> 
<tr>
<td id="hell">Ganze Bahn:</td>
<td id="dunkel"><?php echo"$Data[GB]"?> %</td>
</tr>
<tr>
<td id="hell">Durch die ganze Bahn wechseln:</td>
<td id="dunkel"><?php echo"$Data[GB_W]"?> %</td>
</tr>
<tr>
<td id="hell">Halbe Bahn:</td>
<td id="dunkel"><?php echo"$Data[HB]"?> %</td>
</tr>
<tr>
<td id="hell">Durch die halbe Bahn wechseln:</td>
<td id="dunkel"><?php echo"$Data[HB_W]"?> %</td>
</tr>
<tr>
<td id="hell">Länge der Bahn:</td>
<td id="dunkel"><?php echo"$Data[LB]"?> %</td>
</tr>
<tr>
<td id="hell">Durch die Länge der Bahn wechseln:</td>
<td id="dunkel"><?php echo"$Data[LB_W]"?> %</td>
</tr>
<tr>
<td id="hell">Zirkel:</td>
<td id="dunkel"><?php echo"$Data[Zirkel]"?> %</td>
</tr>
<tr>
<td id="hell">Aus dem Zirkel wechseln:</td>
<td id="dunkel"><?php echo"$Data[aZirkel_W]"?> %</td>
</tr>
<tr>
<td id="hell">Durch den Zirkel wechseln:</td>
<td id="dunkel"><?php echo"$Data[dZirkel_W]"?> %</td>
</tr>
<tr>
<td id="hell">Aus der Ecke kehrt:</td>
<td id="dunkel"><?php echo"$Data[aEK]"?> %</td>
</tr>
<tr>
<td id="hell">Kleine Volte (6m):</td>
<td id="dunkel"><?php echo"$Data[kV]"?> %</td>
</tr>
<tr>
<td id="hell">Kleine Kehrtvolte (6m):</td>
<td id="dunkel"><?php echo"$Data[kKV]"?> %</td>
</tr>
<tr>
<td id="hell">Mittlere Volte (8m):</td>
<td id="dunkel"><?php echo"$Data[mV]"?> %</td>
</tr>
<tr>
<td id="hell">Mittlere Kehrtvolte (8m):</td>
<td id="dunkel"><?php echo"$Data[mKV]"?> %</td>
</tr>
<tr>
<td id="hell">Große Volte (10m):</td>
<td id="dunkel"><?php echo"$Data[gV]"?> %</td>
</tr>
<tr>
<td id="hell">Große Kehrtvolte (10m):</td>
<td id="dunkel"><?php echo"$Data[gKV]"?> %</td>
</tr>
<tr>
<td id="hell">Einfache Schlangenlinie:</td>
<td id="dunkel"><?php echo"$Data[S1]"?> %</td>
</tr>
<tr>
<td id="hell">Doppelte Schlangenlinie:</td>
<td id="dunkel"><?php echo"$Data[S2]"?> %</td>
</tr>
<tr>
<td id="hell">Schlangenlinie mit 3 Bögen:</td>
<td id="dunkel"><?php echo"$Data[S3]"?> %</td>
</tr>
<tr>
<td id="hell">Schlangenlinie mit 4 Bögen:</td>
<td id="dunkel"><?php echo"$Data[S4]"?> %</td>
</tr>
</span> 
<tr>
<td id="dunkel" width="50%" height="25px">Springen</td>
<td id="hell" width="50%"><img src="Ausbildung/5.<?php echo"$Data[Springen]"?>.gif"></td>
</tr>
<tr>
<td id="dunkel" width="50%" height="25px">Gelände</td>
<td id="hell" width="50%"><img src="Ausbildung/5.<?php echo"$Data[Gelaende]"?>.gif"></td>
</tr>
<tr>
<td>&nbsp;</td></tr>
</tr>
<tr>
<th width="50%" height="25px"><b>Bücher</b></th>
<th width="50%" height="25px"><b>Abzeichen</b></th>
</tr>
<tr>
<td id="hell" width="50%" height="25px">
<?php
}
$ErgebnisBuch = mysql_query( "SELECT * FROM Buecher where User_ID='$Data[ID]'" );
while($DataBuch = mysql_fetch_array($ErgebnisBuch)) {
echo"<img src="Buecher/$DataBuch[Buch_ID].gif" onmouseover="return overlib('<i>Beschreibung:</i><br>$DataBuch[Buchbeschreibung]<br> ', CAPTION, ' $DataBuch[Buchtitel] ', FGCOLOR, '#aac254', BGCOLOR, '#62860C', BORDER, 2, CAPTIONFONT, 'verdana', CAPTIONSIZE, 2, WIDTH, '300',  TEXTFONT, 'verdana', TEXTSIZE, 2, HPOS=RIGHT) ;" onmouseout="return nd();"> 
"; 
} 
?>
</td>
<td id="hell" width="50%" height="25px">Abzeichen</td>
</tr>
<td>&nbsp;</td></tr>
<tr>
<th id="dunkel" colspan="2" width="100%" height="25px"><b>Pferde</b></th>
</tr>
<?php
$ErgebnisPferd = mysql_query( "SELECT * FROM pferd where Besitzer='$Data[Username]'" );
while($DataPferd = mysql_fetch_array($ErgebnisPferd)) {
echo"
<tr>
<td id="hell" colspan="2" width="100%" height="25px"><a href="Pferd.php?ID=$Data1[ID]">$DataPferd[Zuchtname]</a> - $DataPferd[Rasse] - $DataPferd[Jahre] Jahre - $DataPferd[Talent]</td>
</tr>";
}
?>
</td>
</tr>
</body>
</html>

Geschrieben von Morgan Girl am 08.05.2009 um 20:21:

*nochmal hochschieb*