KS Webdesign - Der Blog » Navigationen

Navi includen – ohne Deppenlink

Klaus — Wed, 23 Dec 2009 14:33:11 +0000

Wer kennt das nicht: Die Navigation einer bestehenden Site ändert sich und nun muss die Änderung bei wirklich jeder Seite eingetragen werden. Nervig und zeitaufwändig!

Eine Menge Zeit spart man sich wenn man die navi per include einbindet. Diese Methode ist relativ simpel und effektiv. Man führt die Änderung an einer Datei durch und fertig.

Man hat zwar noch den Deppenlink (Link der auf sich selber zeigt), aber was soll’s.

In diesem, auch für PHP-Vollpfosten geeigneten Tutorial beschreibe ich euch, wie ihr die navi includet und trotzdem den Deppenlink vermeidet.

So sieht euer Menü normalerweise aus:

- Startseite
- Leistungen
- Team

Wie es sich gehört ist das Menü eine ungeordnete Liste. Bei der aktuellen Seite wurde a gegen strong ausgetauscht, um den Deppenlink zu vermeiden.

Um die navi zu includen, benenne ich die beteiligten Dateien von .htm in .php um. Aus der index.htm wird also index.php, usw.

Wo die ungeordnete Liste mit dem Menü stand trage ich folgendes ein:

Den Inhalt der navi.php, die anstelle von dem, was da vorher stand eingebunden wird werfe ich euch mal direkt vor die Füße:


$uri = $_SERVER['REQUEST_URI'];
$navi = array(
'/'        => 'Startseite',
'/leistungen'    => 'Leistungen',
'/team' => 'Team',
);
echo ''."\n";
foreach ($navi as $href => $text)
{
echo '
';
if ($uri == $href)
{
echo ''.$text.'';
}
else
{
echo ''.$text.'';
}
echo '
'."\n";
}
echo '
'."\n\n";
?>


Um zu verstehen was wo eingetragen wird, lohnt es sich einmal etwas genauer hinzuschauen.
Zuerst wird in einem array die Adresse root-relativ eingetragen, d.h. es wird vom Wurzelverzeichnis des Webservers ausgegangen, was ja i.d.R. immer / ist.
Rechts daneben steht in Hochkommata der Text des Menüpunktes.
Wenn die angewählte URL gleich der URL des Menüpunktes ist wird a gegen strong ausgetauscht, ansonsten über die else der Link hingeechot.
Das array kann beliebig erweitert werden, je nachdem wieviel Menüpunkte die Navigation hat.
Wenn ihr mehrere Menüs auf eurer Seite habt, braucht ihr z.B. eine topnavi.php, eine seitennavi.php und/oder eine fuss-navi.php. Der Inhalt ist bis auf die Punkte des arrays gleich, ihr müßt nur die richtige PHP-Datei an der richtigen Stelle includen.
Das ist die einfachste Art eines Menüs, welches includet wird. Da ich euch noch mehrere Varianten zur Verfügung stellen will, habe ich alles zum Download in den Ordner include.zip gepackt.
Die enthaltene navi-normal.php ist die hier vorgestellte Variante.
Bei der navi-title.php gibt es zusätzlich den title-Tag für a
Bei der navi-klasse.php hat a noch eine zusätzliche Klasse und die navi-id.php hält für jeden Listenpunkt eine id bereit.
Funktioniert problemlos mit statischen Seiten. Ob das mit einem CMS so ohne weiteres geht glaube ich eher nicht.
Wenn ihr das Gleiche für eine WordPressinstallation wollt, kann ich euch den schönen Artikel von Thomas dazu ans Herz legen.
Von Markus stammt die Ursprungsversion des Scriptes. Heiko hat es verfeinert und David hat mir beim Verstehen des Scriptes geholfen.
Vielen Dank dafür euch dreien!
Ihr habt mir abgesehen von diesem Script schön öfter geholfen. Auch dafür nochmal an dieser Stelle meinen besonderen Dank! Ich habe viel von euch gelernt.



Navi – CSS-Tabelle
Klaus — Thu, 17 Sep 2009 05:21:31 +0000
Ein horizontales Menü dessen Links teilweise zwei,- und/oder dreizeilig sind, lassen sich mithilfe einer CSS-Tabelle recht gut gestalten.
Die Vorteile der Tabellendarstellung bestehen darin, dass die Tabellenzellen einer Zeile immer gleich hoch sind und sich immer auf die gesamte Breite der Tabelle verteilen. Es gibt keinen Umbruch der Tabellenzellen

und die Inhalte fließen nicht über.
Hier findest du die navi_tabelle_anfang.htm zum Quelltext rauskopieren.
Die benötigten Grafiken kannst du dir hier holen: navi_tabelle_grafik.htm
Im Browser schaut es so ungfähr aus:

Der Quellcode des Navi-Containers schaut so aus:




Windows Betriebssystem
Linux Betriebssystem
Mac Betriebssystem
Klemptnersglück Betriebssystem
Gibts das?




Und wo ist jetzt die Tabelle, werdet ihr euch vielleicht jetzt fragen?
Im Quelltext werden wir sie nicht anlegen. Sie wird ausschließlich über CSS-Eigenschaften und Werte

realisiert!
Fangen wir also mit CSS-Ergänzungen an:


div#navi  {
display:table;
width:100%;
background:#f8e580 url(navi_tabelle_verlauf.png) repeat-x left top;
border-bottom:1px solid #a8a79f;
}


div#navi ul  {
display:table-row;
}


div#navi ul li  {
display:table-cell;
vertical-align:top; /* Text wird oben in der Zelle angeordnet */
text-align:center;
}


div#navi wird zur Tabelle, die ul zur Tabellenzeile

und die Listenpunkte zur Tabellenzelle. div#navi hat eine horizontale Verlaufsgrafik zugewiesen bekommen.
Zwischenstand im Browser:

Noch nicht perfekt, aber auch nicht ganz schlecht.
Als nächstes bekommen alle Listenpunkte im Quelltext bis auf den ersten die Klasse .trennlinie zugewiesen.
Der erste Listenpunkt bekommt die Klasse nicht, weil sonst der Außenrahmen vom div#umhang in Höhe des Menüs auf der linken Seite 1px breiter wäre als überall sonst. Das mag optisch kaum ins Gewicht fallen, aber mich stört es schon weil ich es weiss.
Die Links und das span wo wir das jeweils erste Wort des Linktextes eingewickelt haben werden gleich mitgestaltet.
Bitte CSS ergänzen:


.trennlinie  {
background: url(navi_tabelle_linie.png) repeat-y left top;
}


div#navi li a  {
display:block;
color:#995d08;
font-size:0.8em;
text-decoration:none;
padding:0.5em 0;
}


div#navi ul li a:hover  {
color:#d90000;
}


div#navi ul li a span  {
display:block;
font-size:1.5em;
line-height:1.1;
}


Ergebnis im Browser:

Soweit, sogut. Was ist mit dem IE 6/7?
Wir erleben die übliche, böse Überraschung.
Alle Menüpunkte stehen untereinander, weil der IE 6/7 mit display:table/table-row/table- cell nix anfangen kann.
Die Conditional Comments werden nun ausgiebig mit Anweisungen gefüllt, damit diese Browser unser Menü vernünftig umsetzen.
Bitte den Conditional Comment ergänzen:





Mit display:inline; und zoom:1; wird ein Inlineblock-ähnliches Verhalten für den IE 6/7 erzeugt.
Eine feste Breite von etwas weniger als 25% wird zugewiesen. Etwas weniger deshalb, um Rundungsfehler abzufangen.
Die Listenpunkte stehen schon mal nebeneinander. Leider verlängert sich die vertikale Trenngrafik für die Listenpunkte nicht bis unten.
Ein Griff in die Trickkiste wird fällig!
Bitte den Conditional Comment ergänzen:





Die Listenpunkte bekommen ein unmäßiges unteres padding und zum Ausgleich ein fast genauso großes unteres margin.
Im IE 6 ist nun alles korrekt. Der IE7 macht es im Prinzip auch richtig, jedoch ragen die senkrechten HG-Grafiken für die Listenpunkte nach unten heraus.
Bitte den Conditional Comment ergänzen:





