• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

verschachtelte Navigation - html-Teil richtig?

Xeno

Mitglied
Liebe Ratgeberinnen und Ratgeber

Ich bin daran die Navigation meiner Homepage ( Michael Ritter ) auszubauen. Das Ziel ist eine verschachtelte Navigation, wobei die Unterpunkte (nur) beim Hovern ausgeklappt und sonst unsichtbar sein sollen. Die oberste Navigationsleiste soll horizontal sein. Das Ganze soll nur mit HTML und CSS realisiert werden (also ohne Javascript oder Gröberes).

Es geht mir nicht darum, dass Ihr mir das baut8). Ich habe bei der Lektüre der verschiedenen Tutorials jedoch gemerkt, dass das nicht eine ganz triviale Aufgabenstellung ist. Ich möchte nun schrittweise vorgehen und habe vorerst folgende rein html-bezogene Frage:

Wenn ich es richtig verstanden habe, beruht der HTML-Code solcher fortgeschrittenen Navigationsleisten darauf, dass Listen ( <ul> ) verschachtelt werden können, d. h. Listen können (Unter-)Listen enthalten. Die Verschachtelung erfolgt so, dass die Unterliste in ein Listenelement der Oberliste "eingepackt" ist, so dass die Reihenfolge <ul> <li> <ul> <li> usw. entsteht.

Die konkrete Bitte ist nun, den HTML-Code meiner Testseite ( http://www.michaelritter.ch/testseite.htm ) dahingehend zu prüfen, ob er sich eignet, um daraus (mit CSS) dann eine komplexe Navigation der gewünschten Art zu bauen. CSS ist auf der Testseite bewusst "abgeschaltet". Der Code (aufs Themenrelevante verkürzt) lautet:

HTML:
<html>
<head>
</head>
<body>
<ul id="navigationsleiste">
<li id="aktiv">
<span>Hauptseite</span>
</li>
<li>
<a href="http://www.michaelritter.ch/politik.htm">Politik&gt;</a>
<ul>
<li>
<a href="http://www.michaelritter.ch/politik2.htm">Biographie</a>
</li>
</ul>
</li>
<li>
<a href="http://www.michaelritter.ch/vereine.htm">Vereine&gt;</a>
<ul>
<li>
<a href="http://www.michaelritter.ch/radioemme.htm">Radio Emme</a>
</li>
<li>
<a href="http://www.michaelritter.ch/dampflokfest.htm">Dampflokfest</a>
</li>
</ul>
<li>
<a href="http://www.michaelritter.ch/links.htm">Links</a>
</li>
<li>
<a href="http://www.michaelritter.ch/kontakt.htm">Kontakt</a>
</li>
<li>
<a href="http://www.michaelritter.ch/changelog.htm">Changelog</a>
</li>
<li>
<a href="http://www.michaelritter.ch/impressum.htm">Impressum</a>
</li>
</ul>
</body>


Ich danke für die ggf. kritische Review!

Wer einen Gratistipp für die Weiterarbeit (also fürs CSS) hat, dem verbiete ich nicht ihn zu geben!

Lg Xeno
 
Werbung:
Werbung:
Zusammen mit absoluter Positionierung sollte das funktionieren und auch keine Scrollbalken erzeugen. Dieser Weg sollte zudem bevorzugt werden da die Arbeit mit display zum Aus- und Einblenden einen Nachteil bei Suchmaschinen erzeugt. Die können zwar wenig CSS lesen, aber ein per "display: none;" ausgeblendetes Element ist immer ein Zeichen für Spam aus Sicht von Suchmaschinen. Die Verwendung von
visibility hat wiederum den Nachteil, dass das Element nicht komplett rausgenommen sondern lediglich ausgeblendet wird - es nimmt immernoch den Bereich ein den es einnehmen müsste, wenn es eingeblendet wäre. Das kann für manche Designs von Nachteil sein.
 
Code:
left:-9999px;

So etwas ist Pfusch, weil es Scrollbalken im Browser erzeugt, die dann einem overflow:hidden abgeschaltet werden müssen.

In erster Linie möchte ich die Screenreader nicht vernachlässigen und Sehbehinderten die Möglichkeit geben auf der Navigation zugreifen zu können. Wenn bei zu kleinem Viewport Scrollbalken erscheinen, ist es nur folgerichtig und somit können die Cursor-tasten benutzt werden.
Also . Pfusch?
 
Werbung:
Herzlichen Dank für die interessanten Postings! Da es ursprünglich nur ums HTML ging und dieses unbestritten in Ordnung ist, schlage ich vor, den Fred hier mal fürs Erste zu schliessen.

Ich habe inzwischen beispiellos im CSS herumgewütet:oops: und bin nun gewissermassen an einem toten Punkt angelangt, wobei ich selber aber staune, was ich bisher alles hinbiegen konnte - aber ganz alles nicht. Problematischer ist wahrscheinlich, dass ich meinen CSS-Code nicht restlos verstehe (was ich aber möchte).

Vorschlag: Ich eröffne ein en neuen Fred im CSS-Foirum, wo das Problem jetzt eindeutig hingehört. Bitte noch kurz warten, ich muss die aktuellste Version der Textseite und das Test-CSS noch hochladen und so.

Ich finde das mit der ausklappbaren horizontalen Navigation übrigens nach wie vor recht anspruchsvoll!

Besten Dank nochmals an die Poster in diesem Fred.

Lg Xeno
 
Zurück
Oben