Hi,
Erstellung eines einfachen, horizontalen, grafischen Menüs:
Mit Photoshop wird eine Grafik in der Größe von 120x80px erstellt. Sie beherbergt beide Linkzustände. Der eigentliche Link ist somit 120x40px groß und enthält jeweils auch den Linktext in Form z.B. einer schönen Schreibschrift.
Normalzustand ist oben in der Grafik, der Hoverzustand darunter.
Doctype ist "strict" um immer im Standardmodus zu sein.
Beim Link der gerade aktuellen Seite wird <a> gegen <strong> ausgetauscht, damit er nicht auf sich selber zeigt.
Ein leeres <span> wird vor dem Linktext eingefügt, es bekommt später die HG-Grafik zugewiesen.
Die HG-Grafik soll per CSS den Linktext verdecken. Die dafür benötigte Technik ist eine Image-Replacement-Technik nach Gilder/Levin
XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Grafisches Menü</title>
</head>
<body>
<ul>
<li id="navi01"><strong><span></span>Startseite</strong></li>
<li id="navi02"><a href="#"><span></span>Kontakt</a></li>
<li id="navi03"><a href="#"><span></span>Galerie</a></li>
</ul>
</body>
</html>Die Abstände werden erstmal auf null gesetzt. Die <ul> bekommt eine Breite und wird zentriert. <li> floatet , bekommt eine Breite und das Listenzeichen ausgeschaltet:
* {
padding:0;
margin:0;
}
ul {
width:400px;
margin:2em auto;
}
li {
float:left;
width:120px;
list-style-type:none;
}<a> und <strong> bekommen position:relative; damit sich das später absolut positionierte <span> mit der HG-Grafik daran orientieren kann.
overflow:hidden ist dafür damit bei Schriftvergrößerung der Linktext des Markup's nicht darunter hervorlugen kann.
Es wird zum Blockelement erhoben und kriegt die Breite von <li> und die Höhe der halben Grafik (ein Zustand halt!):
a,
strong {
position:relative;
overflow:hidden;
display:block;
width:100%;
height:40px;
}Der Normalzustand und der hervorgehobene Zustand der gerade aktuellen Seite wird definiert. Mit position:absolute verdeckt die Grafik den Linktext:
#navi01 a span {
position:absolute;
width:100%;
height:40px;
top:0;
left:0;
background:url(startseite.jpg) no-repeat 0 0;
}
#navi01 strong span {
position:absolute;
width:100%;
height:40px;
top:0;
left:0;
background:url(startseite.jpg) no-repeat 0 -40px;
}
#navi02 a span {
position:absolute;
width:100%;
height:40px;
top:0;
left:0;
background:url(kontakt.jpg) no-repeat 0 0;
}
#navi02 strong span {
position:absolute;
width:100%;
height:40px;
top:0;
left:0;
background:url(kontakt.jpg) no-repeat 0 -40px;
}
#navi03 a span {
position:absolute;
width:100%;
height:40px;
top:0;
left:0;
background:url(galerie.jpg) no-repeat 0 0;
}
#navi03 strong span {
position:absolute;
width:100%;
height:40px;
top:0;
left:0;
background:url(galerie.jpg) no-repeat 0 -40px;
}Der untere Teil der Grafik wird durch das "hovern" per background-position ins Bild geschoben:
#navi01 a:hover span,
#navi01 a:focus span,
#navi02 a:hover span,
#navi02 a:focus span,
#navi03 a:hover span,
#navi03 a:focus span {
background-position:0 -40px;
}Mmh..., und damit ist auch der IE einverstanden??
Nicht ganz:
Er hat aber plötzlich vergessen wie es geht, das beim überfahren des Links aus dem Pfeil eine Hand werden muss.
Das wird ihm per CC wieder beigebracht.
Außerdem bleibt die Grafik des gerade gehoverten Menüpunktes im IE6 nach dem hovern in der hover-position stehen
und springt nicht zurück auf die "Normal-Position".
Der dafür definierte Hack mit text-indent ist einfach und zuverlässig.
<!--[if lte IE 7]>
<style type="text/css">
ul a span {
cursor:hand;
}
* html ul a:hover {
text-indent:0;
}
</style>
<![endif]-->Es ist evtl. darauf zu achten, das die Regel nur auf das betreffende Menü beschränkt werden sollte. Das kann sichergestellt werden, indem die ul eine id bekommt und die Regel per Nachfahrenselektor auf das betroffene Menü angewendet wird.
Hoffe es ist verständlich beschrieben.
koslowski