Mit dieser Anweisung stimmt es jetzt auch im IE 7.
Zu erwähnen wäre noch, dass wenn die Navigation den ganzen sichtbaren Bereich einnimmt, d.h. ohne Begrenzung durch ein umgebendes Element ist, der IE7 eine Mindestbreite braucht, um bei kleinem Viewport eine Überlappung der Linktexte zu verhindern (min-width:40em; z.B.).
Des Weiteren können die Listenpunkte in diesem Fall beim Verkleinern des Viewportes in die nächste Zeile umbrechen. Um das zu verhindern bekommt die ul white-space:nowrap; zugewiesen.
Damit die Linktexte über zwei oder mehr Zeilen laufen können benötigt a gleichzeitig noch white-space:normal;.
Natürlich alles per Conditional Comment.
Diese Art der Menügestaltung kommt sicher nicht allzuhäufig zur Anwendung, da der Teufel hier im Detail steckt. Aber gut zu wissen, das es so auch geht.



Grafische Navi 2
Klaus — Thu, 10 Sep 2009 05:09:55 +0000
Der etwas kompliziertere Fall eines grafischen Menüs habe ich schon erklärt.
Hier folgt nun der etwas einfachere Fall, wo der Linktext ganz normal dasteht und die Grafik nur den Hintergrund bildet.
Hier findest du die navi_grafisch2_anfang.htm zum Quelltext rauskopieren.
Die benötigte Grafik kannst du dir hier holen: navi_grafisch2_grafik.htm
So schaut die Grafik aus:

Die Größe der Grafik beträgt 140 x 80px.
Der obere Teil der Grafik beinhaltet den Normalzustand der Links und darunter befindet sich der Hover-Zustand, der später einfach durch Veränderung der background-position ins Bild geschoben wird.
Im Browser bietet sich euch dieses Bild:

Der Quelltext:




Startseite
Galerie
Kontakt




Der Link der aktuellen Seite ist gegen strong ausgetauscht worden, um den Deppenlink zu vermeiden.
Bitte CSS ergänzen:


li
float:left;
width:140px;
}


a,
strong  {
display:block;
width:100%;
height:40px;
}


li floatet und bekommt durch die Breite vorsorglich HasLayout..
a und strong werden zum Blockelement erklärt und haben durch die Angabe von Höhe und Breite auch schon HasLayout.
Wer floatet muss auch clearen!
Deshalb fügen wir ein hardcodiertes Clear hinzu und formatieren entsprechend.
Bitte den Quelltext ergänzen:







Das CSS dazu:


.clear
clear:both;
height:0;
width:0;
visibility:hidden;
border:0;
}


Jetzt binden wir die Grafik ein und gestalten die Links.
Bitte CSS ergänzen:


a  {
background:url(grafischesmenue2.png) no-repeat 0 0;
color:#3e7c07;
font-weight:bold;
text-decoration:none;
}


a:hover,
a:focus,
a:active,
strong  {
background:url(grafischesmenue2.png) no-repeat 0 -40px;
color:#d90000;
}


Stand im Browser:

Naja, das schaut aber nicht so toll aus. Da fehlen noch ein paar zusätzliche Anweisungen.
Bitte CSS ergänzen:


li
text-align:center;
}


a,
strong
line-height:2.5;
}


Stand im Browser:

So soll es sein. Die Schrift läßt sich auch um vier Stufen vergrößern ohne das der Text aus dem Container läuft
Leider schaut es im IE 6 / IE 7 nicht ganz so gut aus.
Trotz gegenteiliger Formatierung hat der IE Platz für die hr reserviert und bei Textvergrößerung um zwei Stufen kommt der untere Teil der Grafik ins Bild.
Bitte den Conditional Comment ergänzen:





