Karteireiter-Navigation mit Javascript & CSS
Aktenzeichen CSS

Intuitives Menü

Karteireiter-Navigation mit Javascript & CSS

Dass sich einzelne Seiten wahlweise in einem neuen Fenster oder in einem neuen Tab öffnen lassen, ist ein beliebtes und nützliches Browser-Feature. Mit CSS und Javascript können Sie dieses Feature aber auch innerhalb einzelner Webseiten realisieren.

Wir stellen Ihnen eine Lösung vor, die in allen Browsern bis auf den Oldie Netscape 4, dem es an CSS-Fähigkeiten fehlt, funktioniert. Sie lässt sich einfach anpassen und besteht aus beliebig vielen Tabs, zu denen jeweils eine Karte gehört, ist spielerisch einfach zu bedienen und Platz sparend. Es ist nicht notwendig, spezielle Grafiken anzufertigen.

Beim Überfahren mit dem Maus-Cursor ändern sich gleichzeitig die Hintergrundfarbe und die Schriftgröße der Tabs. Mit einem Klick auf das gewünschte Tab wird die darunter liegende Seite nach oben geholt. Das hier vorgestellte Skript ist auch ein gutes Beispiel dafür, wie Stylesheets zur Laufzeit veränderbar sind.

Stilvorlagen

Karteireiter-Navigation mit Javascript & CSS

CSS-Angaben spielen eine entscheidende Rolle, weil sie Größe, Aussehen und Position aller sichtbaren Elemente festlegen. Die Tabs benötigen für jeden der drei möglichen Zustände eine eigene Formatierung: aktiv, passiv und hover. Für die Darstellung des Inhalts der Karten genügt eine einzige. Der Workshop erläutert hier nur zwei Definitionen, nämlich jene für das hoverTab und für die Karten:

span.hoverTab {
margin-right:-6px;
padding-left:7px;
padding-right:7px;
font-size:14px;
border:1px solid #E5E5E5;
border-bottom:2px solid #CACACA;
cursor:pointer;
background-color:#CACACA;
color:#5676EA; }
div.CardContent {
padding:8px;
border:1px solid #CACACA;
border-top-style:none;
width:600px; height:360px;
overflow:hidden;
display:none; }

Die CSS-Attribute

Karteireiter-Navigation mit Javascript & CSS

Mit margin bestimmen Sie den Außenabstand, also den des Elements zu den umgebenden Elementen. Im Beispiel erhält der rechte Abstand einen negativen Wert von ?6 Pixel, damit sich die Tabs ein wenig überlappen. Dadurch wird eine einwandfreie Darstellung auch dann gewährleistet, wenn im Browser eine etwas größere Schrift eingestellt ist. Sie können aber natürlich auch Schriftart und -größe angeben.

Padding legt den Innenabstand fest, also zum Beispiel den der Schrift zum Rand des Elements. Der angegebene Wert dient zur Einhaltung eines kleinen Abstands der Schrift zu den Rändern der Tabs und Karten. Border erzeugt einen Rand in beliebiger Farbe und Breite, der sich mit ?top, ?left, ?right und
?bottom für jede Seite spezifisch festlegen lässt. Mit cursor definieren Sie das Aussehen des Mauszeigers. Um anzuzeigen, dass es sich um ein anklickbares Element handelt, geben Sie dem Mauszeiger die Form einer Hand.

Mit width und height legen Sie die Breite und Höhe aller angezeigten Karten fest. Um zu vermeiden, dass der Browser die Größe dem jeweils enthaltenen Inhalt anpasst, also jede Karte in einer anderen Größe darstellt, ist es sinnvoll, einen festen Wert für alle Karten anzugeben. Dieser Wert sollte sich natürlich an der Karte orientieren, die den meisten Platz benötigt. Das Attribut overflow legt fest, was mit jenen Elementen geschehen soll, die in der vorgegebenen Kartengröße keinen Platz mehr finden. Mit dem Wert hidden werden diese abgeschnitten oder mit scroll mit einer extra Scrollleiste ausgestattet.

Sehr wichtig ist das CSS-Attribut display, das mit dem Wert none dafür sorgt, dass die Karten zunächst nicht sichtbar sind. Dieser Wert wird erst durch das Skript manipuliert.

In Gang setzen

Karteireiter-Navigation mit Javascript & CSS

Sie benötigen nur wenige globale Variablen und die recht zweckdienliche intro()-Funktion, die mit einem Event-Handler im body-Tag aufgerufen wird:

var number = 5;
var card = "CardDiv1";
var tabs = new TabCard(number);
function intro() {
tabs.makeActive(1);
}

Das Skript ist so gestaltet, dass Sie der Variablen number nur die gewünschte Anzahl der Tabs zuweisen brauchen und keine weiteren Änderungen am Skript-Code vornehmen müssen.

Mit dem new-Operator erzeugen Sie eine neue Instanz des Objekts TabCard, das in tabs gespeichert wird. Dabei handelt es sich um ein selbst definiertes Objekt, für das Sie eine Konstruktor-Funktion benötigen. Genau genommen werden auch nicht mehrere tabs-Objekte erzeugt, sondern nur ein einziges, dessen Eigenschaft count den Wert 5 hat.

Die Funktion intro() enthält nur einen einzigen Befehl, der beim Laden der Seite das erste Tab aktiviert. Beachten Sie, dass makeActive() eine Funktion ist. Für das tabs-Objekt ist dies jedoch eine definierte Methode und muss daher auch so aufgerufen werden.

Am Objekt orientieren

Karteireiter-Navigation mit Javascript & CSS

Die zur Erstellung der Tabs und Karten zuständige Konstruktor-Funktion sieht so aus:

function TabCard(count) {
this.count = count + 1;
this.makeActive = makeActive;
this.toggle = toggle;
this.m_over = m_over;
this.m_out = m_out;
}

Sämtliche Eigenschaften und Methoden des Objekts werden mit dem Keyword this festgelegt.

Weil die Zählung in Javascript mit 0 beginnt, erhöhen Sie die Eigenschaft count um 1, damit die HTML-Elemente für die Tabs und Karten in der üblichen Weise durchnummeriert werden können. Die im HTML-Bereich zugewiesenen Index-Nummern sollten daher in jedem Fall bei 1 beginnen.

Mit den übrigen Anweisungen definieren Sie die Methoden des Objekts, indem Sie die jeweils gleich lautende Funktion zuweisen. Selbstverständlich ist es nicht notwendig, dass Methoden und zugewiesene Funktionen die gleichen Namen haben, es erhöht jedoch die Übersicht. Das zu Beginn des Skripts erzeugte tabs-Objekt verfügt daher über eine Eigenschaft und vier Methoden. Der Wert für die Eigenschaft count wird mit der anfangs festgelegten Variablen number an das Objekt übergeben. Die Methoden müssen jetzt noch definiert werden.

Tabs aktivieren

Karteireiter-Navigation mit Javascript & CSS

Die nächste Funktion aktiviert das jeweils angeklickte Tab und speichert die dazugehörenden Karten:

function makeActive(num) {
var ncard = "CardDiv" + num;
tabs.toggle(ncard, card);
card = ncard;
var span = document.getElementById("TabSpan" + num);
span.className = "activeTab";
span.onmouseover = null;
span.onmouseout = null;
span.onclick = null;
}

Die Nummer des zu aktivierenden Tabs wird mit dem Parameter num an die Funktion übergeben. Da bei Aktivierung eines Tabs sowohl die Karte gewechselt als auch das vorherige Tab deaktiviert werden muss, rufen Sie zu diesem Zweck die Hilfsfunktion toggle auf. Dieser können Sie die ID-Namen jener beiden Karten, die aktiviert und zurückgesetzt werden sollen, an dieser Stelle gleich übergeben. Denn die Variablen ncard und card dienen zur Speicherung der neuen und der alten Karte.

In der lokalen Variablen span wird anschließend der ID-Name des jeweils aktiven Tabs gespeichert. Er wird benötigt, um ihm den Klassen-Namen für aktive Tabs zuzuweisen. Zu beachten ist noch, dass ein bereits aktives Tab beim Überfahren mit dem Maus-Cursor nicht reagieren soll. Zudem soll es nicht möglich sein, ein aktives Tab erneut anzuklicken. Deshalb müssen die Event-Handler in den aktiven Tabs gelöscht werden. Weisen Sie daher an dieser Stelle allen Event-Handlern den Wert null zu.

Kärtchen wechsle dich

Karteireiter-Navigation mit Javascript & CSS

Um die Tabs und Karten zu wechseln, ist folgende Funktion zuständig:

function toggle(div, old) {
if(div != old) {
document.getElementById(old).style.display = "none";
document.getElementById(div).style.display = "block";
}
for(var i = 1; i < tabs.count; i++) {
var span = document.getElementById("TabSpan"+i);
span.className = "passiveTab";
span.onmouseover = new Function("tabs.m_over("+i+")2);
span.onmouseout = new Function("tabs.m_out("+i+")");
span.onclick = new Function("tabs.makeActive("+i+")");
}
}

Mit Hilfe der übergebenen Parameter div und old lässt sich leicht ausmachen, welche Karte angezeigt und welche versteckt werden soll. Sie weisen daher der Eigenschaft display im div-Bereich der zu versteckenden Karte den Wert none zu und der anderen den Wert block. Dadurch wird ihr Inhalt vom Browser als Block-Element dargestellt. Das sind Elemente, die einen Zeilenabstand im Textfluss erzeugen und die unterschiedlichsten weiteren Elemente aufnehmen können.

Das CSS-Attribut display ist zum dynamischen Anzeigen und Verstecken sogar besser geeignet als das einfache Attribut visibility, weil es gestattet, die Art der Darstellung anzugeben. Sie können beispielsweise festlegen, ob das Element ein Block-Element, ein Inline-Element oder eine Aufzählungsliste sein soll.
Da es immer mehrere Wege gibt, um zum selben Ziel zu gelangen, gehen Sie bei den Tabs ein wenig anders vor: Diese werden innerhalb einer for-Schleife durchgezählt, um sie zurückzusetzen. Weil die Index-Nummern der Tabs bei 1 beginnen, müssen Sie hierbei den Zähler i mit 1 initialisieren.

Erst der anschließende Aufruf der drei Event-Handler setzt die Tabs der Reihe nach in den beabsichtigten Zustand. Da die Namen der Event-Handler für sich selbst sprechen, braucht dazu nichts weiter gesagt werden. Beachten Sie jedoch, dass alle Event-Handler über einen Funktionskonstruktor aufgerufen werden müssen, weil ansonsten keine Parameter übergeben werden können. Bei dieser Art von Funktionen müssen Sie den Code immer als String zusammensetzen.

Mausbewegungen

Karteireiter-Navigation mit Javascript & CSS

Die beiden abschließenden Funktionen werden aufgerufen, wenn der Mauszeiger über ein nicht aktives Tab und wieder heraus bewegt wird:

function m_over(num) {
var span = document.getElementById("TabSpan" + num);
span.className = "hoverTab";
}
function m_out(num) {
var span = document.getElementById("TabSpan" + num);
span.className = "passiveTab";
}

Die Index-Nummer der Tabs, die der Anwender mit der Maus berührt, wird in beiden Fällen wiederum mit der lokalen Variablen num übergeben. Die zwei Funktionen unterscheiden sich nur dadurch, dass das jeweilige Tab einen anderen Klassen-Namen erhält.

Findet eines der vorgesehenen Mausereignisse statt, wird dem span-Bereich die dazu passende CSS-Klasse zugewiesen, wodurch sich das Aussehen der Tabs entsprechend der festgelegten Definitionen verändert. Den Formatierungsmöglichkeiten sind hierbei also kaum Grenzen gesetzt.