Versteckter / Aufgedeckter Inhalt auf Seite per Klick

Seite 12 3

1 Tilman

Hallo!

Schon einige Male habe ich gesehen, dass wenn ich auf einen Link klicke, ein Inhalt sichtbar wird oder verstckt wird. Dabei bleibt man aber auf der gleichen Seite.

Beispiel:

Die normale Adresse ist:
http://www.arcor.de/ums/ums_titel.jsp?tnr=-1004509356

Wenn ich auf den Link E-MAIL & MESSAGING klicke, erscheint der Url http://www.arcor.de/ums/ums_titel.jsp?tnr=-1004509356#messaging, dazu erscheinen Unterpunkte zu dem Punkt.

Klicke ich auf einen anderen Link, so geschieht das gleiche, aber die Unterpunkte von dem anderem Punkt (E-MAIL & MESSAGING)
verschwinden.

Kennt jemand einen Code dazu?

2 Jörg Kruse

Hallo Tilman,

einen Link E-MAIL & MESSAGING kann ich nicht sehen, da ich keinen Account bei Acor habe. Befindet sich dieser oben in der Navigation, wie z.B. "Produkte"? Dabei handelt es sich um ein sogenanntes Aufklappmenü, welches wohl mit JavaScript umgesetzt ist.

Eine solche Einblendung kann bei modernen BRowsern auch mit CSS vorgenommen werden, eine Beschreibung findet sich z.B. auf SELFHTML:

http://de.selfhtml.org/css/layouts/navigationsleisten.htm#modern

Unterhalb findet sich auch ein ergänzendes Script, damit das Menü auch im IE 6 +5 aufklappt

3 Tilman

Nein, das meine ich nicht. (Aber trotzdem nützlich)

So sieht das ungefähr aus:

E-MAIL & MESSAGING
NOTIFICATION & FILTER
ADRESSEN & TERMINE

Wenn ich auf E-MAIL & MESSAGING klicke, siehst ungefähr so aus:

E-MAIL & MESSAGING
- SMS
- GlobalSMS
- E-Mail
- Fax
NOTIFICATION & FILTER
ADRESSEN & TERMINE

4 Jörg Kruse

So etwa ließe sich mit der Anleitung auf SELFHTML aber bewerkstelligen. Ob die Hautpmenüpunkte dabei nebeneinander oder übereinander aufgeführt sind und wohin die Untermenüpunkte aufgeklappt werden, ist eine sekundäre Geschichte

5 Tilman

Kennst du einen Code?

6 Jörg Kruse

Na, als erstes musst du eine verschachtelte Liste erstellen:

<ul id="Navigation">
<li>E-MAIL &amp; MESSAGING
  <ul>
  <li>SMS</li>
  <li>GlobalSMS</li>
  </ul>
</li>
<li>NOTIFICATION &amp; FILTER</li>
</ul>

Im CSS-Teil kannst du die Listenpunkte der zweiten Ebene ausblenden

ul#Navigation li ul {
display: none;
}

Bei hover werden sie wieder eingeblendet:

ul#Navigation:hover li ul {
display: block;
}

Das sollte in Firefox, Opera, IE 7 und andren modernen Browser funktionieren. Für den IE 6 muss dann noch die JavaScript-Lösung von SELFHTML eingebat werden

7 Tilman

Ja, aber bei diesem Code verschwinden die Unterpunkte wieder, wenn man wieder von E-MAIL & MESSAGING oder dessen Unterpunkte weggeht.

Wonach ich suche, ist, dass die Unterpunkte nicht verschwinden, sondern stehen bleiben.

8 Jörg Kruse

Das müsste dann mit JavaScript umgesetzt werden: bei onclick werden die untergeordneten Listenpunkte eingeblendet und die der anderen Hauptpunkte ausgeblendet; dieses Jahr komme ich allerdings nicht mehr dazu, das Vorgehen en detail zu beschreiben ;) (vielleicht kennt jemand anders aber noch eine geeignete Vorlage?)

9 mats

Man könnte dies natürlich auch mit PHP bewerkstelligen:

<ul>
 <li><a href="index.php?open=email">Email&Messaging</a></li>
 <? if($_GET['open']=='email'){ ?>
     <ul>
       <li>SMS</li>
       <li>Email</li>
     </ul>
 <? } ?>
</ul>

So würde ich das machen, als PHP-Heini.

Gruß,

Mats

10 Jörg Kruse

Ja, über PHP kann man die versteckten Inhalte auch einblenden. Das hätte den Vorteil gegenüber einer JavaScript-Lösung, dass diese Inhalte auch Usern mit deaktiviertem JavaScript zugänglich sind. Nachteil wäre ein größerer Traffic, da bei jedem Klick die Seite neu vom Server geladen wird. Noch eine weitere Möglichkeit wäre es, den Inhalt über Ajax nachzuladen - was aber auch JavaScript voraussetzt und nicht suchmaschinenfreundlich ist

Seite 12 3

nach oben weiter >