Tutorial: Ein responsives Menü mit jQuery für die HsH

Im Studiengang Informationsmanagement an der Hochschule Hannover sind im Rahmen des Kurses Entwicklung von Multimediasystemen II (Sommersemester 2017, Prof. Dr.-Ing. Steinberg) einige gute, funktionale Animationen samt Tutorials entstanden. Verwendete Techniken sind HTML5, CSS3 und JavaScript.

Die besten Tutorials stellen wir euch hier in den nächsten Wochen nach und nach vor.

Ein responsives Menü mit jQuery für die HsH

Autor: Jan Jäger

Planung

Ziel des Projekts war ein kleines Menü für eine Homepage zu schaffen. Dieses sollte die folgende Funktionalität haben:

Ausklappen des Menüs
Hervorhebung der Menüpunkte
Änderung des Inhalts
responsives Design

Umsetzung

Ausklappen des Menüs

Das Menü ist standardmäßig versteckt. Eingeblendet wird es durch eine Schaltfläche. Hierfür wurde das aktuell populäre Hamburger-Menu-Icon (≡) verwendet.^[1] Zusätzlich lässt sich das Menü auf diese auch wieder ausblenden. Ansonsten wird das Menü ausgeblendet, sobald ein Menüpunkt angeklickt wird.

Hervorhebung der Menüpunkte

Als beispielhafte Menüpunkte wurden die fünf Fakultäten der Hochschule Hannover gewählt. Zusätzlich ist das ‘Dach’ durch einen Klick auf den Schriftzug ‘Hochschule Hannover University of Applied Sciences and Arts’ im Banner (wieder) erreichbar.

Die Hervorhebung der Menüpunkte geschieht bei mouseover. Ohne Mauszeiger, also beispielsweise auf Smartphones, ist dieser Effekt daher nicht zu sehen. Für die Hervorhebung selbst wurde die Opazität verwendet.^[2] Hierdurch kann ein Element trüb dargestellt werden.

Die Menüpunkte sind standardmäßig auf eine Opazität von 0.5 gestellt und werden bei mouseover auf 1.0 gesetzt und bei mouseout wieder auf 0.5 zurückgesetzt. Für das Banner sind die Werte genau umgekehrt gewählt.

Zusätzlich zur Opazität wurde überlegt auch noch die Größe der Menüpunkte zu ändern. Dies wirkte jedoch zu unruhig.

$("#fak3").mouseover(function() {
    $("#fak3").animate({
        padding: '10px',
        margin: '0px',
        opacity: '1.0'
    }, 500);
});

Änderung des Inhalts

Der Inhalt wird durch click auf einen Menüpunkt bzw. auf den oben erwähnten Schriftzug im Banner geändert. Geändert wird dann der Inhalt im content.^[3] Gleichzeitig wird das Menü wieder zugeklappt.

Zusätzlich zum Inhalt wird auch die Farbe des Banners geändert, um dem Nutzer zu veranschaulichen auf welcher Seite er sich aktuell befindet. (Hierzu mehr bei der Erläuterung zu den verwendeten Bibliotheken.)

Zu Anfang sollte auch der Inhaltsbereich beim Wechsel des Inhalts aus- und wieder eingeblendet werden. Dies wirkte jedoch insgesamt zu unruhig, da parallel bereits das Menü eingeklappt wird. Zudem hätte noch eine Möglichkeit gefunden werden müssen, eine Pause für den Wechsel des Inhalts einzufügen. Bei der getesteten Variante wurde der Inhalt bereits gewechselt, bevor der Inhaltsbereich komplett ausgeblendet wurde.

$("#content").slideUp(500);
// Code zum Wechseln des Inhalts
$("#content").slideDown(500);

Responsives Design

Die ganze Seite sowie speziell das Menü verhalten sich bei unterschiedlicher Seitenbreite quasi responsiv. Während dies für das Banner sowie den Inhaltsbereich noch vergleichsweise einfach war, weil diese direkt in Abhängigkeit der Elternelemente formatiert werden können, wurde sich vor allem auf das Menü konzentriert.

Üblich ist aktuell die Verwendung von Media Queries, also beispielsweise

@media (min-width: 900px) {
    /* anzupassende Elemente */
}

@media (min-width: 600px) {
    /* anzupassende Elemente */
}

@media (min-width: 300px) {
    /* anzupassende Elemente */
}

Dabei hätte in diesen Media Queries u.a. die Höhe und Breite der Menüpunkte in Abhängigkeit von der Seitenbreite gesetzt werden müssen. Dies hätte jedoch dazu geführt, dass das Menü nicht immer – wie gewünscht – die volle zur Verfügung stehende Breite einnimmt. Deswegen wurde bewusst der eher klassische Weg über JavaScript gewählt. Dies hatte dann auch noch den kleinen Nebeneffekt, dass das Menü durch die Neuberechnung bei Größenänderungen des Browserfensters quasi dynamisch seine Größe ändert. Im eigentlichen Sinne ist dies natürlich keine Animation.

