Sprung zum Inhalt

Webdesign nach Maß von webdesign weisshart

Mein Blog

RSS Feed AbonnementRSS 2.0 Feed

zum Archiv und den Kategorien

Menü unten?

Mittwoch, 27. Februar 2008

Das Menü gehört mit zu den wichtigsten Komponenten einer Website. Kein Zweifel. Und deshalb befindet es sich auch immer oben, links oder rechts, auf jeden Fall aber »above the fold«, ist also ohne Scrollen sichtbar.
Nutzer von Screen Readern, PDAs und Handys, sowie Suchmaschinen sind diesbezüglich ganz anderer Meinung. Sie hätten gerne das Wichtigste, nämlich den Inhalt, zuerst.
Die Lösung, um Alle zu bedienen: Das Menü kommt im markup, im Quelltext, ans Ende, und wird per CSS in die linke oder rechte Navigationsspalte positioniert. Damit die oben erwähnten Nutzergruppen das Menü leicht erreichen, gibt es einen skip link ganz am Anfang der Seite, um das Menü direkt anzuspringen. Zu erreichen (zu sehen) ist dieser skip link mit der Tab-Taste.
Ich hab' jetzt mal etwas anderes probiert: Auf dieser Seite bleibt die Navigation unten. Aus Designgründen.
Schön. Und gewagt. Wenn das Browserfenster des Besuchers, warum auch immer, so klein ist, dass er das Menü nur durch Scrollen erreicht? Ist das nicht irritierend?
Nein!
Denn in diesem Fall wird das Menü eben oben angezeigt.
Ich erreiche dies durch ein pfiffiges Javascript. Danke an SELFHTML
(Sollte Javascript nicht verfügbar sein, bleibt das Menü eben unten. Aber die Seite funktioniert weiterhin.)

Nachtrag: Hab' ich eigentlich erwähnt, daß der IE das natürlich nicht kann?



6 Kommentare

  1. Endlich mal jemand, der das Menü dahin setzt, wo es vom Lesefluß her hingehört: unten. Auf www.rosenwelten.de habe ich es auch versucht, und ich bin derselben SELFHTML-Anleitung zu Dank verpflichtet. Habe die Sichtbarkeit des Menüs auf kleineren Bildschirmen so zu lösen versucht, daß per javascript die Höhe des Inhaltsbereichs auf Fensterhöhe minus Menühöhe gesetzt wird. Weiß nicht, ob es schon optimal ist, bin dankbar für Hinweise.

    Kommentar von Bernhard Höpfner — Donnerstag, 20. März 2008 - 7:59 Uhr

  2. @ Bernhard Höpfner

    Interessanter Ansatz. Aber irgendwie scheint das nicht zu klappen. Ich kann keinerlei Effekt sehen. Das Menü ist und bleibt unten, und ist nur durch Scrollen erreichbar. Oder hab' ich da was falsch verstanden?

    Gruß Fritz

    Kommentar von Fritz — Donnerstag, 20. März 2008 - 15:40 Uhr

  3. @ Fritz
    Danke, daß Du es Dir angeschaut hast!
    Ich hab in der Eile zuviel versprochen, sry. Bisher sollte eigentlich nur bewirkt werden, daß das Menü an den unteren Fensterrand kommt, auch wenn mal wenig Text auf einer Seite steht.
    <div style='min-height:" + Menuehoehe + "px;'>
    Mit der Zeit wurden fast alle Seiten so lang, daß das gar nicht mehr nötig wäre. Das andere habe ich gerade eben mal versucht,
    <div style='max-height:" + Menuehoehe + "px;overflow:scroll;'>
    es müßte schon auch gehen, nur muß ich noch den dummen waagrechten Scrollbalken wegkriegen.

    Viele Grüße Bernhard

    Kommentar von Bernhard Höpfner — Donnerstag, 20. März 2008 - 22:27 Uhr

  4. Hallo Bernhard,

    wie wär's mit overflow:auto, oder, noch besser, ganz weglassen, weil auto der default-Wert für overflow ist.
    PS: Wenn du hier Code-snippets eingibst, dann bitte die spitzen Klammern maskieren (durch entities ersetzen), wie auch über dem Kommentar-Eingabefeld angemerkt.

    Kommentar von Fritz — Donnerstag, 20. März 2008 - 22:52 Uhr

  5. Hallo Fritz,
    ohne overflow-Angabe dehnt mir der Firefox 2.0 den Inhaltsbereich einfach nach Bedarf aus und schreibt den Inhalt über das am unteren Rand positionierte Menü obendrüber, das sieht richtig schrecklich aus ;-)
    Vorerst laß ich das Menü trotzdem unten. Oben können die Besucher blättern, im übrigen mache ich eine Seite eher zum lesen und anschauen als zum rumklicken, aber da wirds jetzt Proteste geben ;-)
    Über Ostern muß ich mich bei Dir mal in Ruhe umschauen. da gibts ja sooo viel zu lernen!
    Viele Grüße Bernhard

    Kommentar von Bernhard Höpfner — Samstag, 22. März 2008 - 15:42 Uhr

  6. Hallo Fritz,
    das Menü unten hat mich nicht in Ruhe gelassen. Nachdem ich erst alles verschlimmert hatte, hab ichs genau so gemacht wie oben angesprochen:
    min-height und max-height per javascript auf den Wert der aktuellen Fensterhöhe minus Höhe des Fußmenüs gesetzt. overflow:auto dazu und alles stimmt. Außer beim IE.
    Den Workaround für einen festen Footer beim IE, den SelfHTML (http://aktuell.de.selfhtml.org/artikel/css/footer/index.htm) beschreibt, kriege ich nicht hin: der Inhalt wird einfach immer über den Fuß drübergeschrieben.
    Danke Dir für viele gute Anregungen von Deiner Seite!
    Viele Grüße Bernhard

    Kommentar von Bernhard Höpfner — Donnerstag, 27. März 2008 - 15:45 Uhr

Einen Kommentar abgeben

Damit Code-Beispiele richtig angezeigt werden, müssen Sonderzeichen maskiert werden (z.B. < zu &lt;).


(notwendig)

(notwendig)

Spamschutz:
Je nach Inhalt wird Ihr Kommentar eventuell nicht sofort angezeigt, sondern muss manuell freigeschaltet werden.

Archiv:

Kategorien:

Creative Commons Lizenzvertrag
Alle Texte (nicht Bilder!) Creative Commons CC BY-NC-SA 3.0 DE