Zur Navigation

Versteckter / Aufgedeckter Inhalt auf Seite per Klick

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?

29.12.2007 13:47

2 Jörg

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

29.12.2007 14:36

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

29.12.2007 17:29

4 Jörg

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

29.12.2007 17:47

5 Tilman

Kennst du einen Code?

31.12.2007 12:42

6 Jörg

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

31.12.2007 14:19 | geändert: 31.12.2007 14:20

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.

31.12.2007 14:53

8 Jörg

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?)

31.12.2007 17:11

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

01.01.2008 15:51

10 Jörg

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

01.01.2008 16:51 | geändert: 01.01.2008 16:52