Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Umfangreiche Navigationen auf Smartphones benutzerfreundlich darzustellen ist gar nicht so einfach. Zwar ist es normalerweise problemlos möglich die Darstellung für den kleinen Bildschirm anzupassen – beispielsweise indem man alle Links untereinander abbildet – dann muss der Besucher aber erst über eine lange Liste an Links hinwegscrollen um den Content zu erreichen. Insbesondere bei Blogs will der Besucher aber häufig den neuesten Artikel lesen und nicht erst die Navigation sehen.
Das winzige jQuery-Plugin TinyNav wandelt ausgewählte Listen in Select-Listen um. Die sparen Platz und lassen sich auch auf Smartphones einfach bedienen.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug.

Geringe Dateigröße, einfache Handhabung

Das Plugin ist gerade einmal 304 Bytes groß und lässt sich kinderleicht in die Website integrieren. Nachdem jQuery und TinyNav.js geladen wurden, muss die gewünschten Liste (ul oder ol) mit einer ID ausgezeichnet werden. Anschließend wird die ID an das Plugin übergeben und die Liste kann wie gewohnt per CSS gestaltet werden.

Das Plugin selbst nutzt die Klasse .tinynav, die ebenfalls über CSS angesprochen werden kann, und mit Hilfe von Media Queries ein- und ausgeblendet wird.

TinyNav funktioniert laut Entwickler in folgenden Browsern: Internet Explorer 6,7,8,9, Firefox 6,8, Safari 5, Chrome 15, Opera 11.5, iOS Safari, Opera Mobile 10.1, Opera Mini for iOS, IE7 Mobile, Firefox Mobile, Android browser, Kindle browser

Ein vergleichbares, allerdings etwas größeres Script ist übrigens „Responsive-Menu“. Solltet ihr mit TinyNav nicht zurecht kommen, lohnt es sich auch diese Lösung einmal anzuschauen.

Geschrieben von Jonas

thumb

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, Grafik sowie Frontend- und WordPress-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Seminare mit Jonas Hellwig anzeigenJonas Hellwig bei Xing

Feedback & Ergänzungen – 5 Kommentare

  1. Michael Thurow
    schrieb am 19.12.2017 um 10:17 Uhr:

    Tinynav setzen wir schon eine Weile ein – funktioniert gut. Jetzt ist unser Menü aber stärker verschachtelt und läßt sich am smartphone nicht mehr so gut bedienen. Wir wollen deshalb auf dem smartphone die 3. Ebene nicht mehr anzeigen. Wie macht man das?

    Antworten
  2. Felix
    schrieb am 06.02.2012 um 15:10 Uhr:

    Bei den von dir vorgestellten Skripten gefällt mir nicht, dass dafür die Bibliothek jquery benötigt wird, denn diese 90 kB verlängert die Ladezeit auf einem Smartphone zum Teil massiv.
    Ich würde daher eine zusätzliche Navigation einbauen, die nur auf Smartphones angezeigt wird. Ein Beispiel für so eine Navigation habe ich hier gefunden: http://www.cs.tut.fi/~jkorpela/forms/navmenu.html (die zweite Variante mit Java Skript).
    Wie beurteilst du meine Aussage bzw. Lösung?

    Antworten
  3. Felix
    schrieb am 06.02.2012 um 13:19 Uhr:

    Kann man so ein Navigations Menü auch ohne Skript erstellen?

    Antworten
    • Jonas Hellwig (Autor)
      schrieb am 06.02.2012 um 14:09 Uhr:

      @Felix: Nicht, dass ich wüsste. Es werden ja ganze HTML-Elemente verändert. Natürlich wäre es auch möglich beide Varianten vorzubereiten und dann je nach Endgerät eine andere Navigation zu implementieren.

      Antworten

Schreibe einen Kommentar zu Jonas Hellwig Antworten abbrechen

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Design-Projekte mit kulturbanause

Unsere Leinwand ist der Browser und wir beschäftigen uns seit 2010 intensiv mit dem Thema Responsive Design. Wir realisieren flexible Web-Layouts und modulare Design Systeme.

Responsive Webdesign-Leistungsangebot →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →