aufklappmenü |
.$pIrit
Mitglied
Dabei seit: 09.08.05
Beiträge: 174
Fähigkeiten: WBB2 Profi Herkunft: Ibbenbüren Forenversion: 2.3
|
|
hey ich habe folgenden code für ein aufklappmenü:
code: |
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
|
<script language="JavaScript" type="text/javascript">
<!--
function exchangeDisplay(id,id2){
if(document.getElementById(id).style.display == 'none')
{
document.getElementById(id).style.display = 'block';
document.getElementById(id2).style.display = 'none';
}
else
{
document.getElementById(id).style.display = 'none';
document.getElementById(id2).style.display = 'block';
}
}
//--> |
|
zum öffnne und schließen nimmt man den code:
code: |
1:
|
<a href="javascript:exchange('layer1','layer2')">text</a> |
|
die ebene die von erscheint wenn es geschlossen ist wird mit:
code: |
1:
|
<span id="layer2" style="display: block;" class="smallfont"></span> |
|
gekennzeichnet.
die ebene die geöffnet erscheint so
code: |
1:
|
<span id="layer1" style="display: none;"> |
|
dann ist die erste ebene nich mehr da.
So jetzt möchte ich wissen was ich mache muss damit ich verschiedene aufklappmenüs auf einer seite machen möchte
|
|
03.08.06 20:15 |
E-Mail
WWW
Finden
Als Freund hinzufügen
|
|
ProfJack
Mitglied
Dabei seit: 13.11.05
Beiträge: 610
|
|
Hi,
wenn man davon absieht, dass dieser Code nicht funktioniert, müsste man für ein zweites Menü einfach Namen vergeben.
Gruß,
Jakob
|
|
03.08.06 20:24 |
E-Mail
Finden
Als Freund hinzufügen
|
|
ProfJack
Mitglied
Dabei seit: 13.11.05
Beiträge: 610
|
|
Hi,
hier der Code, ich denke, dass du dich darin auskennst:
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:
|
<html><head>
<script language="JavaScript" type="text/javascript">
<!--
function exchangeDisplay(id,id2){
if(document.getElementById(id).style.display == 'none')
{
document.getElementById(id).style.display = 'block';
document.getElementById(id2).style.display = 'none';
}
else
{
document.getElementById(id).style.display = 'none';
document.getElementById(id2).style.display = 'block';
}
}
//-->
</script>
</head>
<body>
<span id="layer1" style="display:none;">
Das hier ist der zweite Layer!
</span>
<span id="layer2" style="display:block;" class="smallfont" align="center"><a href="javascript:exchangeDisplay('layer1','layer2')">Hier klicken fuer den zweiten Layer!</a></span>
<br />
<br />
<br />
<br />
<span id="layer3" style="display:none;">
Das hier ist der dritte Layer!
</span>
<span id="layer4" style="display:block;" class="smallfont" align="center"><a href="javascript:exchangeDisplay('layer3','layer4')">Hier klicken um den dritten Layer anzuzeigen!</a></span></body> |
|
Solltest du eine Anleitung brauchen, dann schreib hier nochmal rein.
Gruß,
Jakob
|
|
03.08.06 21:02 |
E-Mail
Finden
Als Freund hinzufügen
|
|
.$pIrit
Mitglied
Dabei seit: 09.08.05
Beiträge: 174
Fähigkeiten: WBB2 Profi Herkunft: Ibbenbüren Forenversion: 2.3
Themenstarter
|
|
Danke dir hast mir echt geholfen
Auf sowas hätt ich auch selber kommen müssen
|
|
03.08.06 21:07 |
E-Mail
WWW
Finden
Als Freund hinzufügen
|
|
.$pIrit
Mitglied
Dabei seit: 09.08.05
Beiträge: 174
Fähigkeiten: WBB2 Profi Herkunft: Ibbenbüren Forenversion: 2.3
Themenstarter
|
|
Danke die grüße gehen natürlich auhc zurück
|
|
04.08.06 12:06 |
E-Mail
WWW
Finden
Als Freund hinzufügen
|
|
Kamuikodou
Mitglied
Dabei seit: 07.04.06
Beiträge: 103
Herkunft: Saarland Forenversion: 2.3
|
|
Kann mir jemand sagen, wie ich den Code von ProfJack an den IE anpassen kann?
Weil im Firefox wird alles normal angezeigt nur im IE ist alles verschoben.
Bitte helft mir.
|
|
21.08.07 17:39 |
E-Mail
Finden
Als Freund hinzufügen
|
|
Schweinebacke
Mitglied
Dabei seit: 06.01.06
Beiträge: 826
Herkunft: Baden Württemberg
|
|
Ich habe mir deine Seite und den Quelltext mal angesehen.
Der ist allerdings sehr konfus. Daher wird das noch ein Weilchen dauern.
Eins ist auf alle Fälle klar, mit dem Code von @ ProfJack hat das nichts am Hut.
|
|
23.08.07 10:01 |
E-Mail
Finden
Als Freund hinzufügen
|
|
Kamuikodou
Mitglied
Dabei seit: 07.04.06
Beiträge: 103
Herkunft: Saarland Forenversion: 2.3
|
|
Hmm, ok vielen Dank Schweinebacke. Ich hoffe das es nicht zu schwer wird, das "verzerrte" wieder gerade zu biegen.
|
|
23.08.07 12:03 |
E-Mail
Finden
Als Freund hinzufügen
|
|
Schweinebacke
Mitglied
Dabei seit: 06.01.06
Beiträge: 826
Herkunft: Baden Württemberg
|
|
Aus deinem Quelltext heraus, sollte es so aussehen.
Die Liste:
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:
|
<!-- Anfang Liste -->
<span class="smallfont">
<div id="menu">
<!-- Link 1 -->
<ul>
<li><a href="register.php?sid="><img src="http://www.jrock-community.de/images/direngrey_style/top_register.gif"></a></li>
</ul>
<!-- Link 2 -->
<ul>
<li><img src="http://www.jrock-community.de/images/despa_style/top_uns.gif">
<!-- Sub -->
<ul>
<li><a href="http://www.jrock-community.de/jgs_portal.php?id=140&sid=">Community</a></li>
<li><a href="http://www.jrock-community.de/ts_index.php">Team</a></li>
<li><a href="http://www.jrock-community.de/jgs_portal.php?id=177&sid=">Kontakt</a></li>
<li><a href="http://www.myspace.com/jrockcommunity" target="_blank">MySpace</a></li>
<li><a href="http://www.jrock-community.de/empfehlen.php">Uns Empfehlen</a></li>
<li><a href="http://www.jrock-community.de/jgs_portal_statistik.php?sid=">Statistik</a></li>
</ul>
</li>
</ul>
<!-- Link 3 -->
<ul>
<li><img src="http://www.jrock-community.de/images/despa_style/top_infos.gif">
<!-- Sub -->
<ul>
<li><a href="http://www.jrock-community.de/jgs_portal.php?id=171&sid=">Band Pages</a></li>
<li><a href="http://www.jrock-community.de/jgs_portal.php?id=108&sid=">Labels</a></li>
<li><a href="http://www.jrock-community.de/jgs_treffen.php?sid=">Events</a></li>
<li><a href="http://www.jrock-community.de/club_locator.php">Konzerthallen</a></li>
</ul>
</li>
</ul>
</div> </span></td>
<!-- Ende Liste --> |
|
Die passende CSS
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:
|
#menu { width: 100%; background: #eee; }
#menu ul { list-style: none; margin: 0; padding: 0; width: 110px; float: left; }
#menu a
{ font: bold 11px/16px arial, helvetica, sans-serif;
display: block; border-width: 0px; border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0; padding: 2px 3px;
color: #000; background: #efefef; text-decoration: none;}
#menu a:hover { color: #a00; background: #fff;}
#menu li {position: relative;}
#menu ul ul { position: absolute; top: 20px; left: 0px; z-index: 500; }
div#menu ul ul,
div#menu ul li:hover ul ul,
{display: none;}
div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
{display: block;} |
|
Wo du das Eintragen musst, wirst du hoffentlich wissen.
|
|
23.08.07 15:30 |
E-Mail
Finden
Als Freund hinzufügen
|
|
Kamuikodou
Mitglied
Dabei seit: 07.04.06
Beiträge: 103
Herkunft: Saarland Forenversion: 2.3
|
|
Also, das ist momentan mein Kompletter Code, weil ich hatte was vergessen zu posten.
@Schweinebacke tut mir leid wenn ich dich damit nochmal Nerve...
Hier einmal das Menü:
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:
|
<tr>
<td colspan="2" align="center" style="background-image: url({$style['imagefolder']}/top.gif);"><span class="smallfont">
<div align="center">
<a href="http://www.jrock-community.de/jgs_portal.php?id=83&sid="><img src="http://www.jrock-community.de/images/despa_style/top_konzertberichte.gif" border="0"></a>
<a href="http://www.jrock-community.de/jgs_portal.php?id=80&sid="><img src="http://www.jrock-community.de/images/despa_style/top_reviews.gif" border="0"></a>
<a href="http://www.jrock-community.de/jgs_portal.php?id=217&sid="><img src="http://www.jrock-community.de/images/despa_style/top_interview.gif" border="0"></a>
<a href="http://www.jrock-community.de/jgs_portal.php?id=166&sid="><img src="http://www.jrock-community.de/images/despa_style/top_jpartys.gif" border="0"></a>
<a href="http://www.jrock-community.de/jgs_portal.php?id=201&sid="><img src="http://www.jrock-community.de/images/despa_style/top_tourdaten.gif" border="0"></a>
<a href="http://www.jrock-community.de/jgs_portal.php?id=174&sid="><img src="http://www.jrock-community.de/images/despa_style/top_europa.gif" border="0"></a>
<a href="http://www.jrock-community.de/jgs_portal.php?id=79&sid="><img src="http://www.jrock-community.de/images/despa_style/top_bandinfos.gif" border="0"></a>
<a href="http://www.jrock-community.de/index.php"><img src="http://www.jrock-community.de/images/despa_style/top_forum.gif" border="0"></a>
<a href="http://www.jrock-community.de/portal.php"><img src="http://www.jrock-community.de/images/despa_style/top_portal.gif" border="0"></a>
</div></span></td>
</tr>
<tr colspan="2" align="center" style="background-image: url({$style['imagefolder']}/top.gif);">
<td colspan="2" align="center" style="background-image: url({$style['imagefolder']}/top.gif);"><span class="smallfont"><div id="menu">
<if($wbbuserdata['userid'])><then>
<ul>
<li><img src="http://www.jrock-community.de/images/despa_style/top_user.gif">
<ul>
<li><a href="http://www.jrock-community.de/usercp.php?sid={$session['hash']}">Profil bearbeiten</a></li>
<li><a href="http://www.jrock-community.de/profile.php?userid=$wbbuserdata[userid]">Dein Profil</a></li>
<li><a href="http://www.jrock-community.de/gaestebuch.php?userid=$wbbuserdata[userid]">Dein Gästebuch</a></li>
<li><a href="http://www.jrock-community.de/memberslist.php?sid={$session['hash']}">User</a></li>
<li><a href="http://www.jrock-community.de/memberslist.php?action=search">User suchen</a></li>
<li><a href="http://www.jrock-community.de/pms.php?sid={$session['hash']}">Nachrichten</a></li>
<if($wbbuserdata['a_can_use_acp']==1 && $wbbuserdata['a_acp_or_mcp']==1)>
<then>
<li><a href="acp/index.php?sid={$session['hash']}" target="_blank">{$lang->items['LANG_GLOBAL_ACP']}</a></li>
</then>
</if>
<if($wbbuserdata['a_can_use_acp']==1 && $wbbuserdata['a_acp_or_mcp']==0)>
<then>
<li><a href="acp/index.php?sid={$session['hash']}" target="_blank">{$lang->items['LANG_GLOBAL_MODCP']}</a></li>
</then>
</if>
</ul>
</li>
</ul>
</then>
<else>
<ul>
<li><a href="register.php?sid=$sission[hash]"><img src="http://www.jrock-community.de/images/despa_style/top_register.gif"></a></li>
</ul>
</li>
</ul></else></if>
<ul>
<li><img src="http://www.jrock-community.de/images/despa_style/top_uns.gif">
<ul>
<li><a href="http://www.jrock-community.de/jgs_portal.php?id=140&sid=">Community</a></li>
<li><a href="http://www.jrock-community.de/ts_index.php">Team</a></li>
<li><a href="http://www.jrock-community.de/jgs_portal.php?id=177&sid=">Kontakt</a></li>
<li><a href="http://www.myspace.com/jrockcommunity" target="_blank">MySpace</a></li>
<li><a href="http://www.jrock-community.de/empfehlen.php">Uns Empfehlen</a></li>
<li><a href="http://www.jrock-community.de/jgs_portal_statistik.php?sid=">Statistik</a></li>
</ul>
</li>
</ul>
<if($wbbuserdata['userid'])><then>
<ul>
<li><img src="http://www.jrock-community.de/images/despa_style/top_service.gif">
<ul>
<li><a href="http://www.jrock-community.de/lexicon.php">Lexikon</a></li>
<li><a href="http://www.jrock-community.de/never.php">Never Ending Story</a></li>
<li><a href="http://www.jrock-community.de/locator.php">User Locator</a></li>
<li><a href="http://www.jrock-community.de/jgs_db.php">Datenbank</a></li>
<li><a href="http://www.jrock-community.de/usercp.php?action=laufschrift">Laufschrift</a></li>
<li><a href="http://www.jrock-community.de/xy_newsletter.php">Newsletter</a></li>
<li><a href="http://www.jrock-community.de/guthaben.php">Guthaben</a></li>
</ul>
</li>
</ul>
</then>
</if>
<ul>
</ul>
<ul>
<li><img src="http://www.jrock-community.de/images/despa_style/top_infos.gif">
<ul>
<li><a href="http://www.jrock-community.de/jgs_portal.php?id=171&sid=">Band Pages</a></li>
<li><a href="http://www.jrock-community.de/jgs_portal.php?id=108&sid=">Labels</a></li>
<li><a href="http://www.jrock-community.de/jgs_treffen.php?sid=$session[hash]">Events</a></li>
<li><a href="http://www.jrock-community.de/club_locator.php">Konzerthallen</a></li>
</ul>
</li>
</ul>
<ul>
</ul>
</tr>
|
|
Und hier die CSS dazu:
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:
|
#menu { width: 100%; background: #eee; }
#menu ul { list-style: none; margin: 0; padding: 0; width: 100px; float: left; }
#menu a, #menu h2
{ font: bold 11px/16px arial, helvetica, sans-serif;
display: block; border-width: 0px; border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0; padding: 2px 3px; }
#menu h2 { color: #FF8635; background: #96D12C; text-transform: uppercase; }
#menu a { color: #000; background: #efefef; text-decoration: none; }
#menu a:hover { color: #a00; background: #fff;}
#menu li {position: relative;}
#menu ul ul { position: absolute; z-index: 500; }
#menu ul ul ul { position: absolute; top: 0; left: 100%; }
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}
div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;} |
|
Wie gesagt, das Problem ist, das es im IE nicht richtig angezeigt wird und alles verschoben ist wie auf dem Screen zu sehen ist. Ich hoffe mir kann jemand helfen.
Ich habe die CSS bei dem dazugehörigen Designpack bei
Weitere Cascading Stylesheets (CSS)
Zusätzlicher CSS Code eingefügt.
Vielen Dank schonmal.
Gruß Kamui
|
|
27.08.07 13:48 |
E-Mail
Finden
Als Freund hinzufügen
|
|
Byteandi
Mitglied
Dabei seit: 03.09.06
Beiträge: 50
Herkunft: Berlin Forenversion: 2.3
|
|
HI, mal abgesehen davon , dass dein menü im IE6 nicht lauffähig ist, hast du in dem html-code haufenweise fehler drinnen, hier mal einige beispiele:
<ul>
</ul>
ich glaube das ist drei mal drinnen und gehört dort definitiv nicht rein, der IE zeigt es als liste an, wodurch im IE die grossen abstände der buttons vorhanden sind.
in deinen styleangaben muss hier ein left:0px top:20px; rein damit es so aussieht
code: |
1:
2:
3:
|
#menu ul ul { position: absolute; left:0px; top:20px; z-index: 500; }
|
|
dann ist das auch nicht mehr verschoben,
zusätzlich hast du am ende vom menü ein </div></td> vergessen.
__________________
Tipps zum Thema HTML / XHTML / CSS
|
|
28.08.07 17:21 |
E-Mail
WWW
Finden
Als Freund hinzufügen
|
|
Kamuikodou
Mitglied
Dabei seit: 07.04.06
Beiträge: 103
Herkunft: Saarland Forenversion: 2.3
|
|
Hilft leider auch nichts, kann mir jemand vielleicht eine JavaScript lösung nennen?
|
|
28.08.07 17:43 |
E-Mail
Finden
Als Freund hinzufügen
|
|
Byteandi
Mitglied
Dabei seit: 03.09.06
Beiträge: 50
Herkunft: Berlin Forenversion: 2.3
|
|
Zitat: |
Hilft leider auch nichts, kann mir jemand vielleicht eine JavaScript lösung nennen? |
spitze die Aussage...... hast du meine angesprochenen Fehler beseitigt......NEIN....hilft dir ein JAVASCRIPT CODE wenn dein layout fehlerhaft ist......NEIN......
ich weiss ja nicht was du jetzt erwartest, aber die offensichtlichen fehler solltest du schon selbstständig beseitigen können, du hast das doch auch eingebaut oder?
so und hier siehst du wie es mit den beseitigten fehlern und einem javscript von mir aussieht und laeuft!
wenn du es gesehen hast, sag bescheid, dann nehme ich es wieder von meinem Server....(die ladezeit kann etwas dauern, da dein server nicht der schnellste ist also einfach warten, bis das layout zu sehen ist)
http://www.bytenation.de/test/
__________________
Tipps zum Thema HTML / XHTML / CSS
|
|
28.08.07 18:59 |
E-Mail
WWW
Finden
Als Freund hinzufügen
|
|
Kamuikodou
Mitglied
Dabei seit: 07.04.06
Beiträge: 103
Herkunft: Saarland Forenversion: 2.3
|
|
Ok, vielen dank ich habs mir angeschaut, ich werd schauen das ich das schnell behebe, nochmals danke.
|
|
28.08.07 19:02 |
E-Mail
Finden
Als Freund hinzufügen
|
|
|