Im heutigen Tutorial geht es darum, wie man so eine zwei- oder auch mehrspaltige Navigation codet, wie ihr sie hier auf dem Bild (übrigens ein Screenshot meiner PersonalSite eden-existiert.de) seht. Live und in Farbe gibt’s auch eine Demo des hier verwendeten Beispielcodes.

Entgegen einer weitverbreiteten Technik sollte man für zweispaltige Menüs oder Layouts jedoch keine Tabelle einsetzen, sondern kann das auch ganz locker mit Divs und Listen realisieren. Warum Tabellen für Layoutangelegenheiten doof und böse sind, erspare ich mir an dieser Stelle mal zu erklären. ;)

Was wir brauchen, ist ein Div-Container mit zwei unsortierten Listen (ul) darin, wobei jeder Menüpunkt als ein Listenpunkt (li) angelegt wird.
Dadurch, dass wir den beiden Listen eine feste Breite sowie der linken ein float: left zuweisen, entsteht ein zweispaltiges Menü.

im HTML

Unser HTML-Code:
<div class="menu">
<ul>
<li><a href="#" title="eins">eins</a></li>
<li><a href="#" title="zwei">zwei</a></li>
</ul>
<ul>
<li><a href="#" title="drei">drei</a></li>
<li><a href="#" title="vier">vier</a></li>
</ul>
</div>

im CSS

… und im Stylesheet:
.menu {
width: 400px;
}

.linke-spalte {
width: 200px;
float: left;
}

.rechte-spalte {
width: 200px;
margin-left: 200px;
}

.menu li a {
display: block;
}

eine Extrawurst für den Internet Explorer

Damit das Ganze auch im lieben Internet Explorer vor der Version 8 funktioniert, müssen im Head-Bereich der Seite noch Conditional Comments eingefügt werden, deren Anweisungen nur von den jeweligen IE-Versionen umgesetzt werden. Eine genauere Erläuterung, was Conditional Comments sind und weshalb wir sie hier benötigen, habe ich im Artikel “der Box-Modell-Fehler” beschrieben.
<!--[if lte IE 8]>
<style type="text/css">
.menu { width: 405px; }
</style>
<![endif]-->

Styling

Nun noch etwas Kosmetik:
Einen Rahmen oder sonstiges Styling könnt ihr der Menubox verpassen, indem ihr das Div ansprecht, beispielsweise so:
.menu { width: 400px; border: 2px solid #ccc; margin: 50px; }