einfaches vertikales Menü
einfaches vertikales Menü
CSS-Code:
body {
font-family: Verdana, sans-serif;
}
div#menue {
border: 1px black solid;
width: 140px; /* DIV-Box wird durch nachfolgende padding-Angabe zu 180px! */
padding: 0 20px; /* oben kein Innenabstand, an den Seiten schon */
border-radius: 10px; /* DIV-Box soll runde Ecken haben */
}
div#menue ul {
list-style-type: none; /* Kein Aufzählungszeichen notwendig */
margin-left: -41px; /* Listenpunkte (=Menüpunkte) sollen nicht eingerückt sein */
}
div#menue ul a{ /* man hätte hier auch #div menu ul li a oder div#menu a oder sogar einfach nur a (jedoch nicht sinnvoll bei einer ganzen Website) schreiben können */
background-color: gray;
color: white;
text-decoration: none;
border: 1px black solid;
/* Folgende display-Regel zwingt die Menü-Links dazu, die Eigenschaften eines Block-Elements anzunehmen. Ansonsten könnte man keine Außen- und Innenabstände festlegen, genausowenig wie die Breite der a-Elemente und somit des Rahmens um sie festlegen könnte */
display: block;
margin: 3px 0; /* Außenabstand (somit Abstand zu anderen Menüpunkten) nach oben und unten 2px, an die Seiten 0 */
padding: 4px; /* Innenabstand, also Abstand des Textes vom Menüpunktsrahmen */
width: 132px; /* Fixe breite von 136px, wird durch padding-Angabe zu 140px! */
border-radius: 5px; /* Menüpunkten haben runde Ecken */
}
div#menue ul a:hover {
background-color: #acacac;
}
div#menue ul a:active {
background-color: black;
}
===== horizontales Dropdown-Menü =====
Das folgende Beispiel zeigt ein mit CSS erstelltes Dropdown-Menü. Um volle Kompatibilität auch zu älteren Browsern zu haben, muss man zusätzlich Javascript verwenden. Für die aktuellen Browser wäre das aber nicht mehr nötig.
XHTML-Code:
Dropdown Menü
Dropdown Menü
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
CSS-Code:
body {
font: 100.01% sans-serif;
background-color: #fff;
color: #807573;
}
h1 {
font-size: 1.2em;
}
#navigation, #navigation ul {
margin: 0;
padding: 0;
list-style: none;
font-weight: bold;
}
ul#navigation li a {
background-color: #FFEBE6;
color: black;
text-decoration: none;
display: block;
width: 8em;
padding-top: 5px;
}
#navigation li {
float: left;
width: 8em;
}
#navigation li ul { /* steuert die untergeordnete Liste, also das Untermenü an */
position: absolute;
width: 8em;
left: -999em; /* Untermenü wird weit außerhalb des Browserfensters positioniert ... */
background-color: #FFEBE6;
}
#navigation li:hover ul, #navigation li.sfhover ul {
left: auto; /* ... und bei Hover auf einen Hauptmenüpunkt zurückgeholt */
}
#navigation li li a:hover { /* steuert einen Untermenüpunkt bei hover an */
background-color: #BFB0AC;
}
#navigation li li a:active {
background-color: white;
}
#inhalt {
clear: left;
width: 32em;
padding-top: 5px;
}