Da der IE 6 / IE7 die Floats fälschlicherweise automatisch einschließt, wenn das umgebende Element (div#container!) HasLayout hat, können wir die Klasse .clear per Cond. Comment auf display:none; setzen.
Die anderen Anweisungen sorgen dafür, das der untere Teil der Grafik bei Textvergrößerung nicht ins Bild kommt.



Navi – Tabs
Klaus — Tue, 08 Sep 2009 06:47:46 +0000
Sehr beliebt sind auch Menüs, die sich mit Tabs organisieren. Vielleicht ist euch in diesem Zusammenhang schon mal der Begriff Sliding Doors (Schiebetürentechnik) untergekommen.
Der Nachteil dieser Technik ist, das man pro Linkzustand jeweils zwei Grafiken braucht.
Diese Hintergrundbilder waren so weit ineinander geschoben, das sie sich beim Zoomen der Seite wie eine Schiebetür immer weiter auseinanderzogen.
Wir verwirklichen das Ganze mit CSS-Sprites (engl. für Kobolde, Geist), d.h. wir benötigen nur eine Grafik für alles. Diese wird einfach per background-position an die richtige Stelle geschoben.
Hier findest du die tabs_sprites_anfang.htm zum Quelltext rauskopieren.
Die benötigte Grafik kannst du dir hier holen: sprites_grafik.htm
So sieht die Grafik aus:

Der Normalzustand ist das obere Drittel der Grafik. In der Mitte der gehoverte Zustand und darunter der gerade „aktive“ Zustand.
Und das ist der Stand im Browser:

Der Quelltext der Navigation schaut so aus:




Startseite
Übersicht
Galerie
Impressum




Alle Menüpunkte sind noch zusätzlich in ein span gewickelt worden.
Der Listenpunkt der gerade aktiven Seite hat die Klasse .aktiv bekommen und das a ist durch strong ersetzt worden, damit es keinen Deppenlink gibt.
Jetzt wird ein wenig wild rumgefloatet und der Textbereich bekommt ein solides Clear, um ihn sauber von der Navigation zu trennen.
Bitte CSS ergänzen:


div#navigation  {
float:left;
width:100%;
}


ul#navi  {
float:right;
}


ul#navi li  {
float:left;
}


#inhalt  {
clear:both;
}


Das div#navigation wird gefloatet damit es die Floats der ul einschließt.
Hätten wir jetzt einfach li das float:right; gegeben, hätte sich die Reihenfolge der Links im Browser umgekehrt.
Also wird die ulnach rechts gefloatet und li nach links.
a und span werden zum Blockelement erklärt. Ihnen wird eine andere Schriftfarbe zugewiesen und  span bekommt etwas padding. Die Unterstreichung der Links wird entfernt.
Sowohl das a und das span bekommen die Hintergrundgrafik, lediglich die Positionsangaben unterscheiden sich.
Bitte CSS ergänzen:


/* Der Normalzustand der Links wird gestaltet */
ul#navi a,
ul#navi span  {
display:block;
color:#fff;
}


ul#navi a  {
background:url(sprites.png) no-repeat 0 0;
font-weight:bold;
text-decoration: none;
}


ul#navi span  {
background:url(sprites.png) no-repeat 100% 0;
padding:4px 15px 2px 0;
}


Zwischenstand im Browser:

Nur die rechte Rundung der Hintergrundgrafik ist zu sehen. Links wird abrupt abgeschnitten. Das liegt daran das die span-HG-Grafik die a-HG-Grafik verdeckt.
Damit die linke Rundung der Hintergrundgrafik zu sehen ist benötigt das span einen linken margin.
Bitte CSS ergänzen:


ul#navi span  {
margin-left:15px;
}


Sieht schon etwas besser aus!
Bitte CSS ergänzen:


/* Gestaltung der gehoverten Menüpunkte */
ul#navi a:hover {
background-position: 0 -100px;
}


ul#navi a:hover span {
color:#336699;
background-position: 100% -100px;
}


Der aktive Menüpunkt wird nun gestaltet.
Wie bei a und span bekommen strongund die Klasse .aktiv die Hintergrundgrafik mit unterschiedlichen Positionsangaben zugewiesen.
Bitte CSS ergänzen:


/* Menüpunkt der aktuellen Seite wird gestaltet */
.aktiv  {
background: url(sprites.png) no-repeat 0 -200px;
}


.aktiv strong  {
display:block;
color:#336699;
background: url(sprites.png) no-repeat 100% -200px;
padding:4px 15px 2px 0;
margin-left:15px;
}


Soweit fast alles in Ordnung!
Im IE 6 ist nur der Text anklickbar und nicht die ganze Fläche.
a braucht HasLayout. Die normale Methode mit height:1px;

