05.01.2008
Menüs mit Hintergrundgrafiken
Mit Hintergrundfarben und Rahmen kann man bereits sehr vielfältig Menüs bzw. ihre Links gestalten. Etwas ausgefallen ist es, wenn man zusätzlich mit Hintergrundgrafiken arbeitet. Im Folgenden soll in verschiedenen Schritten ein solches Menü entwickelt werden.
1. Das Basismenü
Basis bildet die "Navi" aus dem CSS-Einsteigerkurs (ff) in leicht modifizierter Form. Ich möchte deshalb an dieser Stelle auf nähere Erklärungen verzichten und lediglich die daran vorgenommenen Änderungen erläutern.
Damit wir alle eine einheitliche Basis haben, hier der HTML- und CSS-Code unserer "Basis-Navi":
<!-- Menue 1 -->
<div class="container">
<div id="navi1">
<ul>
<li> <h5>1. Basismenü ohne Hover-Effekt</h5> </li>
<li> <a href="#">Link 1</a></li>
<li> <a href="##">Link 2</a> </li>
<li> <a href="###">Link 3</a> </li>
<li> <a href="####">Link 4</a> </li>
<li> <a href="#####">Link 5</a> </li>
</ul><!--Ende ul-->
</div><!--Ende Navi1-->
</div><!--Ende container-->
Dieser HTML-Code bleibt im Folgenden unverändert.
Einzige Ausnahme: Der Div "navi1" ist bei jeder Variante durch "navi2", "navi3" usw. zu ersetzen.
Diesem Basismenü liegen folgende CSS-Angaben zugrunde:
body
{
background-color: #788059;
font-family: Verdana, Arial, sans-serif;
font-size: 100.01%;
width: 100%;
height: 100%;
margin: 0;
padding: 0
}
h3
{
text-align: center;
color:#FAFFE6;
}
.container
{
margin: 20px;
width: 200px;
float: left;
}
/*------------------CSS-Angaben für das Basismenue 1----------*/
#navi1
{
width: 190px;
font-size: 14px;
float:left;
display: inline;
background-color: #FAFFE6;
}
#navi1 ul
{
margin: 10px;
padding-left: 0;
list-style-type: none;
}
#navi1 a
{
display: block;
padding: 5px;
width: 160px; /*--wichtig für den IE 6--*/
text-decoration: none;
background-color: #D4D9C3;
color: #7D8073;
border-bottom: 1px solid #788059;
}
/*-----------Ende der CSS-Angaben für das Basismenue 1-------------*/
In diesem Menü sind noch keine Angaben für Hover- und Visited-Links enthalten, weshalb auch keine entsprechenden Effekte zu Tage treten. Das Ganze sollte dann so wie Beispiel 1 aussehen.
2. Basismenü mit Hintergrundgrafik
In der nächsten Variante "navi2" bauen wir eine Hintergrundgrafik ein. Kopiert euch zu diesem Zweck am besten nochmal den ersten HTML- und CSS-Code und ersetzt überall "navi1" mit "navi2".
Bei der Wahl der Hintergrundgrafik könnt ihr einen Bezug zum Homepage-Thema herstellen. Für eine Musikseite vielleicht einen Notenschlüssel oder ein Instrument, für etwas Literarisches ein Buch, für eine Sportseite das entsprechende Sportartensymbol usw.
Als "bekennender Pfälzer" habe ich mich für ein Weinglas entschieden. Bei dieser Gelegenheit bedanke ich mich einmal bei meiner grafischen Kooperationspartnerin Garnet für ihre Unterstützung. Sie sorgt ebenso akribisch dafür, dass auf diesen Seiten möglichst keine Rechtschreibfehler zu finden sind und hat mir diese drei transparenten Grafiken zur Verfügung gestellt:
Sie haben (von links nach rechts) die Dateibezeichnungen "bg1.gif", "bg2.gif" und bg3.gif" und sind 20px auf 20px groß.
Die erste Grafik wird nun in die einzelnen Links, und zwar vor den Linktext eingebaut.
Hierzu nehmen wir in den CSS-Angaben für #navi2 folgende Änderungen vor, die rot hervorgehoben sind:
#navi2 a
{
display: block;
padding: 5px 5px 5px 30px;
width: 135px; /*--wichtig für den IE 6--*/
text-decoration: none;
color: #7D8073;
border-bottom: 1px solid #788059;
}
#navi2 a:link
{
background:#D4D9C3 url(bg1.gif) no-repeat;
background-position: 5px;
}
#navi2 a:visited
{
background:#D4D9C3 url(bg1.gif) no-repeat;
background-position: 5px;
}
Zwecks Einrückung des Link-Textes erhöhen wir den linken Paddingwert von ursprünglich 5px auf 30px. Wegen des "CSS-Boxmodells" erhöht sich dadurch die Gesamtbreite der Links um 25px.
Diese 25px ziehen wir vom width-Wert der a-Links ab, so dass die bisherige Gesamtbreite unverändert bleibt.
Nun definieren wir die Angaben für den Link im Normalzustand und den Link im Visited-Zustand. Für beide verwenden wir zunächst identische Angaben. Wir könnten das an dieser Stelle auch zusammenfassen, weisen es wegen der weiteren Entwicklung aber dennoch gesondert aus.
Unsere Hintergrundangaben beziehen sich auf die Hintergrundfarbe und die Einbindung der Hintergrundgrafik "bg1.gif". Damit sich die Grafik nicht kachelt (wiederholt) verhindern wir dies durch ein no-repeat;.
Mit der Angabe background-position: 5px; wird festgelegt, wo die linke obere Ecke der Hintergrundgrafik sein soll. Der erste Wert steht für die horizontale, ein zweiter für die vertikale Position. Bezugspunkt ist das HTML-Element, für das die Hintergrundgrafik definiert wird. Etwaige Innenabstände werden berücksichtigt (Quelle.)
In unserem Beispiel reicht der erste Wert zwecks Einrückung von links aus.
Auf diese Weise haben wir nun ein Weinglas in unsere Links "gezaubert", wie aus Beispiel 2 ersichtlich. Und damit es nicht "zu trocken" wird, habe ich für die Linkbezeichnungen vorsorglich schon diverse Weinsorten verwendet.
3. Basismenü mit Hintergrundgrafik und Hover-Effekt
Wir entwickeln unsere Navi weiter, indem wir die Weingläser mit einem Hover-Effekt versehen.
Bitte wieder wie oben verfahren, den gesamten Code von "navi2" kopieren und überall "navi2" durch "navi3 ersetzen.
Bisher hatten wir noch keinen Hover-Effekt berücksichtigt. Deshalb ergänzen wir die CSS-Angaben wie folgt:
#navi3 a:hover
{
background:#D4D9C3 url(bg2.gif) no-repeat;
background-position: 5px;
}
Im Prinzip ist es der gleiche Code wie bei "#navi2 a:visited". Neben der geänderten Elementbezeichnung haben wir lediglich noch die Hintergrundgrafik ausgetauscht, indem wir nun "bg2.gif" verwenden. Es hat den Anschein, als wären die Weingläser beim Hovern nun gefüllt, wie aus der Menü-Demo 3 hervorgeht (ein Prost auf das Gelingen!).
4. Basismenü mit Hintergrundgrafik und Hover-/Visited-Effekt
Um nun noch einen "Visited-Effekt" einzubauen, müssen wir lediglich bei "#navi4 a:visited" die Hintergrundgrafik austauschen. Statt "bg1.gif" verwenden wir "bg3.gif".
Ich denke, dazu braucht ihr nun keine detaillierte Anleitung mehr. Hier das Ergebnis Beispiel 4.
5. Basismenü Schrift- und Rahmeneffekt
Im letzten Beispiel 5 habe ich beim Hovern noch etwas mit der Schriftfarbe, dem Schriftstil und mit Rahmen gespielt.
Für alle fünf Menüs könnt ihr euch den Quelltext mit entsprechenden CSS-Angaben in der Demo-Datei ansehen.
Experimentiert nun mal selbst mit unterschiedlichen Farben, Rahmen und Hintergrundgrafiken, je nach Belieben. Falls eure Links zu unterschiedlichen Themen führen und entsprechend unterschiedliche Grafiken eingebaut werden sollen, ist auch das möglich: Je Grafik müsst ihr dann eine eigene Link-Klasse nach dieser Anleitung hinterlegen.
Ich wünsche euch dabei viel Spaß und viel Erfolg!