Ursprünglich sollte auch noch die Schriftgröße dynamisch angepasst werden, damit die vollständige Beschriftung zu sehen ist.

if(pageWidth <= 480){
    $(".menu").css("fontSize", (pageWidth / 40) + "px");
}
else{
    $(".menu").css("fontSize", "15px");
}

Dies führte jedoch dazu, dass die Schrift im Menü im Vergleich zur Schrift in allen anderen Bereichen ziemlich klein gesetzt werden musste. Stattdessen wurde deswegen der Text mittels CSS ‘abgeschnitten’.

overflow: hidden;

Code

HTML + CSS

Es wurde ein eigenes HTML-Grundgerüst geschrieben und dieses mit CSS angepasst.

JS

Es wurden zwei Bibliotheken verwendet und zusätzlich eigener Code geschrieben.

Bibliotheken

Zur Umsetzung des Projekts wurden die folgenden Bibliotheken verwendet:

Ursprünglich sollte nur jQuery verwendet werden. Die Farbänderung im Banner war damit jedoch nur abrupt möglich. Gewünscht war jedoch ein fließender Übergang, also von einer Farben zur nächsten.

Dies hätte zwar auch mit @keyframes in CSS erreicht werden können. Dies hätte jedoch zu einer Vermischung von Methoden geführt, da die @keyframes noch mittels JavaScript zum Banner hinzugefügt werden müssen. Außerdem wäre dies sehr umfangreich gewesen, da in Abhängigkeit der Anzahl der verwendeten Farben im Banner eine Vielzahl @keyframes benötigt worden wäre. Genauer gesagt hätte es bei Verwendung von n Farben n * (n - 1) = n² - n @keyframes benötigt, also bei den hier verwendeten 6 Farben 6 * (6 - 1) = 6 * 5 = 30 @keyframes.^[4] Zusätzlich hätte es auch noch eine Menge JavaScript-Code benötigt, um die @keyframes zum Banner hinzuzufügen. Es muss ja für die Auswahl des richtigen @keyframes sowohl die Ausgangs- als auch die gewünschte Zielfarbe bestimmt werden müssen. Zusätzlich müssen die @keyframes so eingestellt werden, dass die Animation am Ende automatisch stoppt und nicht immer wieder von vorne beginnt. Dazu bedarf es dem folgenden CSS-Code:

animation-fill-mode: forwards;

Eine eventuelle Erweiterung des Menüs wäre dadurch nur mit sehr viel Aufwand möglich. Insgesamt wurde diese Variante als zu umfangreich angesehen. Nach Rücksprache mit Frau Steinberg wurde dann letztlich auch noch jQuery UI eingebunden, das die gewünschte Funktionalität mitbringt. Hier bedarf es nur einer Zeile JavaScript-Code pro Zielfarbe, unabhängig von der Ausgangsfarbe.^[5] Um beispielsweise die Farbe des Banners in Richtung der Fakultät I zu ändern, muss nur die folgende Zeile JavaScript-Code eingefügt werden.

$("#header").animate({backgroundColor: "rgb(30,190,235)",}, 1000 );

Eigener Code

Am Ende wurde auch noch eigener JavaScript-Code geschrieben, um das Menü automatisch in abhängig von der Seitenbreite anzupassen. Dazu wurde zunächst eine globale Variable definiert, in die die Seitenbreite geschrieben wird. Mit dieser wird dann die selbst geschriebene Funktion menuWidth() aufgerufen, die die gewünschte Höhe und Breite der Elemente des Menüs berechnet und in diese schreibt. Bei Änderungen an der Seitenbreite, z.B. durch Größenänderung des Browserfensters, würde dies jedoch bestehen bleiben. Deswegen wurde zusätzlich ein EventListener definiert, der bei Änderungen der Seitenbreite diese abfragt und die Funktion menuWidth() erneut aufruft.

Ergebnis

See the Pen menu for HsH by Jan Jäger (@jaegerjan) on CodePen.

https://production-assets.codepen.io/assets/embed/ei.js

[1] Nähere Informationen z.B. in der Wikipedia: https://de.wikipedia.org/wiki/Hamburger-Men%C3%BC-Icon.

[2] Nähere Informationen z.B. in der Wikipedia: https://de.wikipedia.org/wiki/Opazit%C3%A4t.

[3] Um dies zu simulieren wird nur die Überschrift mit der ID greetings geändert. Prinzipiell müsste stattdessen Inhalt nachgeladen und in div-Element mit der ID content geschrieben werden.

[4] Es liegt quadratisches Wachstum vor.

[5] Es liegt lineares Wachstum vor.