Kategorien
Design HTML/CSS JavaScript & jQuery Programmierung

Makisu – Sushi-inspiriertes CSS 3D Navigations-Konzept mit jQuery

In den vergangenenen Monaten sind immer wieder mal CSS-Experimente in den Umlauf gebracht worden. Mir persönlich gefiel bis zum heutigen Tage stets Paperfold CSS am besten, aber auch Meny und andere, eher spielerische Ansätze stellten wir unseren Lesern vor. Makisu, ein ganz frisches Konzept für eine Dropdown-Navigation mit 3D Transforms, hat in meiner Gunst nun Paperfold CSS abgelöst; selten sowas schickes gesehen.

Makisu – die virtuelle Bambusmatte

Justin Windle aka soulwire aus dem Vereinigten Königreich legt mit Makisu ein Konzept für eine dreidimensionale Dropdown-Navigation vor, die Paperfold CSS ähnelt, aber darüber hinaus geht und auch optisch ausgereifter wirkt. Der merkwürdige Name entstammt dem Japanischen. Als Makisu werden Bambusmatten bezeichnet, mit deren Hilfe spezielle Sushi-Sorten hergestellt werden. Makisus können aber auch simpel zum Auspressen überschüssiger Feuchtigkeit aus etwa Früchten verwendet werden.

Justin Windles Makisu ist zwar weder für die Herstellung von Sushi, noch für das Auspressen von Früchten geeignet, zeigt aber optisch deutlich, warum der Name dennoch gerechtfertigt ist. Die Navigations-Dropdowns enthalten pro Zeile ein Item, das ein- und ausgerollt werden kann, wobei die Animation beim Entrollen nach hinten überschwingt und so tatsächlich einer nach unten ausrollenden Bambusmatte ähnlich sieht.


Screenshot während der laufenden Animation

Makisu ist als CSS-Konzept angelegt und verwendet CSS 3D Transforms, weshalb es derzeit nur in den aktuellen Versionen Chromes, des Firefox, Safaris, iOS und Android, sowie Blackberry, jeweils in deren Standardbrowsern, funktioniert. Auch der aktuelle Internet Explorer 10 soll Makisu darstellen können. Auf einem frischen Ultrabook, das ich derzeit teste, probierte ich es aus. Das Ergebnis ist durchwachsen. Das Ein-und Ausklappen der virtuellen Bambusmatte funktioniert zwar, aber der Nachschwingeffekt ist komplett abwesend. Zudem wirkt die ganze Animation schwerfällig. Der Internet Explorer bleibt sich also auch in seiner neuesten Inkarnation treu. Schön, wenn auf etwas Verlass ist.

Um Makisu einfacher einsetzbar zu gestalten, verpackte Windle die Funktionalität in ein jQuery-Plugin. In der Tat ist es auf diese Weise sehr simpel zu implementieren. Nachdem jQuery und das Plugin im Head des HTML-Dokumentes aufgerufen wurden, ist lediglich noch der Function-Call erforderlich. Dieser sieht in einer einfachen Variante so aus:

$( '.list' ).makisu({
    selector: 'li',
    overlap: 0.2,
    speed: 0.8
});

Die wichtigste Angabe stellt die Wahl des Selektors dar. In der Regel wird man hier das auch ansonsten zu Navigationszwecken etablierte Li-Element wählen. Die anderen Optionen befassen sich mit Geschwindigkeit und Überlappung. 3D-Effekte werden über die perspektivische Verzerrung mittels perspective und über Vertex Shading mit shading erzielt.

Makisu steht auf Github zum Download und zur kostenfreien Verwendung bereit. Es ist erst seit wenigen Tagen erhältlich und stellt ein Konzept dar. Vor dem Produktiveinsatz muss daher gewarnt werden. Aber schick aussehen tut es allemal…

Links zum Beitrag:

Von Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design.

5 Antworten auf „Makisu – Sushi-inspiriertes CSS 3D Navigations-Konzept mit jQuery“

Schreibe einen Kommentar

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