Navigation wie auf mobiler wikipedia Site

[austriaman]

Hallo,

ich würde gerne eine Navigation erstellen, welche EXAKT der Vorlage der mobilen Version von wikipedia entspricht.
Als Beispiel sei hier der Eintrag zur Tulpe dokumentiert (ganz einfach nachzusehen unter http://de.m.wikipedia.org/wiki/Tulpe ): Die <h2> - Überschriften sind da als auf- und zuklappbare Navigationsvariante ausgeführt, gleichzeitig wird show.png durch hide.png ersetzt. Natürlich gibt es im Web massig Tutorials zu derartigen toggle Menüs; bisher konnte ich aber kein einziges finden, welches exakt die einfache wie geniale Funktionalität der mobilen Variante von wikipedia repliziert (aus dem Quelltext werde ich zudem nicht wirklich schlau, da die JavaScript-Segmente unter den Gesichtspunkten der Lesbarkeit denkbar ungünstig aufbereitet sind).

Tausend Dank an den- oder diejenige(n), der oder die mir damit weiterhelfen kann!
aut.

 

[MrMurphy]

Hallo,

aus deiner Fragestellung geht nicht so recht hervor ob es dir um die Funktionalität oder das Aussehen geht. Das Aussehen sollte sich "relativ leicht" per css erstellen lassen.

Da ich einen Slider mit der gleichen Funktionalität auch schon länger vermisse, habe ich meine Suche mal intensiviert und bin auf folgende Seite gestoßen:

http://www.starstormdesign.de/jquery-faq-im-accordion-style/

mit der Live-Demo

http://demos.starstormdesign.de/jquery/faq_im_accordion_style.html

Soweit ich das verglichen habe ist die Funktionalität gleich zu sein, auch die dir wichtige Grafik wird beim Aufklappen ausgetauscht.

Gleichzeitig gibt es das mir wichtige Fallback, das bei blockiertem JavaScript alle Informationen aufgeklappt angezeigt werden und die Besucher mit blockiertem JavaScript keinen Nachteil haben.

Zudem kann das übersichtliche Script sehr einfach angepasst werden, so dass beliebige (aber natürlich passende) Elemente für den Slider benutzt werden können. Zum Beispiel ein umgebendes section-Element, ein h2-Element als Schaltfläche und ein article-Element für den Inhalt, der aufgeklappt wird.

Gruss

MrMurphy

 

[Tronjer]

Das ist ein Dreizeilen-Script. Dazu benötigt es doch kein Tutorial. ;)

Die <li> sollten by default das Bild mit dem arrow down besitzen. Den arrow up würde ich in eine separate CSS-Klasse packen, die per jQuery angehängt wird.

Pattern (ungetestet und nicht zum copy & paste bestimmt):

$('ul li').click(function() {
  $(this).toggleClass('arrow_up').find('p').toggle();
});

Sofern eine Animation beim auf- und zuklappen gewünscht wird, kann man toggle() auch durch slideToggle() ersetzen.

 

[austriaman]

Hallo,
danke für eure Hilfe!

Das ist ein Dreizeilen-Script. Dazu benötigt es doch kein Tutorial. ;)

Die <li> sollten by default das Bild mit dem arrow down besitzen. Den arrow up würde ich in eine separate CSS-Klasse packen, die per jQuery angehängt wird.

Pattern (ungetestet und nicht zum copy & paste bestimmt):

$('ul li').click(function() {
  $(this).toggleClass('arrow_up').find('p').toggle();
});

Sofern eine Animation beim auf- und zuklappen gewünscht wird, kann man toggle() auch durch slideToggle() ersetzen.

Ganz so einfach war's in meinem Fall nicht, hab's aber auf dieser Basis dann doch noch gut hinbekommen.
LG,
aut.