Moin,
Sieh´s als Rat der Weisen (besser geht ned). :mrgreen:
sorry wenn ich das mal so anmerke, aber ein wenig besser gehts schon. ;-)
Warum a:active da mit reingenommen wird ist mir ein Rätsel, da es ja nur im Moment des Klicks gilt.
Die Grafiken haben ja keinen Bezug zum Inhalt und gehören deshalb nicht ins Markup.
Wenn die Grafiken ausgeschaltet sind ist "Ende Gelände" mit der Navi.
Tutorial eines einfachen, horizontalen, grafischen Menüs(vertikal ist ja noch einfacher, nur ist die Grafik da 240x40px!):
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>
Alles anzeigen
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;
}
Alles anzeigen
<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;
}
Alles anzeigen
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 (oft) in der hover-position stehen
und springt nicht zurück auf die "Normal-Position".
Der dafür definierte Hack mit background-position mutet unsinnig und absurd an, hilft aber.
<!--[if lte IE 7]>
<style type="text/css">
ul a span {
cursor:hand;
}
* html a:hover {
background-position:0 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.
Es kann sein das Gilder/Levin bei WP etwas Probleme macht, dann schiebt man den Linktext einfach per CSS aus dem Viewport.
Evtl klappt das auch mit dem strong statt a nicht, das bräuchte man ne Funktion die das strong in WP einsetzt.
Vielleicht deshalb einfach auf strong verzichten, ganz normal a hinschreiben
Gruß
koslowski
