aufklappmenü

.$pIrit

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

ProfJack

Hi,

wenn man davon absieht, dass dieser Code nicht funktioniert, müsste man für ein zweites Menü einfach Namen vergeben.

Gruß,
Jakob

.$pIrit

doch der funtzt.
zu sehen auf http://www.ibb-town-city.de/chat.php

und kannste mir code geben weiß nich was genau

ProfJack

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

.$pIrit

Danke dir hast mir echt geholfen

Auf sowas hätt ich auch selber kommen müssen Augen rollen

Grabwolf

Zitat:

Original von .$pIrit
doch der funtzt.
zu sehen auf http://www.ibb-town-city.de/chat.php

und kannste mir code geben weiß nich was genau

Ah, einer aus meiner Umgebung.
Ibbenbüren, da arbeite ich im Bergwerk

Grüße aus Recke/Espel

.$pIrit

Danke die grüße gehen natürlich auhc zurück

Kamuikodou

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.

Schweinebacke

was bitte soll sich da verschieben. verwirrt

Kamuikodou

Schau dir meine Seite mal im IE an, das Menü ist total verzerrt.
www.jrock-community.de

Schweinebacke

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.

Kamuikodou

Hmm, ok vielen Dank Schweinebacke. Ich hoffe das es nicht zu schwer wird, das "verzerrte" wieder gerade zu biegen.

Schweinebacke

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.

Xmobile

doch der funtzt.

Kamuikodou

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

Byteandi

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.

Kamuikodou

Hilft leider auch nichts, kann mir jemand vielleicht eine JavaScript lösung nennen?

Byteandi

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/

Kamuikodou

Ok, vielen dank ich habs mir angeschaut, ich werd schauen das ich das schnell behebe, nochmals danke.

Byteandi

ok, wenn deine fehler beseitigt, bzw. das richtig angepasst ist, kannst du im header bereich zum beipsiel diesen javascript code einbauen

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:

<script type='text/javascript'>

function bn_menu()
{	var i=0;
	var s=document.getElementById('bn_menu').getElementsByTagName('li');
	while(s[i])	
	{	s[i].onmouseover=new Function("bn_open(this)");
		s[i++].onmouseout=new Function("bn_close(this)");
	}
	s=document.getElementById('bn_menu_2').getElementsByTagName('li');
	i=0;
	while(s[i])	
	{	s[i].onmouseover=new Function("bn_open(this)");
		s[i++].onmouseout=new Function("bn_close(this)");
	}
}

function bn_open(s)
{	var d="";
	var f="";
	f=s.getElementsByTagName("ul")[0];
	if(f)
	{	f.style.display="block";
		f=s.getElementsByTagName("a")[0]
	}
	return false;
}

function bn_close(s)
{	var d="";
	var f="";

	f=s.getElementsByTagName("ul")[0];
	if(f)	
	{	f.style.display="none";
		f=s.getElementsByTagName("a")[0]
	}
	return false;
}

</script>

dann musst du nichts weiter machen, als in deinem <body> ein onload='bn_menu()' hinzufügen

und deinen haupt uls eine id geben, also so dass es so aussieht:

code:
1: 2: 3: 4:	<ul id='bn_menu'> <li><img src="http://www.jrock-community.de/images/despa_style/top_uns.gif">

und

code:
1: 2: 3: 4:	<ul id='bn_menu_2'> <li><img src="http://www.jrock-community.de/images/despa_style/top_infos.gif">

dann kann das Menü auch im sechser IE geöffnet werden.

nächste Seite

Forensoftware: Burning Board, entwickelt von WoltLab GmbH