Viel braucht es wirklich nicht, nur ein wenig HTML und ein wenig CSS, wobei der HTML-Code für das Menü absoluter Standard-Code ist, der auch für ein Top-Menü Verwendung finden würde.

		Home
		Weblog
		Infos
		Pornos
		Impressum
	

Der “menucontainer” ist übrigens überflüssig, den habe ich nur verwendet, weil ich das Menü nicht zentrieren, sondern etwas versetzt nach links anzeigen wollte.

Klarer wird es sichlich mit dem folgenden CSS, welches das Menü darstellt:

* {
	margin: 0em;
	padding: 0em;
	border: none;
}
#menucontainer {
	width: 800px;
	margin: auto auto;
}
#menu {
	width: 200px;
	-webkit-transform: rotate( -90deg );
	-moz-transform: rotate( -90deg );
	-moz-transform-origin: 100px 100px;
	filter: progid:DXImageTransform.Microsoft.BasicImage( rotation=3 );
}
#menu a:link, #menu a:visited {
	background-color: #F00;
	color: #FFF;

	margin-bottom: 25px;
	width: 200px;
	height: 50px;
	padding: 5px;
	line-height:90%;
	display: block;

	font-family: sans-serif;
	font-weight: bold;
	font-size: 24px;
	text-decoration: none;
}
#menu a:hover {
	background-color: #DDD;
	color: #F00;
}

Wenn ich ein CSS-Stylesheet beginne, schalte ich zuerst für alle Elemente die margins, paddings und die borders aus, um sie später für die Elemente wieder zu setzen, wo ich diese Eigenschaften wirklich brauche. Das macht die ganze Sache immer klarer und behebt viele Probleme mit dem IE auf einen Schlag.

Dem div “menucontainer” wird dann eine Breite von 800 Pixeln zugewiesen und ein automatischer margin, wodurch das gesamte div element im Browser zentriert wird.

Dann kommt schon die Anweidung, die das Menü gegen den Uhrzeigersinn dreht. Zuerst wird eine Breite vergeben, die der Breite der einzelnen Menüpunkte entspricht. Das muss so sein, sonst funktioniert es im IE 7 nicht.
Danach folgen Anweisungen für die verschiedenen Browser um die Rotation durchzuführen. Wichtig beim FireFox: “-moz-transform-origin” muss korrekt gesetzt werden, sonst sitzen die Menüpunkte später zu tief. Jeweils die Hälfte der Menüpunkt-Breite für horizontalen und vertikalen Wert haben sich bei mir bewährt.

Die einzelnen Menüpunkt können beliebig formatiert werden, auch margins und paddings sind kein Problem. Wichtig ist allerdings, dass “display” auf “block” gesetzt wird und feste Breiten und Höhen vergeben werden, sonst wird es Probleme bei der Darstellung geben.

Getestet habe ich die Anweisungen im IE 7 und im FireFox 3.5. Im IE 6 läufts so lala, könnte man sicherlich auch noch hinbekommen, aber ich bin der Meinung, dass der IE 6 nicht mehr unterstützt werden muss. Wer den IE 6 noch nutzt, der fährt auch Autos ohne Bremsen.

Hier gibt’s die komplette Datei und hier eine kleine Vorschau, wie es aussehen könnte:

Hier ein wenig HTML:

Datenblatt 1
Datenblatt 2
Datenblatt 3
Datenblatt 4
Datenblatt 5

Jede Menge Daten (1)
Jede Menge Daten (2)
Jede Menge Daten (3)
Jede Menge Daten (4)
Jede Menge Daten (5)

Oben findet sich unser Tab-Menü, dass die insgesamt 5 Daten-Layer per Klick einblenden soll. Die DIVs mit den Daten sind per Style-Definition erstmal nicht sichtbar, bis auf den ersten DIV, da davon auszugehen ist, dass ohne einen Klick auf etwas das erste Datenblatt angezeigt werden soll. Damit das Tab-Menü auch ansprechend aussieht, brauchen wir noch folgende CSS Definitionen:

#tabmenu {
	overflow:hidden;
	border-bottom:1px solid #FFF;
}
#tabmenu .tab {
	float:left;
	border:1px solid #660000;
	border-bottom:none;
	margin-left:3px;
	padding:3px;
	background-color:#F4F4F4;
	font-weight:bold;
}
#tabmenu .active {
	background-color:#FFFFFF;
	color:#000099;
}
#tabmenu .tab:hover {
	background-color:#FFFFFF;
	cursor:pointer;
}

Damit wir nun nicht für jeden einzelnen Tab eine “onclick” Aktion schreiben müssen, habe ich mir überlegt ein auf Prototype aufsetzendes JavaScript zu schreiben, dass anhand der verwendeten IDs der Tabs und der Daten-DIVs (die nur zueinander passen müssen) eine generell einsetzbare Lösung schafft. Das Skript kann im Head-Bereich der Seite eingebunden werden und durchsucht beim Aufruf, ob Tabs vorhanden sind und behandelt diese entsprechend.

/**
 * Render a tabbed menu
 */
var tabids = [];
var containerids = [];
function create_tabs()
{
	$$('.tab').all( function( el ) {
			tabids.push( el.id );
			containerids.push( el.id.replace( 'tab_', '' ) );
			el.observe( 'click', handle_tab_click );
			return true;
	} );
}
/**
 * Hande a clicked tab
 */
function handle_tab_click( event )
{
	// Get container id
	containerid = this.id.replace( 'tab_', '' );
	// Set active tab menu point
	tabids.all( function( tab ) {
		$(tab).removeClassName( 'active' );
		return true;
	} );
	this.addClassName( 'active' );
	// Set active tab content container
	containerids.all( function( container ) {
		$(container).hide();
		return true;
	} );
	$(containerid).show();
}
/**
 * Init tabbing
 */
Event.observe( window, 'load', create_tabs );

Die erste Funktion “create_tabs” sucht alle DIV-Layer innerhalb der Seite, die mit der CSS-Klasse “tab” versehen sind. Die gefundenen Tabs werden danach zur weiteren Verarbeitung in einem Array gespeichert und mit einer String-Ersetzung der zugehörige Daten-Layer ermittelt. Die IDs der Datenlayer werden ebenfalls in einem Array gespeichert. Zu guter letzt wird dem Tab-Menüpunkt noch eine Handler-Funktion zugewiesen.

Die zweite Funktion ist diese Handler-Funktion. Beim Klick wird zuerst ermittelt, welcher Daten-Layer angezeigt werden soll, indem durch eine Zeichenersetzung das “tab_” in der ID des Tab-Menüpunkts entfernt wird. Übrig bleibt dann z.B. “datasheet1″, wenn der erste Menüpunkt ausgewählt wurde. So weiß die Funktion für den späteren Verlauf, welcher DIV angezeigt werden muss.

Nun geht es daran, das Tab-Menü entsprechend zu verändern, denn es soll ja der angeklickte Menüpunkt hervorgehoben werden. Dazu entfernen wir per Prototype-Methode “all”, die auf das bei der Initialisierung erstellte Array angewendet wird, bei allen Tabs die CSS Klasse “active”. Danach wir die Klasse “active” dann beim angeklickten Punkt gesetzt und das Menü ändert sich so entsprechend dem Nutzerverhalten.

Dann durchlaufen wir ebenfalls mit “all” das Array, das die IDs der Datenblätter enthält und verstecken mittels “hide” alle DIVs. Nun wird nur noch das richtige DIV eingeblendet und das Tabbing ist komplett.

Großes Finale im Skript ist dann noch ein Event-Observer, der nach dem Laden der Seite die Funktion “create_tabs” aufruft und so alle auf der Seite gefundenen Tabs initialisiert.

Wichtig für den Einsatz des Skripts ist nur folgendes: Die IDs der Tab-Menüpunkt und der Layer mit den Daten müssen auf einander abgestimmt sein und ein Tab-Menüpunkt muss immer mit “tab_” beginnen. Lege ich also einen Tab mit der ID “tab_datentabelle123″ an, dann muss das DIV mit den Daten die ID “datentabelle123″ haben, sonst funktioniert es nicht. Natürlich müssen die Tab-Menüpunkte auch die richtigen CSS-Klassen haben, aber das versteht sich wohl von selbst.

Und so könnte es aussehen: