halbrunde Listennavigation
Nach obenVorwort
Listennavigationen bieten sich, wie in diesem Artikel erläutert, als Navigation für eine Seite aufgrund ihrer Struktur bestens an. Allerdings kann man mit einer Liste mit Hilfe von CSS viel mehr machen, als nur einzelne Punkte starr untereinander anzuordnen. Mit CSS kann man die einzelnen Elemente ganz individuell anordnen, dass die Liste für den Betrachter als solche nicht mehr zu erkennen ist.
Nach obenEin Beispiel
So soll das halbrunde Menü ersteinmal aussehen.
Nach obenÜberlegung
Einen Ansatz hierfür möchte ich mit dem halbrunden Menü zeigen, das vom nachfolgenden Text umflossen wird. Durch eine individuelle Breite jedes Listenelements und einer Ausrichtung nach rechts, erhalten wir einen Halbkreis. Durch Einsatz von float fliesst der eigentliche Text der Seite um die einzelnen Menüpunkte. Optisch eine nette Spielerei. Der Denkansatz ist, designtechnisch nicht an Kastenelemente gebunden zu sein und dennoch semantisch angebracht eine Liste für eine Navigation zu benutzen. Dies soll allerdings nur ein Anreiz sein, mit den enthaltenen Elementen weiter zu experimentieren.
Nach obenAufbau und Vorgehensweise
Zunächst benötigen wir eine normale Listenstruktur, die nach den Vorgaben strukturiert ist. Diese hat am besten eine ungerade Anzahl an Listenelementen. Der Liste selbst <ul> geben wir die ID "menue" und den einzelnen Listenpunkten <li> jeweils eine ID "linkX", wobei X für die Nummer des Links steht.
<ul id="menue">
<li id="link1"><a href="#">Intro</a></li>
<li id="link2"><a href="#">Myself</a></li>
<li id="link3"><a href="#">Philosophy</a></li>
<li id="link4"><a href="#">Progress</a></li>
<li id="link5"><a href="#">Ready</a></li>
<li id="link6"><a href="#">ToDo</a></li>
<li id="link7"><a href="#">Comments</a></li>
</ul>
Als erstes möchten wir nun definieren, dass die Liste keine Aufzählungszeichen hat, da wir ja die einzelnen Elemente individuell formatieren möchten.
#menue {
list-style: none; /* keine Listenzeichen anzeigen */
}
Dann optimieren wir die Anzeige der einzelnen Listenelemente, so dass sie gut lesbar sind und der nachfolgende Text sie einzeln umfliesst. Den Linktext richten wir rechts aus. Um die Listenpunkte gut lesbar darzustellen, arbeiten wir mit line-height bei der vertikalen Ausrichtung. Damit der eigentliche Text das Menü umfliesst definieren wir für jedes Listenelement float. Da dadurch die Listenelemente nun nebeneinander dargestellt würden, müssen wir ausserdem noch ein clear definieren. Das sollte nun so aussehen:
#menue li {
float: left; /* Textumfluss rechts */
clear: left; /* Zeilenumbruch zu linken Elementen */
text-align: right; /* Textausrichtung rechts */
line-height: 30px; /* feste Zeilenhöhe, gleichzeitig vertikale zentrierte Ausrichtung */
}
Für die halbrunde Optik weisen wir jedem einzelnen Listenelement eine feste individuelle Breite zu. Da wir ein halbrundes Menü möchten, haben das erste und das letzte, sowie das zweite und das vorletzte ... und so weiter ... Listenelement dieselben Breiten. Dies können wir im CSS natürlich zusammenfassen.
#link1, #link7 {
width: 100px; /* feste Breite */
}
#link2, #link6 {
width: 120px; /* feste Breite */
}
#link3, #link5 {
width: 140px; /* feste Breite */
}
#link4 {
width: 160px; /* feste Breite */
}
Das eigentliche Menü ist damit bereits formatiert. Der eigentliche Text umfliesst das Menü ebenso halbrund, wie das Menü selbst ist. Für ein einigermassen schönes Aussehen sollten wir aber noch einige Kleinigkeiten formatieren.
Nach obenZusätzliches
Damit auch der Vorführeffekt ordentlich und ansehnlich ist, packen wir Text wie Menü in einen eigenen grossen Container "gesamt", der eine feste Breite hat und horizontal mittig ausgerichtet ist. Ausserdem habe ich dem Menü eine Überschrift gegeben, die als eigenständiges Listenelement formatiert wird. Abschliessend noch ein paar margin und padding Angaben und wir haben ein schlichtes aber schönes etwas ungewöhnliches Layout.
<div id="gesamt">
<ul id="menue">
<li id="title"><h2>Menüüberschrift</h2></li>
<li id="link1"><a href="#">Link 1</a></li>
<li id="link2"><a href="#">Link 2</a></li>
<li id="link3"><a href="#">Link 3</a></li>
<li id="link4"><a href="#">Link 4</a></li>
<li id="link5"><a href="#">Link 5</a></li>
<li id="link6"><a href="#">Link 6</li>
<li id="link7"><a href="#">Link 7</a></li>
</ul>
<div id="content">
Der eigentliche Text steht hier.
</div>
</div>
Der dazugehörige CSS-Code, damit die Beispielseite so aussieht wie im oben gezeigten Beispiel. Die Kommentierung der entsprechenden Elemente sollte die Anwendung erklären.
* {
padding: 0;
margin: 0;
}
html, body {
text-align: center; /* horizontale Ausrichtung für Container "gesamt" */
}
#gesamt {
width: 800px; /* feste Breite */
margin: 25px auto; /* fester Aussenrand oben & unten, automatischer Rand rechts & links */
text-align: left; /* Textausrichtung links, Aufhebung für Textausrichtung in body */
border: 1px solid black;
background: #ddd;
}
#menue {
list-style: none; /* keine Listenzeichen anzeigen */
}
#menue li {
float: left; /* Textumfluss rechts */
clear: left; /* Zeilenumbruch zu linken Elementen */
text-align: right; /* Textausrichtung rechts */
line-height: 30px; /* feste Zeilenhöhe, gleichzeitig vertikale zentrierte Ausrichtung */
padding-right: 15px; /* Innenabstand für Linktext */
margin-right: 35px; /* Aussenrand zum text */
}
li#title {
width: 160px; /* feste Breite */
line-height: 50px; /* feste Zeilenhöhe */
text-align: center; /* zentrierte Textausrichtung */
}
#link1, #link7 {
width: 100px; /* feste Breite */
}
#link2, #link6 {
width: 120px; /* feste Breite */
}
#link3, #link5 {
width: 140px; /* feste Breite */
}
#link4 {
width: 160px; /* feste Breite */
}
#link7 {
margin-bottom: 25px; /* Aussenrand unten zum Text */
}
#content {
min-height: 400px !important; /* Mindesthöhe für Mozilla */
height: auto; /* automatische Höhe für moderne Browser */
height: 400px; /* Höhe für den IE */
text-align: justify; /* Blockausrichtung für Text */
margin: 50px 25px 50px 100px; /* Aussenrand für optimale Lesbarkeit */
}
Nach obenSchwachstellen
Leider hat diese nette Variante einer Listennavigation einen Schwachpunkt. Möchte man gerne ein Bild mittels float im ersten Teil des Textes, der auf Höhe der eigentlichen Navigation liegt, haben, wird dieser durch das float der Listenelemente, im Fliesstext erst angezeigt, wenn dieser über die Navigation hinaus geht. Nur der IE, der es eigentlich falsch interpretiert, zeigt es wie gewünscht an :-) Im Beispiel habe ich extra ein Bild eingebaut, damit man dies sehen kann. Das Bild hat die ID "bild" und wurde mit folgendem CSS-Code formatiert:
.bild {
width: 100px;
float: right;
margin: 25px;
}
Hier muss man abwägen, was einem wichtiger ist. Kleine Bilder, die nicht viel höher wie die line-height des Textes sind, können per display: inline; in den Textfluss integriert werden und bilden nur kleine Absätze. Dann kann man auf float für das Bild verzichten. Das Einfügen von Icons ist somit z.B. kein Problem.
Nach obenFazit
Dieses halbrunde Menü ist eine schöne Ausgangsposition für weitere Experimente mit wild angeordneten Menüs, wie ich finde. Ich hoffe es hat gezeigt, dass eine Liste nicht immer schnurgerade sein muss. Durch weitere Spielereien mit width oder height oder verschiedenen Hintergründen und Farben lassen sich tolle Navigationen zaubern, die als ordinäre Liste für den Betrachter nicht mehr zu erkennen sind. Durch position lassen sich in diesem Zusammenhang auch die einzelnen Linktexte nochmals ganz individuell anordnen.
Gekommen bin ich auf diese Umstrukturierung, da ich auf meiner Seite für die Navigation eine ordinäre Liste verwenden wollte, mir allerdings ein wild angeordnetes Menü mit verschiedenen Bildhintergründen vorstellte. Ausserdem sollte der Text bei mir Treppenförmig an den einzelnen Listenelementen entlangfliessen. Wie das aussieht, kannst Du hier anschauen. Es geht noch wilder ... die linke Navigatin (versteckter Text auf Bildern) ist eine ordinäre Liste, die über CSS entsprechend definiert wurde.
pberndt
Schicke Sache, das sieht wirklich außergewöhnlich aus :D Zumindest sieht mans selten bis nie... dabei trotzdem wunderbar simpel. Danke für den Artikel :)
paul
Ich finde die Idee interessant mit dem Menü Einfluß auf das Textlayout zu nehmen...mit ein bißchen Knoff-Hoff sind noch einige andere Figuren möglich, denke ich. Mal probieren... :D
fphilipe
Sehr gelungener Artikel.
Nur eine kleinigkeit:
Su hast die Überschrift als ein Listenelement definiert. Dies bedeutet, dass diese Überschrift nicht eine übergeordnete Überschrift ist, sondern einfach eine Überschrift, nach der kein Inhalt steht. Deshalb sollte sie ausserhalb der Liste stehen.