funktioniert hier leider nicht, das würde die Navi zerreißen. Also muss a auch floaten.
Bitte CSS ergänzen:





Endergebnis im Browser:

Inspiriert von:Fortgeschrittene CSS-Techniken



Navi – Flyout 2
Klaus — Thu, 03 Sep 2009 12:31:25 +0000
In meinem letzten Artikel Navi – Flyout 1 habe ich beschrieben, wie man ein einfaches Flyout-Menü mit zwei Ebenen erstellt.
Hier werde ich euch zeigen wie man eine dritte Ebene hinzufügt, d.h. ein Submenü bekommt ein weiteres Submenü, ein Sub-Submenü sozusagen.
Hier findest du die flyout_komplex_anfang.htm zum Quelltext rauskopieren.
Die Navi mit der eingefügten dritten Ebene schaut im Quelltext so aus:




Browser

Firefox

Firefox 1
Firefox 2
Firefox 3


Opera
Safari

 
Betriebssystem
Textprogramme
 
MS Word
Open Office
 

Unfug
 



Im Browser sieht es so aus:

Beim Hovern des Hauptmenüpunktes klappt die dritte Ebene gleich mit aus, außerdem hat sie die gleiche Farbe wie die zweite Ebene.
Aber eins nach dem anderen!
Es muss beim Ausblenden der Submenüs explizit angegeben werden, das die übernächste und weitere Ebenen beim Hovern des Hauptmenüpunktes nicht angezeigt werden.
Bitte CSS ergänzen:


/* Dritte Menüebene wird ausgeblendet */
ul#navigation ul,
ul#navigation li:hover li ul,
ul#navigation li.sfhover li ul {
position: absolute;
left:-9999px;
width:120px;
}


Okay, die zweite Ebene klappt nun aus, die Dritte hingegen nicht. Wir blenden sie wieder ein.
Bitte CSS ergänzen:


/* Dritte Menüebene wird eingeblendet */
ul#navigation li li:hover ul,
ul#navigation li li.sfhover ul {
left:100px;
}


Zwischenstand im Browser:

Mmmh, der Hover-Effekt der zweiten Ebene geht verloren, wenn der Mauszeiger über der dritten Ebene schwebt. Außerdem hat die dritte Ebene die gleiche Einfärbung wie die zweite Ebene.
Bitte CSS ergänzen:


/* Hovereffekt der zweiten Ebene; der auch beim Hovern der dritten Ebene erhalten bleibt */
ul#navigation li li:hover a,
ul#navigation li li.sfhover a {
color:#fff;
background-color:#d90000;
}


/* Einfärben der dritten Ebene (Subsubmenü) */
ul#navigation li li:hover li a,
ul#navigation li li.sfhover li a{
color:#fff;
background-color:#336699;
}


/* Die dritte Ebene bekommt den Hover-Effekt */
ul#navigation li li li a:hover  {
color:#fff;
background-color:#d90000;
}


Stand im Browser:

Na also, geht doch!  
Inspiriert von:Fortgeschrittene CSS-Techniken



Navi – Flyout 1
Klaus — Wed, 02 Sep 2009 14:15:16 +0000
Bei einem einfachen Layout mit zwei Spalten soll die Navigation in ein Flyout-Menü umgewandelt werden 
Hier findest du die flyout_einfach_anfang.htm zum Quelltext rauskopieren.
Im Browser schaut es so aus:

Die Quelltextstruktur der Navigation sieht so aus:




Browser
 
Firefox&lt/li>
Opera
Safari
 

Betriebssystem
Textprogramme

MS Word
Open Office


Unfug
 



Der Menüpunkt Browser hat drei Unterpunkte:
Firefox,  Opera und Safari.
Der Menüpunkt Textprogramme zwei Unterpunkte:
MS Word und Open Office
Die Unterpunkte der verschachtelten Liste sollen erst beim Hovern der Hauptpunkte nach links ausklappen und dabei den Hauptpunkt etwas überlappen.
Bitte CSS ergänzen:


/* Das Submenü wird ausgeblendet */
ul#navigation ul {
position: absolute;
left:-9999px;
}
/* Das Submenü wird eingeblendet */
ul#navigation li:hover ul  {
left:120px;
top:12px;
}


