Menüs und Benutzerführung
Vorbemerkung
Menüs dienen der Benutzerführung. Eine klare und konsistente Menüstruktur hilft bei der Benutzung einer Webseite.
Vereinfacht lässt sich sagen: Die Menüführung sollte aussagekräftig sein und der Benutzer sollte immer wissen, wo er sich auf der Webseite befindet.
An dieser Stelle geht es um die Herstellung von Menüs per CSS und HTML. Auch mit diesen einfachen Mitteln kann man dynamische Efekte erzielen, wobei der Code übersichtlich und die Seiten klein bleiben. Ob wir Zeit für einen Ausflug in die Welt von JavaScript usw. haben werden, müssen wir abwarten.
Positionierung von Menüs
Menüs sollten sich immer an derselben Stelle einer Seite befinden und ein einheitliches Aussehen haben.
Die Position eines Menüs lässt sich über ein individuelles <div>-Element steuern. Das <div>-Element ist sozusagen der Container für die Hyperlinks des Menüs.
Das <div>-Element legt nur die Position des Menüs fest. Alle anderen Eigenschaften werden den Hyperlinks in diesem Container zugewiesen.
Beispiel zur Positionierung eines Menüs
Im folgenden Beispiel wird in der CSS-Datei das Menü in einem rechteckigen Bereich links auf der Seite festgelegt:
float:left;
width:160px;
margin:60px 0 0 5px;
padding:0;
}
Die anderen Elemente der Seite sollen das Menü rechts umfließen (float:left). Das Menü selbst soll 160 Pixel breit sein (width) und vom oberen Seitenrand einen Abstand von 60 Pixeln (margin) haben - schreibt man nicht margin-top, margin-left usw., sondern alle Angaben einmal, so beziehen sie sich auf oben, rechts, unten, links. Die Hyperlinks innerhalb des Menüs sollen keinen Abstand zum Containerrand haben (padding:0).
Würde man den entsprechenden Code in eine HTML-Seite einfügen, so würde man noch nichts sehen, denn das Element ist leer und enthält keine sichtbaren Formatierungen. Diese muss man erst den Hyperlinks zuweisen und dann natürlich die Hyperlinks eintragen.
Hyperlinks formatieren
Um nur das Aussehen der Hyperlinks im Menücontainer zu formatieren - im Seitentext sollten die Hyperlinks anders aussehen, verwendet man folgende Notation: div#links a oder #links a. Die Angaben beziehen sich dadurch nur auf Hyperlinks innerhalb des <div>-Elements.
Beispiel zur Formatierung von Hyperlinks
display:block;
text-align:center;
font:bold 1em sans-serif;
padding:5px 10px;
margin:0 0 1px;
border-width:0;
text-decoration:none;
color:rgb(205,205,205);
background:rgb(1,40,160);
border-right:5px double #505050;
}
Die Formatierung der Hyperlinks entspricht der, die auf dieser Seite verwendet wird.
Wichtig ist die Angabe display:block; - dadurch werden die Hyperlinks untereinander und so breit wie der Container angezeigt. Sonst würden sie nebeneinander angezeigt werden und der blaue Hintergrund wäre nur so breit wie die Schrift!
Die im Font-Attribut verwendete Angabe zur Größe der Schrift (1em) bewirkt, dass die Schriftgröße der Standardgröße entspricht. Durch text-decoration:none; erscheinen die Hyperlinks nicht unterstrichen. Der Rest dürfte selbsterklärend sein.
Damit sich nun die Hyperlinks beim Drüberfahren (engl. = hover) mit der Maus verändern, muss man auch dieses Format festlegen.
Beispiel zur Formatierung von Hyperlinks beim Hovern
color:rgb(250,250,250);
background:rgb(0,0,255);
border-right:5px double white;
}
Fährt man mit der Maus über den Hyperlink, so verändern sich die Schriftfarbe (wird etwas heller), der Hintergrund (wird heller) und die Farbe des rechten Rahmens (wird weiß).
Zusätzliche Informationen zu Hyperlinks anzeigen
Bei einer komplexeren Webseite mit vielen Links im Menü gibt es manchmal Schwierigkeiten, kurze und aussagefähige Bezeichnungen zu finden. Zu lange Bezeichnungen würden das Aussehen der Links verändern oder abgeschnitten - beide Varianten sind für das Design der Seite nicht gut.
Man kann sich dadurch helfen, dass man zusätzliche Informationen und Erläuterungen anzeigen lässt. Die geschieht mit einem <span>-Element, das zum Menü gehört und beim Hovern über den aktuellen Link angezeigt wird.
Beispiel zur Formatierung von Zusatzinformationen zu Hyperlinks
Die zusätzliche Info zu den Links wird beim Hovern in einer kleinen Box über dem Menüblock angezeigt. Ansonsten ist sie nicht sichtbar.
display:block;
position:absolute;
top:0px;
left:0;
width:135px;
padding:5px;
margin:10px;
color:rgb(250,250,250);
font-size:10px;
text-align:center;
}
Festlegungen zum Aussehen der Info zum Menüblock: Da die Position absolut angegeben wird, liegt die Info außerhalb des Menüs.
Als Beispiel für diese Formatierungen des Menüs können Sie sich jede Seite dieser Webseite ansehen.
Schauen Sie sich im Internet um und analysieren den Quellcode von geeigneten Seiten.
Zwei Beispiele für waagerecht angeordntet Menüs
- Seite mit waagerechtem Menü - Beispiel ansehen
- Seite mit waagerechtem Menü und gleichbreiten Hyperlinks durch Listenformatierung - Beispiel ansehen
Dynamische Menüs per CSS erzeugen
Dynamische (also bewegliche) Menüs lassen sich relativ einfach per CSS erzeugen, indem man das Hover-Ereignis nutzt. Leider unterstützt der marktführende IE 6 diese CSS-Norm nicht. Und die neue Version IE 7 stellt die Menüs auch nur unzureichend dar. Vielleicht ändert sich etwas in der Zukunft. Bis dahin sehen Sie sich das Beispiel aufklappbare Menüs mit Firefox, Netscape und Opera an.
