zisslaweng.de

 Home    CSS    PHP    HTML    JavaScript    Allgemein    Sitemap   exemption-filter

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


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>
Die offiziellen Empfehlungen des W3C CSS 2.1 Specification

Eine deutsche Übersetzung der CSS Specification vom 12.05.98 CSS Level 2

Eine ausgezeichnete Dokumentation zu HTML und CSS in Deutsch mit zahlreichen Beispielen finden Sie unter selfhtml

 Wenn Sie die Boxen lieber vertikal angeordnet haben möchten, fügen Sie nach jedem Link </A> im html Code ein <br> ein und erweitern Sie den Selector "#MENUE a" um den Eintrag "line-height:30px;"

Logo