Hier bist Du: Home « Tipps und Tricks « Menüs mit Schatten

Tipps und Tricks: Menüs mit Schatten

Beispiel

Mit einem einfachen Trick kannst du Menüs im <div>-Container mit einem Schatten versehen und diese ohne absolute Positionierung im normalen Textfluss einfügen.

Internet Explorer 4.0, Netscape 6.x, Opera 5, Mozilla 1.0, Mozilla Firefox 0.8
...
#shadow {
width:8em;
margin-left:2em;
margin-top:2em;
background-color:#bbbbbb;
}
#shadow ul {
position:relative;
right:1em;
bottom:1em;
background-color:#F0F4D6;
border:1px solid #000000;
padding: 5px;
list-style: none;
} ... <div id="shadow">
<ul>
<li><a href="#">HYPERLINK </a></li>
<li><a href="#">HYPERLINK </a></li>
<li><a href="#">HYPERLINK </a></li>
<li><a href="#">HYPERLINK </a></li>
<li><a href="#">HYPERLINK </a></li>
<li><a href="#">HYPERLINK </a></li>
<li><a href="#">HYPERLINK </a></li>
</ul>
</div>

Du benötigst zwei Blockelemente die verschachtelt werden. Das äußere (div#shadow) enthält den Schatten, d.h. einen dunklen Hintergrund (background-color:#bbbbbb;). Das innere (ul)) liegt über dem Schatten und enthält das Menü. Es wird über den Kontextselektor #shadow ul angesprochen und erhält einen hellen Hintergrund (background-color:#F0F4D6;) sowie einen Rahmen.
Damit der hinter dem Menü liegende Schatten sichtbar wird, wird das Menü mittels position:relative um 1em nach oben und 1em nach links verschoben. Damit genug Platz für diese Verschiebung bleibt, wird dem Schatten ausreichend Abstand (margin-left:2em; margin-top:2em;) zugewiesen.

Browser

Der Netscape 4 hat mit solchen Dingen arge Probleme. Wenn dich das nicht stört, kannst du diesen Trick bedenkenlos einsetzen.