Navigationen
Eine Navigation ist nichts anderes, als eine Liste von Links, wegen ihrer strukturierenden Eigenschaft und der möglichen Verschachtelung. Die Listeneinträge können traditionell senkrecht untereinander angeordnet werden, oder waagrecht nebeneinander in einer Zeile.
Navigations-Beispiele
Folgende Beispiele unterscheiden sich bloss im CSS (und in der id)!
HTML:
<div id="navcontainer1"> <ul id="navlist1"> <li><a href="#">Link Eins</a></li> <li id="active"><a href="#" id="current">Link Zweiv/a></li> <li><a href="#">Link Drei</a></li> <li><a href="#">Link Vier</a></li> <li><a href="#">Link Fünf</a></li> </ul> </div>
Horizontale Navigation
CSS:
#navcontainer1 ul {
padding-left: 0; margin-left: 0; /* beides hebt das Einrücken von Listen auf */
float: left; width: 100%; /* beides definiert den Balken Balken */
font-family: arial, helvetica, sans-serif; background-color: #036; color: White;
}
#navcontainer1 ul li { display: inline; } /* alles auf einer Zeile */
#navcontainer1 ul li a {
padding: 0.2em 1em; background-color: #036; color: White;
text-decoration: none; /* hebt Unterstreichung von Links auf */
float: left;
border-right: 1px solid #fff; /* Links trenenn */
}
#navcontainer1 ul li a:hover {
background-color: steelblue;
}
#navcontainer1 ul li a:active {
background-color: steelblue;
}
#navlist1 li a#current {
background-color: steelblue;
}
Bretterbalken
Mit wenig Änderung am CSS entsteht eine Variante
#navcontainer5 ul {
padding-left: 12px; margin-left: 0;
font-family: arial, helvetica, sans-serif; background-color: steelblue; color: White;
height:10px;
}
#navcontainer5 ul li {
display: inline; /* alles auf einer Zeile */
position:relative; top:-6px; margin:1px;
}
#navcontainer5 ul li a {
text-decoration: none; /* hebt Unterstreichung der Links auf */
padding: 0.3em 2em;
background-color: #ff7f50; color:#036;
border-right: 2px solid #fff; /* Links trennen */
}
#navcontainer5 ul li a:hover {
background-color: steelblue; color: #fff;
}
#navcontainer5 ul li a:active {
background-color: steelblue; color: #036;
}
#navlist5 li a#current {
background-color: lightseagreen; color: #036;
}
Reiter Navigation
CSS:
#navcontainer2 ul li a:active {
background-color: #369; color: #fff;
}
#navlist2 {
padding: 3px 0; margin-left: 0; border-bottom: 1px solid #778; font: bold 12px Verdana, sans-serif;
}
#navlist2 li {
list-style: none; margin: 0; display: inline;
}
#navlist2 li a {
padding: 3px 0.5em; margin-left: 3px; border: 1px solid #778; border-bottom: none; background: #DDE; text-decoration: none;
}
#navlist2 li a:link { color: #448; }
#navlist2 li a:visited { color: #667; }
#navlist2 li a:hover {
color: #000; background: #AAE; border-color: #227;
}
#navlist2 li a#current2 {
background: white; border-bottom: 1px solid white;
}
Buttons
CSS:
#navcontainer3 ul {
padding-left: 0px; margin-left: 0; /* beides hebt das Einrücken von Listen auf */
font-family: arial, helvetica, sans-serif;
width: 100%; /* Auf die gesamte Breite */
padding: 4px;
}
#navcontainer3 li {
list-style-type:none; /* hebt bullets auf */
display: inline;
padding: 4px 8px 4px 8px;
margin: 4px;
background-color: Silver;
border: 2px solid;
border-color: #e2e2e2 #666 #666 #e2e2e2;
}
#navcontainer3 ul li a {
text-decoration: none; /* hebt Unterstreichung von Links auf */
color: White;
}
#navcontainer3 ul li a:hover {
color: #000;
}
#navcontainer3 ul li a:active {
color: #fff;
}
#navlist3 li a#current3 {
color: #030303;
}
opacity: 0.8; box-shadow:inset border-radius: text-shadow:
CSS3 Aero Aqua
CSS 3:
#navcontainer6 ul {
padding-left: 30px; margin-left: 0;
font-family: arial, helvetica, sans-serif; background-color: #00E0F0;
color: White; font-size:120%; text-shadow: 0px 0px 6px white;
/*-moz-box-shadow: 0px -15px 15px white; Variante für den Boden */
-moz-box-shadow:inset 0px -10px 10px #00C0B0;
box-shadow:inset 0px -10px 10px #00C0B0;
position:relative; top:12px;
height:22px;
}
#navcontainer6 ul li { display: inline; } /* alles auf einer Zeile */
#navcontainer6 ul li a {
margin: 3px;
padding: 5px 20px; background-color: #00C0E0;
color: White; font-weight: bold;
text-decoration: none; /* hebt Unterstreichung der Links auf */
border-right: 3px solid darkturquoise;
border-left: 3px solid skyblue;
border-top: 3px solid #D0F0FF;
border-bottom: 4px solid #007080;
/* -moz-box-shadow:inset 0px 5px 10px white; */
-moz-box-shadow:inset 0px -20px 5px #0080A0;
box-shadow:inset 0px -20px 5px #0080A0;
-webkit-opacity: 0.8;
-o-opacity: 0.8;
-ms-opacity: 0.8;
opacity: 0.8;
position:relative; top:-12px;
-moz-border-radius: 20px; /* runde Ecken */
border-radius: 20px; /* runde Ecken */
}
#navcontainer6 ul li a:hover {
background-color: #00E0E0;
box-shadow:inset 0px -20px 5px #00E0E0;
}
#navcontainer6 ul li a:active {
background-color: white;
}
#navlist6 li a#current {
background-color: white;
-webkit-opacity: 0.8;
-o-opacity: 0.8;
-ms-opacity: 0.8;
opacity: 0.8;
}
Vertikale Navigation
:first-child :last-child
Den Rahmen oben braucht es nur im ersten Listenelement. Dies ist mit dem Pseudoelement :first-child in CSS3 beschreibbar. Ich hätte auch immer nur oben einen Rahmen machen können und dann im letzten Listenelement (:last-child) einen unteren Rahmen anfügen können.
a:hover:before, a[id]:before { content:"> "; }
Und noch ein Trick: vorne Einfügen eines Zeichens (>) bei a:hover oder a[Attribut].
CSS:
#navcontainer4 ul {
padding-left: 0px; margin-left: 0px; /* beides hebt das Einrücken von Listen auf */
font-family: currier, currier-new, monospace;
font-weight: bold; font-size:120%;
background-color: oldlace;
width: 150px;
padding: 4px;
}
#navcontainer4 li {
list-style-type:none; /* hebt bullets auf */
padding: 4px 8px 4px 8px;
margin: 4px;
background-color: oldlace;
border-bottom: 1px solid;
border-color: #036;
}
#navcontainer4 li:first-child {
padding-top: 8px;
border-top: 1px solid;
}
#navcontainer4 ul li a { text-decoration: none; color: #907F90; }
#navcontainer4 ul li a:hover { color: black; }
#navcontainer4 ul li a:hover:before { content:"> "; }
#navcontainer4 a[id]:before { content:"> "; }
#navcontainer4 ul li a:active { color: #036; }
#navlist4 li a#current4 { color: #036; }
Menu Editoren
Auf dem Web finden sich etliche Websites und Freeware Programme um den HTML-/DHTML und CSS-Code von Navigationen bzw. (Dropdown-) Menus zu generieren.
- List-O-Matic Online Tool für Menüs auf Listen basierend
- CSS-Tab-Designer Software zum Erstellen von Tab Menüs (auch mit runden Ecken)
- MyCSSMenu Online Tool für sehr variantenreiche Menüs
Mehr Navigationen
Weitere Navigationen befinden sich auch in den Teilen DHTML und PHP von Lehrling, je nach Schwehrpunkt ihres Aufbaus.
Durch Javascript und DHTML erzeugt man hauptsächlich aufklappbare, sich erweiternde Menus.
Mit PHP erzeugt man eher sich selber generierende Navigationen, welche sich u.U. ihre Einträge selber zusammensuchen.
Check den Code.