Ein Menü basteln..

Heute basteln wir ein Menü

Allgemeines:

Selten steht der komplette Inhalt einer Webseite beim Entwurf schon fest. Die Menüführung sollte aber auch nach Jahren einheitlich und übersichtlich bleiben. Nachträglich hinzugefügten Menüpunkten sieht man allzuoft an, dass sie dazu geflickt wurden.

Das hier vorgestellte Menü ist einfach erweiterungsfähig. Der html Code besteht nur aus der Linkliste und ist daher später ohne aufwändige Formatänderungen um weitere Punkte (Knöpfe) zu erweitern. Die Knöpfe haben einen 3D Effekt und wirken beim betätigen, als ob sie eingedrückt werden. Es ist trotzdem statisches HTML und "bewegt" sich etwas mit Hilfe der dynamischen Pseudo-Klasse :hover von CSS, es ist kein JavaScript erforderlich.

Das sollten Sie wissen:

Lesen Sie in den CSS Specifications zumindest das Kapitel 5 über Selectors. Mit den Eigenschaften zu Text, Box, Font und Background sollten Sie ein wenig vertraut sein.

Fertig und zum Ausprobieren

Item 1 Item 2 Item 3 Item 4

der html Code

<div id="MENUE">
<A href="#">Item 1</A><A href="#">Item 2</A>
<A href="#">Item 3</A><A href="#">Item 4</A>
</div>

und einige Zeilen css

<style type="text/css" media="screen">
#MENUE { text-align:center;}
#MENUE a { background-color:#f16733; color:white; 
text-decoration:none; font-weight:bold; margin: 2px; padding:4px 10px; 
border-top: 1px solid #c0c0c0; border-right:3px outset #c0c0c0; 
border-bottom:3px inset #707070;  border-left:1px solid #c0c0c0;}
#MENUE a:hover { border: 2px solid white;}
</style>