Das Untermenü wird aus dem sichtbaren Bereich geschoben und beim Hovern des entsprechenden Hauptmenüpunktes wieder ins Bild geschoben.
Wir müssen einem Element position:relative; zuweisen, da sonst body der Bezugspunkt für die absolute Positionierung ist.
Damit die dem Submenü nachfolgenden li‘s nicht das Submenü überlagern bekommt nicht li die relative Positionierung sondern li:hover.
Bitte CSS ergänzen:


ul#navigation li:hover  {
position:relative;
}


Zwischenstand:

Das Submenü klappt an der gewünschten Position aus, aber wegen der absoluten Positionierung fällt das Submenü auf die Breite des Inhaltes zusammen und bei zwei Wörtern gibt es einen Umbruch.
Bitte CSS ergänzen:


ul#navigation ul {
width:120px;
}


Die Liste hat eine feste Breite bekommen, wodurch das Submenü nun wie gewünscht ausschaut.
Bitte CSS ergänzen:


ul#navigation a:hover  {
color:#fff;
background-color:#d90000;
}


a hat einen Hover-Effekt bekommen, allerdings verliert der Hauptmenüpunkt seinen Hoverstatus wenn der Mauszeiger zum Submenü wandert.
Bitte CSS ergänzen:


#navigation li:hover a  {
color:#fff;
background-color:#d90000;
}


Jetzt haben alle Submenüpunkte Hoverstatus, wenn ich einen Hauptmenüpunkt hover, weil ich per Nachfahrenselektor alle a‘s anspreche, die auf ein gehovertes li folgen.
Deshalb wird die zweite Menüebene nun extra eingefärbt und der Hovereffekt für die zweite Ebene vergeben.
Bitte CSS ergänzen:


/* Das Submenü wird eingefärbt */
ul#navigation li:hover li a  {
color:#fff;
background-color:#ef0ff7;
}


/* Das Submenü bekommt den Hovereffekt */
ul#navigation li li a:hover  {
color:#fff;
background-color:#d90000;
}


Momentaner Stand:

Soweit, sogut. Jetzt fehlen nur noch die Anpassungen für den IE 6/7.
Der IE 7:
Beim Hovern entstehen Lücken zwischen den Links und das Submenü springt immer wieder weg, wenn man nicht an der richtigen Stelle hovert. HasLayout für a löst das Problem.
Bitte den Conditional Comment ergänzen:





Jetzt der IE 6:
Das Submenü klappt nicht aus, weil der IE 6 :hover nur in Verbindung mit a kennt.
Das Ausklappen des Submenüs wird mit Javascript erzwungen. Den li-Elementen wird bei onmouseover eine Klasse .sfhover zugewiesen, die per CSS angesprochen werden kann.
Bitte einen weiteren Conditional Comment hinzufügen:





Alle Deklarationen wo li:hover steht wird durch die Klasse .sfhover ergänzt.
Bitte CSS ergänzen:


ul#navigation li:hover ul,
ul#navigation li.sfhover ul  {
left:120px;
top:12px;
}


ul#navigation li:hover,
ul#navigation li.sfhover  {
position:relative;
}


ul#navigation li:hover a,
ul#navigation li.sfhover a  {
color:#fff;
background-color:#d90000;
}


ul#navigation li:hover li a,
ul#navigation li.sfhover li a  {
color:#fff;
background-color:#ef0ff7;
}


Jetzt ist zwischen den Listenpunkten noch ein Abstand und nur der Text reagiert auf das Hovern.
a braucht HasLayout. Da er min-height nicht kennt benötigt er durch eine Mindesthöhe anderweitig HasLayout.
Damit der Abstand zwischen den Listenpunkten verschwindet, braucht li eine IE-eigene Inline-Block-Darstellung.
Bitte den ersten Conditional Comment ergänzen:





Jetzt ist auch im IE 6 alles okay!
Inspiriert von:Fortgeschrittene CSS-Techniken



Navi – Dropdown
Klaus — Thu, 20 Aug 2009 13:39:24 +0000
Tutorial zur Erstellung eines einfachen Dropdown-Menüs mit XHTML/CSS und etwas Javascript für den IE 6.
Hier findest du die dropdown_anfang.htm zum Quelltext rauskopieren.
Im Browser schaut es so aus:

