Mobiles Menu ganz leicht

Mobiles Menu ganz leicht - Mobiles Menu für die Georgienseite. Lösung über Umschalter und Hover Effekt. Sehr wenig Ladezeit.

Mobiles Menu für die Georgienseite. Lösung über Umschalter und Hover Effekt. Sehr wenig Ladezeit.

Thomas Berscheid
⌨ 15.06.2016 um 16:09:00

Die Georgienseite war im Jahr 2014 mein erstes großes Projekt mit TYPO3. Ich hatte das Design der früheren Seite übernommen und den Quelltext auf HTML5 umgestellt. Responsiv war die Georgienseite nicht. Nun gibt es eine neue Version der Georgienseite, und die ist responsiv aufgebaut. Und während ich bei einem früheren Projekt mit dem Bootstrap Framework herumgespielt habe, bin ich nun auf eine eigene Entwicklung umgestiegen.

Meine Allergie gegenüber Bootstrap habe ich im Oktober 2015 entwickelt. Seinerzeit stellte unser Telekommunikationsdienstleister unseren Anschluss auf Glasfaser um. Es dauerte drei Tage, in denen wir auf lahmes mobiles Internet zurückgreifen mussten. In diesen Tagen habe ich gemerkt, wie lange es braucht, bis Frameworks geladen sind und man überhaupt erstmal irgendwas auf einer Webseite sieht.

Nun ist die Georgienseite also in einer responsiven Art ins Internet gegangen, die sehr simpel ist. Ich habe 5 Media Queries an verschiedenen Stellen der Style Sheets eingebaut und ordne die Elemente der Seite entsprechend an. Es gibt zwei Breiten, die die DIVs der verschiedenen Seitenelemente übernehmen.

Etwas schwieriger gestaltete sich die Navigation. Mir schwebte etwas ähnliches wie bei Bootstrap vor, allerdings leichter. Ich habe also einen Button vor die eigentliche Navigation geschaltet, der per Media Query sichtbar geschaltet wird. Dazu habe ich eine JavaScript-Funktion geschrieben, die die Navigation raumsparend per Click ausfährt und einklappt. Das war es. Keine riesigen Bibliotheken, kein Wasserkopf an Quelltext. Insgesamt 20 Seiten zusätzlicher Quelltext.

Es muss nicht immer der dicke Bomber sein. Manchmal tut es auch etwas Nachdenken, viel testen und eine ganz leichte Lösung.

Kategorie ‣
Frontend

Blog der Agentur IBK

Der Blog der Internetagentur Irma Berscheid-Kimeridze. Webseiten mit TYPO3 und Wordpress. Tutorials zur Installation und Konfiguration von TYPO3. Anleitungen, Tipps und Erfahrungen zu Wordpress Themes und Wordpress Plugins. SEO für TYPO3 und weiteres Wissen zur Suchmaschinenoptimierung.

Thomas Berscheid ⧉ 01.08.2020