MM-SYS-2TutorialWebentwicklung

Tutorial: Ein animiertes Menü im Stil von Googles “floating menu”

Google Floating Menü Erweiterung

Autor: Birte Rohden

Als Prüfungsleistung für den Kurs “Entwicklung von Multimedia-Systemen II” im Sommersemester 2017 (Hochschule Hannover, Studiengang Informationsmanagement) sollten die Studierenden eine funktionale Animation entwickeln und folgend ein Tutorial für ebenjenes schreiben. Konzept dieser Animation war, Googles “floating menu”, wie es vor allem auf Smartphones bekannt ist, nachzubauen und diesem als Bonus in seinen Menüpunkten kleine CSS-Animationen zuzufügen.

Variante 1

Zunächst ist nur der Menü-Button zu sehen, er ist erkennbar durch die klassischen “Burger-Menü”-Streifen. Klickt man auf den Button, triggert dies eine jQuery-Funktion, die den Menü-Punkten und dem Button bestimmte CSS-Klassen zuweist. So wird aus den “Burger-Menü”-Streifen ein X, dies geschieht unter Verwendung der CSS-Eigenschaft “transform”, und die Menü-Punkte fahren von unterhalb des Menü-Buttons aus. Zudem ermöglicht eine Key-Frame-Animation, dass neben den Menü-Punkten der jeweils beschreibende Text der Funktion des Menü-Punktes erscheint.

Variante 2

Bei Klick auf die Menü-Punkte wird jeweils eine jQuery-Funktion getriggert, die die CSS-Klassen für die jeweilige Key-Frame-Animation setzt. Eine “setTimeOut”-Funktion löscht ebenjene Klassen nach einer Sekunde, da alle Animationen jeweils eine Sekunde dauern. Die genannten Animationen sind hier “Flipping”, sodass alle Buttons sich einmal nach vorne hin umdrehen; “Bouncing”, das bedeutet, dass alle Buttons hüpfen; und “Shaking”,  sodass alle Buttons sich schütteln.

Umgesetzt wurden zwei Varianten, je nach Vorliebe können die Menüpunkte oberhalb des Menü-Buttons oder links neben dem Menü-Button erscheinen. Der Code unterscheidet sich bei den beiden Varianten lediglich in den Positionsangaben.

 

Den Code für die Variante 1, dem nach oben ausfahrenden Menü, finden Sie hier: https://codepen.io/anon/pen/wqaYWy

Den Code für Variante 2, dem zur Seite ausfahrenden Menü, finden Sie hier: https://codepen.io/anon/pen/NvqORz

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.