Die XHTML-Struktur des Menüs ist folgende:



Startseite
Galerie

Fotos
Gemälde
Grafiken


Kontakt
Links

Gute
Schlechte


Impressum



Die Untermenüs sind schon in die Menüliste eingeschachtelt. Zu beachten ist, das der Listenpunkt des Hauptmenüpunktes erst nach dem Submenü geschlossen werden darf. Den jeweils schließenden Hauptmenüpunkt habe ich fett hervorgehoben.
Die grundlegenden Formatierungen für die Links habe ich auch schon vorgenommen, damit wir uns ganz auf die Positionierung und Gestaltung der Submenüs konzentrieren können.
Los gehts! Bitte CSS ergänzen:


#topnavi  {
float:left;
width:36em;
background-color:#f8f8cf;
}


#navi  {
float:left;
width:100%;
}


#navi li  {
float:left;
width:7.2em;
}


#textbereich  {
clear:both;
}


Die Liste, alle Hauptmenüpunkte und der umgebende Container (#topnavi) werden gefloatet und im Textbereich wird gecleart, um den normalen Textfluß wiederherzustellen.
Das Ergebnis:

Bitte CSS ergänzen:


#navi li li  {
float:none;
}


#navi li ul  {
position:absolute;
left:-9999px;
}


#navi li:hover ul  {
left:auto;
}


Der Float wird für die zweite Menüebene wieder aufgehoben, damit diese Links später untereinander stehen.
Die Liste der zweiten Ebene wird absolut positioniert und aus dem Bildschirm geschoben, damit sie die Umgebung nicht mehr beeinflusst und im Normalzustand nicht zu sehen ist.
Wenn ein Hauptmenüpunkt gehovert wird, springt das Submenü wieder in den sichtbaren Bereich, weil die Positionsangabe left:auto; definiert wurde.
Der optische Stand der Dinge:

Einwandfrei!
Und jetzt mal im IE 7 öffnen.
Das Submenü klappt nicht aus
Der IE7 leidet am CSS Popup Bug, der bestimmte Angaben für das gehoverte Element (hier li) benötigt, wenn sich dessen Nachfahren (hier ul) ändern sollen.
Außerdem tritt beim IE7 der Whitespace-Bug auf, d.h. zwischen den li-Elementen des Submenüs sind Lücken zu sehen. Das kommt daher weil die li-Elemente durch die Angabe einer Breite HasLayout haben, die Links jedoch nicht. Davon sind auch die älteren IE’s betroffen. 
Bitte den Conditional Comment ergänzen:





Im IE 7 ist alles in Ordnung, aber was ist mit dem IE 6?
Das Submenü klappt immer noch nicht aus. Das liegt daran das der IE 6 :hover nur in Verbindung mit a kennt. Mit li:hover kann er nix anfangen.
Mit etwas Javascript bekommen wir das in den Griff. Damit ist es möglich den li-Elementen bei onmouseover eine Klasse .sfhover hinzuzufügen, die dann per CSS angesprochen werden kann.
Bitte einen weiteren Conditional Comment hinzufügen:





Bitte CSS ergänzen:


#navi li:hover ul,
#navi li.sfhover ul  {
 left:auto;
}


Jetzt ist auch im IE 6 alles in Ordnung.
Inspiriert von: Fortgeschrittene CSS-Techniken



Grafische Navi 1
Klaus — Mon, 17 Aug 2009 13:57:37 +0000
Ziel dieses Tutorials ist es, ein horizontales Menü zu erstellen, welches komplett aus Hintergrundgrafiken besteht. Damit das Menü bei abgeschalteten Grafiken noch funktioniert, wird der Linktext ganz normal in den Quelltext geschrieben.
Die Grafiken werden mithilfe der Image Replacement Technik nach Gilder/Levin über den Linktext geschoben.
Mit dem Grafikprogramm eurer Wahl erstellt ihr zuerst eine Grafik, welche beide Linkzustände beinhaltet (normal u. hover).


Ein Linkzustand ist 140x40px groß.
Die gesamte Grafik hat die Maße 140x80px.


