Anleitung zum Einbau einer Tab-Navigation (oder eines Karteireiter-Menüs) in WordPress
Schon länger habe ich geplant ein Tab-Menü einzubauen.
Ich konnte mich bislang aber nicht recht entscheiden welches Script ich dazu einbaue.
Hier ein paar Optionen:
- jQuery
Anleitung: for Designers inkl. Video - Dom-Tab-Navigation
- Easy-Tabs von Kollermedia
mit automatischen Umspringen der Tabs - JavaScript tabifier von BarelyFitz Designs
- Tab-Menü ohne Plug-In
falls man nichts zu verbergen hat – also nichts ausgeblendet werden soll
Zunächst war mein Gedanke jQuery einzubauen, da dieses Script bereits mit WordPress ausgeliefert wird. Ich hatte aber meine Schwierigkeiten es zum Laufen zu kriegen. (jQuery ist wohl nicht gleich jQuery)
Das Script ist sehr schlank (10KB) und lässt sich auch in Templates einbauen.
Anwendungsbeispiel: Startseite
Auf der Seite OnlineTools das Script runterladen und nur die Datei domtabs.js in den Theme-Ordner schieben.
Oftmals gibt es dort bereits einen Ordner für javascripts …/js oder …/javasript
Das Script muss jetzt in das Theme eingebunden werden. Ich habe den Code im Footer eingesetzt. Das senkt etwas die Ladezeiten. Kann aber auch im Header platziert werden.
Der Code zum reinkopieren:
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/domtab.js"></script>
Den Inhalt der beiliegenden css-Datei habe ich kopiert und in meine style.css eingeügt. Dadurch lässt sich zunächst bequemer an der Optik feilen.
meine derzeitigen css-Angaben
Zunächst habe ich für den Beitrag die Vorgabe von der Dom-Tab Seite übernommen und dann den Text geändert.
Und so sieht der Text zu diesem Beitrag aus:
<div class="domtab">
<ul class="domtabs">
<li><a href="#t1">Download</a></li>
<li><a href="#t2">Einbinden</a></li>
<li><a href="#t3">Styling</a></li>
<li><a href="#t4">Beitrag</a></li>
</ul>
<div>
<h2><a name="t1" id="t1"></a></h2>
Auf der Seite das Script runtergeladen und in meinem Theme-Ordner geschoben.
</div>
<div>
<h2><a name="t2" id="t2"></a></h2>
Das Script einbinden. Ich habe den Code im Footer eingebunden. </div>
<div>
<h2><a name="t3" id="t3"></a></h2>
Den Inhalt der beiliegenden css-Datei habe ich kopiert und in meine style.css eingeügt.
</div>
<div>
<h2><a name="t4" id="t4"></a></h2>
Zunächst habe ich für den Beitrag die Vorgabe von der Dom-Tab Seite übernommen und dann den Text geändert.
</div>
</div>
1 Kommentar
Hey, danke! Seit zwei Tagen bin ich auch am Grübeln, wie und mit welchem Script ich es umsetzen will. Ich denke ein wichtiger Punkt in der Überlegung sollte auch sein: Wie es aussieht, wenn javascript ausgeschaltet ist…
Ich werde mich glaube für die jq variante entscheiden, obwohl ich das tabifier super finde. Aber ich habs nicht zum laufengebracht…