bedeutungsvolle Menues
Heute mit und ueber Listenmenues.
- Das brauchen wir dazu:
-
- euren Lieblingsbrowser (*).
- einen Texteditor (*). ( fuer unsere Zwecke tut es Notepad )
- ein bisschen Motivation & Mut um euch auszuprobieren.
vertikale Menues
- Browserkompatibilitaet:
- Schwierigkeitsgrad:
Beginnen wir ersteinmal mit einer Definition und kleineren Ueberlegungen zu Menues. Ich werde erst anfangen vertikale Menues vorzustellen und auf kleinere Eigenarten eingehen, danach die beliebten horizontalen Menues und zu guter Letzt, werde ich auf grafische Menues eingehen. Ich werde immer erst den Code posten, im Anschluss die Ausgabe und danach die dazugehoerige Erklaerung. Ich versuch es moeglichst einfach und simpel zu halten, sollte es mir nicht gelingen, dann lesst bitte noch einmal, denn irgendwann werdet ihr es schon verstehen:
Allgemeine Ueberlegungen:
Man sieht vielerorts einfache Anchor-Tags, die frei im Quellcode rumflattern und an sich auch sonst sehr unvorteilhaft ausgezeichnet sind. Dabei sind Menues nichts weiter als Aufzaehlungen -bzw. eine Auflistung von Ueberschriften unserer Unterseiten. Wieso sollte man sie dann nicht auch als solche behandeln? Ich denke mir meist, weil viele einfach Angst davor haben, sich mit dem bisschen CSS auseinander zu setzten, der dann dafuer notwendig ist. Hier will ich euch ein bisschen die Angst nehmen und euch zumindest die Grundlagen erklaeren, warum Listen die richtige Wahl sein sollten.
Quellcode:
HTML-Quellcode:
<ul>
<li><a href="#" title="">Link 1</a></li>
<li><a href="#" title="">Link 2</a></li>
<li><a href="#" title="">Link 3</a></li>
</ul>
So sieht das dann aus:
Erklaerung:
Wir fangen an, indem wir den ganzen Inhalt in ein ul umspannen und dieser Liste auch gleich einen Namen #nav, ueber die id, geben. Das sagt unserem Browser, dass es sich hier um eine Ungeordnete Liste handelt. Mit li fuehren wir die Listenpunkte an. Innerhalb dieser Listenpunkte, kommt auch alles andere hinein, was mit unseren Links zu tun hat, demzufolge schreiben wir innerhalb von <li></li> unsere anchor-tags.
Solange ich keinen anderen HTML-Quellcode notiere, dem sog. Markup, beziehen sich nachfolgende CSS-Notierungen immer auf das obige Beispiel.
Jetzt sieht das ganze wenig anschaulich aus und ich kann mir auch schon denken, dass den Ein oder Anderen diese runden Listenaufzaehlungszeichen stoeren. Vllt. koennte man auch gleich die Farbe der anchor-tags gleich mal aendern. Gut also machen wir uns frisch ans Werk und schreiben uns unsere dafuer benoetigten Regeln mittels CSS.
Quellcode:
CSS-Code
<style type="text/css" media="screen">
ul#nav {
list-style-item: none;
width: 12em;
}
ul#nav a {
color: #090;
text-decoration: none;
}
</style>
Sieht nun so aus:
Erklaerung:
Ueber unseren ersten Deklarationsblock (so bezeichnet man den Teil, der in den geschweiften Klammern {} ist) definieren wir fuer unsere Liste, die wir #nav genannt haben, dass wir keine Listenaufzaehlungszeichen list-style-item: none; haben wollen und vergeben auch gleich eine Breite width: 12em. Eine Hoehe ist nicht notwenig, denn diese wird 'automatisch' generiert.
Im zweiten Deklarationsblock kuemmern wir uns um die anchor-tags, innerhalb der Liste ul#nav a, indem wir eine gruene Textfarbe color: #09e; notieren und die Unterstreichung mittels text-decoration: none; aufheben. Weiter tun wir hier eigentlich nichts mehr. Trotzdem haben wir eine saubere Liste, die als Menue fungiert.
horizontale Menues
- Browserkompatibilitaet:
- Schwierigkeitsgrad:
Jetzt wollen wir aber lieber ein horizontales Menue anstatt des vertikalen. Was mache wir denn nur?! Na, kein Problem, schliesslich sind wir auf dem Weg Profis in Sachen CSS zu werden. Es gibt zwei Wege dies zu erreichen. Die erste Variante verwende ich selber eigentlich relativ selten, da sie mir als sehr unflexiebel und doof erscheint - das soll erstmal als Erklaerung reichen. Die zweite, hier vorgestellte Moeglichkeit, sieht man mich schon wesentlich haeufiger verwenden - ich steh einfach drauf.
Schauen wir uns erstmal den Quellcode dazu an.
Quellcode:
CSS-Code
<style type="text/css" media="screen">
ul#nav li {
display: inline;
}
</style>
CSS-Code
<style type="text/css" media="screen">
ul#nav li {
float: left;
width: 4em;;
}
ul#nav a {
display: block;
text-align: center;
padding: .2em;
}
</style>
Das sieht dann so aus:
Erklaerung:
Sprechen wir erst uebers obere Beispiel danach wiedmen wir uns dem Untreren -wenns recht ist.
Eine einzige Codezeile - das die so viel bewirken kann...
Ja so ist das eben mit den Block - bzw.. den Inlineelementen in HTML. Blockelemente werden in der Regel untereiander angezeigt - erzeugen demzufolge also automatisch einen Zeilenumbruch. Bei Inlineelementen hat man dies nicht, die werden einfach in einer Zeile angezeigt, egal wie viele Inlineelemente man nebeneinander Notiert.
Genau diese Eigenschaft machen wir uns mit dieser, einen Codezeile zu nutze, indem wir unsere Listenelemente li vom Block zum Inlineelementen ueber display: inline; machen. Natuerlich kann man dieses Verfahren grundsaetzlich auch in die andere Richtung anwenden aber hier in diesem Beispiel waere es bloedsinnig. Diese Methode ist aber u.U. nicht ganz so flexiebel wie die Zweite.
Im zweiten Beispiel arbeiten wir ueber float. Das ist auch immer so ein Thema womit viele ein Problem zu haben scheine, weil sie einerseits nicht wissen wie sie richtig floatet und anderer seits vergessen die Meisten, dass man ein float auch wieder aufgeben muss ( das nennt man clearen. ) aber das ist alles gar nicht so schwer.
Im ersten Deklarationsblock floaten wir die Listenpunkte nach rechts weg float: left;, und weisen dem auch gleich mal eine Breite width: 4em; zu. Unser zweiter Deklarationsblock behandelt die Links. Wir verwandeln die anchor tags erstmal in Blockelemente mit hilfe von display: block;. Dies tun wir weil es zu Problemen in gewissen anderen Browsern kommen kann. Richten sie danach mittig aus text-align: center; und geben ihnen noch einen kleinen Innenabstand von 0.2em. Ich hab das jetzt mal in der Kurzschreibweise notiert, denn bei allen em-Werten die Dezimalstellen haben und mit Null beginnen, kann man einfach die Null weg lassen und gleich mit dem Punkt beginnen - Demzufolge wird aus 0.2em ein .2em. Schon haben wir das Gleiche erreicht wie mit dem display: inline.
War doch eigentlich gar nicht so schwer .. oder?!
Gut, gehen wir weiter im Text.
grafische Menues
- Browserkompatibilitaet:
- Schwierigkeitsgrad:
Diese Sorte von Menues ist eigentlich nicht sonderlich Anspruchsvoll, wenn man es kann aber bis man erstmal durchgestiegen ist und sich die Strunkstruktur behalten hat, koennen unter Umstaenden schon Tage, wenn nicht sogar Wochen vergehen. Ihr wisst ja: Uebung macht den kleinen Designer von Morgen. Ich werde in diesem Beispiel eines meiner eigenen Menues zeigen und anhand von Bildern und Quellcode versuchen zu erklaeren wie es prinzipiell Funktioniert. Fuer eine vertikale Darstellung, muesst ihr es selber anpassen, das ist aber auch bei weitem nicht so schwer wie die horizontale Methode.
Fangen wir erst einmal einfach an, indem wir unser simples Markup schreiben.
Quellcode:
HTML-Code
<ul id="nav">
<li id="hom"><a href="#" title="home">Home<span></span></a></li>
<li id="abo"><a href="#" title="about">About<span></span></a></li>
<li id="gal"><a href="#" title="galerie">Galerie<span></span></a></li>
<li id="pro"><a href="#" title="projekte">Projekte<span></span></a></li>
<li id="ads"><a href="#" title="werbung">Werbung<span></span></a></li>
</ul>
Das sieht dann so aus:
Erklaerung:
Wirkt nicht sonderlich spektakulaer oder?!
Das ist auch kein Wunder, denn Markup alleine sollte im sog. Autorenmodus ( Im Uebrigen befindet ihr euch gerade im Benutzermodus, wenn ihr hier die Farben und Bilder sehen koennt, das ist der Standartmodus. ) immer so aussehen und nur in Ausnahmefaellen, sollten Bilder oder Farben zu erkennen sein. Das jetzt aber nur als kleine Randinformation.
Ich denke hier gibt es nicht viel zu erzaehlen. Eine einfache, ungeordnete Liste, die selber einen Namen erhaelt und zusaetzlich auch alle Listenaufzaehlungszeichen einen Namen zugewiesen bekommen. Das title-Attribut ist noetig, lasst euch bitte hier auch nicht von anderen Klugscheissern was anderes einreden und verwendet es in Links immer mit. In den Links selber, platzieren wir noch ein eher bedeutungsloses <span></span>. Chris sagt hier immer: "That the point where the magic happens!". Aber kuemmern wir uns jetzt doch erstmal um unsere 'Grundformatierung'
Quellcode:
CSS-Code
<style type="text/css" media="screen">
#nav li {
float: left;
list-style: none;
}
#nav #hom { width: 96px; }
#nav #abo { width: 83px; }
#nav #gal { width: 101px; }
#nav #pro { width: 116px; }
#nav #ads { width: 124px; }
#nav a {
display: block;
height: 52px;
width: 100%;
position: relative;
overflow: hidden;
text-indent: -999px;
}
</style>
Damit wuerde unser Menue folgendermassen aussehen:
Erklaerung:
Bitte nicht in Panik verfallen. Mit eurem Browser ist alles okay und ihr seht nichts weil... ach lest doch einfach weiter:
In den Zeilen von 02-05 floaten wir unsere Listenpunkte, wie schon oben beschrieben und heben hier mittels der Kurznotation list-style: none; die Listenaufzaehlungszeichen verschwinden lassen. Lang geschrieben wuerde es list-style-type heissen aber so spart man sich nicht nur Code sondern kann auch list-style-image & list-style-position notieren, was dann kurz so aussehen koennte: list-style: url('bild_zum_aufzaehlungszeichen.gif') none inside;
Die Zeilen von 06-10 kuemmern sich eigentlich nur um die individuellen Breitenangaben der einzelnen Aufzaehlungspunkte.
Von 11-18 geben wir den anchor-tags ein bisschen was mit. Erstmal wieder das display:block, was wichtig ist damit die korrekte Darstellung erfolgen kann. Die Breite width:100% wird aus dem Elternelement bezogen (In unserem Fall sind das die Listenpunkte, die ja verschieden Breitenangaben bekommen haben). Die Hoehe height: 52px brauchen wir hier aber also notieren wir sie auch - woraus sich diese ergibt?! Dazu kommen wir gleich .. Geduld. Die relative Positionierung position: relative braucht man in der Regel nicht, hier jedoch wird sie sehr wichtig also bitte nicht vergessen oder weg lassen. overflow: hidden sorgt dafuer, dass alles was Breiter ist als unsere Links -bzw. die Listenpunkte, nicht mehr angezeigt wird. Was aber immer noch nicht erklaert, warum ihr hier nichts seht, denn dafuer ist die die letzte Notation verantwortlich. Mit text-indent: -999px; verschieben wir den Text aus dem sog. Viewport ins Nirvana. Wir werden fuer grafische Menues sowieso keinen Text brauchen.
So im Folgenden werden wir diese Grafik verwenden, die ich mittels Photoshop erstellt habe und aus der sich auch die Breiten - bzw.. Hoehenangaben ergeben. Hier muss man einfach mittels Linealwerkzeugen z.B. nachmessen. Man muss hier schon ziemlich akurat und Pixelgenau zur Sache gehen, denn sonst verhaut man das gesammte Menue. Ich hab mich hier um einige, wenige Pixel vertan. Das wird einige der Menuepunkte etwas 'huepfen' lassen beim mit der Maus drueber gehen, was uns hier aber nicht stoeren soll.
Jetzt werdet ihr sagen, die Grafik ist aber riessig und wieso ist der Text hier zwei mal vorhanden..
Geduld bitte, schauen wir uns doch ersteinmal den Part an, der dafuer verantwortlich ist
Quellcode:
CSS-Code
<style type="text/css" media="screen">
#nav span {
position: absolute;
width: 100%;
height: 52px;
top: 0;
left: 0;
background: url('http://i37.tinypic.com/24cfup0.jpg') no-repeat;
}
#nav #hom a span {
background-position: 0 0;
background-repeat: no-repeat;
}
</style>
Jetzt muesstet ihr wieder was sehen:
Erklaerung:
Eh was'n hier los?!
Ne, nichts is los sondern genau das was wir hier definiert haben. Im ersten Deklarationsblock, kuemmern wir uns allgemein um alle span-Elemente #nav span innerhalb des Menues.
Zeile 03 gibt dem Ganzen eine absolute Position postion: absolute, deshalb war auch die relative Notation in den anchor-tags notwendig. Ansonsten wuerde das span-Element sich am naechst, hoeheren Element orientieren, das eine relative Orientierung hat, weil wir doch in den Zeilen 06 & 07 ein top: 0; left: 0; vergeben. Bei der Breite wollen wir, dass sich das span-Element an sein Elternelement ( hier ist es der anchor-tag ) orientiert, was sich wiederrum an der Notatiion der Listenaufzaehlungszeichen anlehnt und so Breiten von 96px, 83px, 101px, 116px & 124px entstehen. Die Hoehe muessen wir hier vergeben sonst sehen wir nichts sehen.
In der 08 Zeile fuegen wir unsere Gesammtgrafik hinzu und durch die Breiten -bzw.. die Hoehenangaben entsteht schon fast das was wir haben wollen. Nur fast, weil die Ausrichtung der einzelen Punkte noch nicht ganz stimmt, wozu wir jetzt in unserem letzten Schritt kommen.
Danach ist es auch schon vorbei - haltet noch ein kleines Bisschen durch.
Quellcode:
CSS-Code
<style type="text/css" media="screen">
#nav #hom a:hover span,
#nav #hom a:active span,
#nav #hom a:focus span { background-position: 0 -52px; }
#nav #abo a span { background-position: -96px 0; }
#nav #abo a:hover span,
#nav #abo a:active span,
#nav #abo a:focus span { background-position: -96px -52px; }
#nav #gal a span { background-position: -179px 0; }
#nav #gal a:hover span,
#nav #gal a:active span,
#nav #gal a:focus span { background-position: -179px -53px; }
#nav #pro a span { background-position: -280px 0; }
#nav #pro a:hover span,
#nav #pro a:active span,
#nav #pro a:focus span { background-position: -280px -53px; }
#nav #ads a span { background-position: -396px 0; }
#nav #ads a:hover span,
#nav #ads a:active span,
#nav #ads a:focus span { background-position: -396px -53px; }
</style>
Finales Ergebnis:
Erklaerung:
Was hier jetzt passiert ist, dass wir fuer die jeweilligen Bereiche einfach nur unseren Hintergrund zurecht 'ziehen'. Stellt euch das einfach so vor wie .. Ach was solls, ich zeig es euch anhand einer Grafik - ich glaub so ist es am Verstaendlichsten, denn mir gehen langsamm die Worte aus und wenn ihr meint, dass ihr hier viel zu lesen hattet, dann stellt euch mal vor wie viel ich erst dafuer schreiben musste.
So wuerde das ganze aussehen, wenn wir es nicht floaten wuerden und wenn wir ausserhalb der rot, markierten Bereiche schauen koennten. Diese roten Fenster, muesst ihr euch als fixe, nicht verrueckbare Sichtfenster vorstellen. Hier wird nur die Hintergrundgrafik nach rechts verschoben background-position: -96px;. Beim mit der Maus drueberfahren :hover passiert genau das gleiche nur dass es eben zusaetzlich auch noch nach oben geschoben wird background-position: -96px -56px. Viel mehr passiert hier eigentlich nicht.
Ihr werdet euch sicherlich fragen, warum man das so umstaendlich machen muss?! Geht das auch nicht einfacher, wenn man es so macht, wie man es immer macht..?! Ja mag so scheinen aber das hier ist auch nicht wirklich viel mehr Aufwand, vorallendingen wenn ihr eine Homepage gestaltet, die sich ausserhalb von Knuddels bewegt, habt ihr hier den Vorteil, dass ihr das gesammte CSS auslagern koennt und somit eine saubere Trennung von Markup und Gestaltung habt. Eure Dateien werden uebersichtlicher und wenn ihr das alles auch noch lernt sauber auszukommenteiren, dann werdet ihr es selbst in 5 Jahren noch nachvollziehen koennen weil es als sehr zukunftssicher gillt.
Fassen wir noch mal alles zusammen:
Gesammtquellcode:
CSS-Code
<style type="text/css" media="screen">
#nav li {
float: left;
list-style: none;
}
#nav #hom { width: 96px; }
#nav #abo { width: 83px; }
#nav #gal { width: 101px; }
#nav #pro { width: 116px; }
#nav #ads { width: 124px; }
#nav a {
display: block;
height: 52px;
width: 100%;
position: relative;
overflow: hidden;
text-indent: -999px;
}
#nav span {
position: absolute;
width: 100%;
height: 52px;
top: 0;
left: 0;
background: url('http://i37.tinypic.com/24cfup0.jpg') no-repeat;
}
#nav #hom a span {
background-position: 0 0;
background-repeat: no-repeat;
}
#nav #hom a:hover span,
#nav #hom a:active span,
#nav #hom a:focus span { background-position: 0 -52px; }
#nav #abo a span { background-position: -96px 0; }
#nav #abo a:hover span,
#nav #abo a:active span,
#nav #abo a:focus span { background-position: -96px -52px; }
#nav #gal a span { background-position: -179px 0; }
#nav #gal a:hover span,
#nav #gal a:active span,
#nav #gal a:focus span { background-position: -179px -53px; }
#nav #pro a span { background-position: -280px 0; }
#nav #pro a:hover span,
#nav #pro a:active span,
#nav #pro a:focus span { background-position: -280px -53px; }
#nav #ads a span { background-position: -396px 0; }
#nav #ads a:hover span,
#nav #ads a:active span,
#nav #ads a:focus span { background-position: -396px -53px; }
</style>
In der Legende habe ich euch eine Testdatei zusammengestellt, die nicht nur das hier Besprochene beinhaltet sondern auch noch ein vertikales Beispiel traegt. Diese Datei soll zum Rumspielen und Ausprobieren sein aber bei den zur Verfuegung gestellten Grafiken moechte ich euch bitten, dass ihr diese nur lokal verwendet also nicht irgendwo hochladen und fuer eure eigenen Grafiken ausgeben. Ich waer euch dankbar, wenn ihr diese kleine Bitte beherzigen wuerdet.
Natuerlich kann man diese Menues auch hier in Knuddels verwenden. Ihr muesst euch lediglich daran erinnern, dass in Knuddels jeder Zeilenumbruch in ein <br /> umgewandelt wird. Also alles hintereinander weg schreiben ohne Umbrueche. Wie ihr aus diesen Menues auf andere Bereiche eurer Seite referenziert, behandelt wir ein anderes mal.
Ich bin hier bewusst auf Fehler, die hierbei auftreten koennen nicht eingegangen, falls sich jemand fragen sollte ob das auch wirklich alles so glatt funktioniert wie hier beschrieben habe. Die meisten Fehler betreffen sowieso nur den IE und koennen meist durch Layout(*) umgangen werden. Keine Sorge, einfach ein bisschen rumexperimentieren und Fehler machen, denn nur aus denen lernt man so, dass man es auch behaelt. So; Schicht im Schacht - Aus die Maus. Ich danke fuer die Aufmerksammkeit.
Bis zum naechsten mal ~leo
Legende
-
- Browserkompatibilitaet:
- alle Browser werden Unterstuetzt:
- ohne Explorer-Unterstuetzung:
- ohne FireFox-Unterstuetzung:
- ohne Opera-Unterstuetzung:
- ohne Safari-Unterstuetzung:
-
- Referenzen:
- Zeichenprogramme:The Gimp,
Adobe,
IncScape,
Paint.NET
- Editoren:Notepad2
PSPad,
jEdit,
textMate,
e
- Ref-Seiten:SmashingMagazine,
CSS4You,
LANtastic
- TutSeiten:W3C,
A List Apart,
The Styleworks,
hasLayout
- Downloads:Arbeitsdateien
-
- Anmerkungen:
- Sollte etwas mal nicht so funktionieren wie hier beschrieben, dann bitte eine /m an mich. Mit einer genauen Beschreibung dessen, was nicht funktioniert und unter welchen Bedingen ( Browser, Betriebssystem, Testcase usw. ) Ich bin hier jetzt auch bewusst nicht auf einige Probleme eingegangen, weil diese meist durch sog. Layout geben umgangen werden kann. Fragen, Probleme oder Anregungen, was man hier besser machen kann bzw. muss, dann meldet euch.
-
- Schwierigkeitsgrade:
- leicht:
- mittel:
- schwer:
vorheriges Thema
Index