Oben in der Grafik hockt der Normalzustand des Links und darunter der Hoverzustand.
So schaut eine Grafik aus:

Hier findest du die grafischesmenue_anfang.htm zum Quelltext rauskopieren.
Die benötigten Grafiken kannst du dir hier holen: grafischesmenue_grafiken.htm
Im Browser schaut es so aus:

Vor dem Linktext werden wieder leere spans eingesetzt, die später

die Hintergrundgrafik zugewiesen bekommen.
XHTML ergänzen:



Startseite 
Galerie 
Kontakt 



Bei der aktuellen Seite ist a gegen strong ausgetauscht worden, damit der Link nicht auf sich selber zeigt.
Jetzt geht’s ans gestalten.
CSS ergänzen:


li  {
float:left;
width:140px;
}
a, strong  {
position:relative;
display:block;
width:100%;
height:40px;
text-decoration:none;
font-weight:normal;
overflow:hidden;
}


a und strong haben position:relative; bekommen, damit sich das später absolut positionierte span mit der HG-Grafik daran orientieren kann.
Sie werden zu Blockelementen erhoben und kriegen die Breite von li und die Höhe der halben Grafik (ein Zustand halt!). overflow:hidden ist dafür, damit der Linktext des Markup’s bei Schriftvergrößerung nicht darunter hervorlugen kann.
Bitte CSS ergänzen:


#navi #navi01 a span  {
 position:absolute;
width:100%;
height:40px;
top:0;
left:0;
background:url(startseite.png) no-repeat 0 0;
}


#navi #navi02 a span  {
 position:absolute;
width:100%;
height:40px;
top:0;
left:0;
background:url(galerie.png) no-repeat 0 0;
}


#navi #navi03 a span  {
 position:absolute;
width:100%;
height:40px;
top:0;
left:0;
background:url(kontakt.png) no-repeat 0 0;
}


Der Normalzustand der Links ist definiert worden. Die obere Hälfte der Grafik mit dem Normalzustand ist sichtbar. Durch position:absolute; verdeckt die Grafik den Linktext.
Bitte CSS ergänzen:


#navi #navi01 strong span  {
 position:absolute;
width:100%;
height:40px;
top:0;
left:0;
background:url(startseite.png) no-repeat 0 -40px;
}


#navi #navi02 strong span  {
 position:absolute;
width:100%;
height:40px;
top:0;
left:0;
background:url(galerie.png) no-repeat 0 -40px;
}


#navi #navi03 strong span  {
 position:absolute;
width:100%;
height:40px;
top:0;
left:0;
background:url(kontakt.png) no-repeat 0 -40px;
}


Da bei dem Link der aktuellen Seite jeweils a durch strong ersetzt wurde, damit der Linktext der aktuellen Seite immer hervorgehoben ist, musste die CSS entsprechend geändert werden. Für strong wird der untere Teil der Grafik ins Bild gehoben.
Bitte CSS ergänzen:


#navi #navi01 a:hover span,
#navi #navi01 a:focus span,
#navi #navi01 a:active span,
#navi #navi02 a:hover span,
#navi #navi02 a:focus span,
#navi #navi02 a:active span,
#navi #navi03 a:hover span,
#navi #navi03 a:focus span,
#navi #navi03 a:active span  {
background-position:0 -40px;
}


Der untere Teil der Grafik wird durch das hovern per background-position ins Bild geschoben. Jetzt müssen wir den Float noch clearen und schauen ob der IE ein Problem hat.
Bitte im Quelltext direkt vor  folgendes notieren:



Bitte CSS ergänzen:


.clear  {
clear:both;
height:0;
width:0;
visibility:hidden;
border:0;
}


Jetzt sollte es so ausschauen:

Mmh.., und damit ist auch der IE einverstanden?
Der IE8 ja, der IE 6 und der IE 7 nö!
Die zwei zeigen unter den Menüpunkten eine Lücke. Außerdem haben sie vergessen beim hovern aus dem Pfeil eine Hand zu machen.
Beim IE 6 bleiben außerdem die Menüpunkte nach dem hovern in der gehoverten Position stehen.
Ein paar kleine Eintragungen im Conditional Comment schaffen da Abhilfe
Bitte den Conditional Comment ergänzen: