Off-Canvas-Layouts

© Internet Magazin

Für die Desktop-Version einer Website steht üblicherweise viel Platz zur Verfügung, sodass man Inhalte nebeneinander oder mehrspaltig anordnen kann. Passt man sie im Rahmen eines responsiven Webdesigns für kleinere Bildschirmgrößen an, so ist eine mehrspaltige Darstellung nicht sinnvoll; stattdessen ordnet man die Inhalte oft untereinander an. Das bedeutet aber, dass der Benutzer viel scrollen muss, um alle Inhalte zu erreichen. Bei der Off-Canvas-Darstellung ist das anders.

Außerhalb des Bildschirms

Bei einer Off-Canvas-Anordnung werden für schmale Bildschirme nur die wichtigsten Inhalte direkt angezeigt. Die anderen sind außerhalb des sichtbaren Bildschirms (off-canvas) platziert, beispielsweise rechts, links oder oberhalb davon. Sie werden bei Bedarf, das heißt auf Anforderung des Benutzers, hereingeschoben.

Im weiteren Sinne versteht man übrigens unter Off-Canvas-Menüs allgemein ein- oder ausklappbare Bereiche. Uns interessieren aber erst einmal die klassischen Off-Canvas-Layouts mit Layoutkomponenten außerhalb des sichtbaren Bereichs.

Für die konkrete Realisierung eines Off-Canvas-Layouts gibt es verschiedene Möglichkeiten. Gehen wir erst einmal von zwei Bereichen aus, um das Grundprinzip zu erläutern:

• Bei kleinen Bildschirmen soll nur die rechte Spalte angezeigt werden, die linke Spalte ist off-canvas, hier links außerhalb des sichtbaren Bereichs platziert. Diese linke Spalte kann mit Klick auf einen Link eingeblendet werden und schiebt sich dann von links in den sichtbaren Bereich hinein.
• Bei mehr verfügbarem Platz - wie beispielsweise auf einem Desktop-Monitor - sind beide Spalten direkt sichtbar nebeneinander angezeigt.

Für die Schiebebewegung brauchen wir kein Javascript, sondern können auf CSS Transitions zurückgreifen. Allerdings wollen wir Javascript einsetzen, um die unterschiedlichen Formatierungen auf kleinem Bildschirm auszulösen (zu einer reinen CSS-Lösung kommen wir später noch): So soll ja beim ersten Aufruf der Seite auf kleinem Bildschirm nur die rechte Spalte angezeigt und die andere erst infolge einer Benutzeraktion eingeblendet werden.

• Off-Canvas-Vorstellung von Jason Weaver
• Off-Canvas bei Luke Wroblewski
• Off-Canvas ohne Javascript mit dem CSS3-Selektor :target
• Off-Canvas mit 3D-Effekt
• Off-Canvas-Varianten bei Zurb Foundation

Um diese beiden Formatierungen zu realisieren, weisen wir mit Javascript dem body-Element je nach Kontext unterschiedliche Klassen zu. Wichtig dabei ist, dass das Layout auch ohne Javascript benutzbar ist - eine Mindestanforderung ist, dass alle Inhalte auch dann noch erreichbar sind. Da das Einblenden der Spalte nur funktionieren kann, wenn Javascript aktiviert ist, sollte auch die Off-Canvas-Darstellung an aktiviertes Javascript gekoppelt sein.

Als Marker, ob Javascript aktiviert ist oder nicht, ergänzen wir per Javascript die Klasse js beim body-Element. Dadurch können wir spezielle Formatierungen definieren, die nur bei Vorhandensein der Klasse wirken.

Die Verwendung von Klassen zur Kennzeichnung, ob Javascript aktiviert ist oder nicht, ist eine probate Methode, die übrigens auch bei Modernizr zum Einsatz kommt; dort wird die Klasse allerdings dem html-Element hinzugefügt.

© Internet Magazin

Basis - auch ohne Javascript nutzbar

Beginnen wir mit der Grundstruktur. Wie bei allen responsiven Layouts benötigen wir im Kopfbereich die Meta-Angabe, die die normale Skalierungsfunktion von Smartphones abschaltet:

<meta name="viewport"
content="width=device-width">

Im body gibt es zwei div-Bereiche, die mit den Klassen .eins und .zwei versehen sind. Außerdem besitzen die Elemente ids, damit sie als Ziel interner Verweise dienen können.

<div class="eins" id="eins"></div><div class="zwei" id="zwei"></div>

Im Normalfall werden die Bereiche einfach untereinander angezeigt. Sie erhalten eine fast bildschirmfüllende Breite. Außerdem wird ein Übergang (transition) definiert, damit danach die Veränderungen spürbar ablaufen: Die Transition soll 0.3 Sekunden dauern, alle Eigenschaften sollen einbezogen werden (all) und als Timing-Funktion wird ease bestimmt.

.eins, .zwei {
-moz-transition: 0.3s all ease;
-webkit-transition: 0.3s all ease;
-o-transition: 0.3s all ease;
transition: 0.3s all ease;
width: 90%;
padding: 4%;
}

Alle modernen Browser verstehen die hier verwendeten CSS3 Transitions, der Internet Explorer ab Version 10. Für diese benötigt er übrigens kein Präfix, die Angabe -ms- war nur für die Preview notwendig.

Dass die Animation des Hereinschiebens nicht in älteren IE funktioniert, ist zwar schade, aber verschmerzbar, denn die grundlegende Anzeige der Bereiche klappt auch dort und das Beispiel ist somit trotzdem funktionsfähig. Die normale Anordnung für kleine Bildschirme bei deaktiviertem Javascript ist damit fertig.

Off-Canvas bei aktiviertem Javascript

Die weiteren Formatierungen sind nur sinnvoll bei aktiviertem Javascript. Als Marker für aktiviertes Javascript fügen wir mit jQuery dem body-Element die Klasse .js hinzu.

Sowohl die Einbindung von jQuery als auch der eigene Javascript-Code stehen am Ende des HTML-Dokuments vor dem schließenden </body> - bei einer anderen Anordnung müssten wir den jQuery-Code innerhalb von $(function() { und }); notieren.

<body><!-- div-Elemente fürs Layout --><script src="https://ajax.googleapis.
com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><script>
$("body").addClass("js");</script>

Damit sieht das body-Element bei aktiviertem Javascript folgendermaßen aus:

<body class="js">

Ist Javascript nicht aktiviert, lautet es:

<body>

Dank dieser Vorbereitung können wir unsere Selektoren nun gezielt nach folgendem Prinzip erstellen: Der Selektor .eins wählt alle Elemente aus, die die Klasse eins haben. Hingegen wählt der zusammengesetzte Selektor .js .eins nur diejenigen Elemente mit der Klasse eins aus, die innerhalb eines Elements mit der Klasse js stehen. Und das tun sie nur bei aktiviertem Javascript, da wir ja zu diesem Zweck die Klasse js hinzugefügt haben.

Damit können wir die Off-Canvas-Darstellung realisieren, bei der .eins außerhalb des sichtbaren Bereichs platziert und nur .zwei angezeigt wird. Hierfür werden alle Elemente links gefloatet, durch einen negativen Außenabstand von -100 Prozent wird .eins links aus dem sichtbaren Bereich hinausgeschoben.

.js .eins {
margin-left: -100%;
float: left;
}

.zwei hingegen soll normal sichtbar sein und erhält deswegen einen Außenabstand von 0.

.js .zwei {
margin-left: 0;
float: left;
}

Einblenden der Bereiche

Unsere Off-Canvas-Darstellung steht, aber das sanfte Einblenden der Bereiche fehlt noch. Hierfür brauchen wir erst einmal innerhalb des Bereichs .zwei einen Link, der als normale Sprungmarke angelegt ist:

<a href="#eins" class="naveins">Eins
einblenden</a>

Wenn auf diesen Link geklickt wird, soll der angegebene Bereich erscheinen. Dafür fügen wir dem body-Element die Klasse aktiv-eins hinzu. Mit jQuery geht das folgendermaßen:

$(".naveins").click(function() {
$("body").addClass("aktiv-eins");
return false;
});

click() fängt das Klick-Ereignis ab, addClass() ergänzt eine passende Klasse.

Nun müssen wir noch die Formatierungen definieren: Damit die erste Spalte .eins eingeblendet wird, setzen wir zuerst einmal den Außenabstand auf 0 (dieser war ja ursprünglich bei -100 Prozent). Außerdem wird die Breite so angepasst, dass .eins zwar eingeblendet ist, aber trotzdem noch ein Teil der rechten Hauptspalte zu sehen ist.

.aktiv-eins .eins {
margin-left: 0;
width: 80%;
}

Die rechte Spalte wird mit einem rechten Außenabstand von -100 Prozent weiter nach rechts geschoben.

.aktiv-eins .zwei {
margin-right: -100%;
}

Zurück zum Ausgangszustand

Außerdem müssen wir dem Benutzer die Möglichkeit geben, zur Standardansicht zurückzukommen, bei der die rechte Spalte sichtbar ist. Dafür brauchen wir zuerst einen Link in der linken Spalte:

<a href="#zwei"
class="navzwei">ausblenden</a>

Dann können wir per Javascript den Klick auf den Link abfangen und die entsprechenden Klassen wieder entfernen:

$(".navzwei").click(function() {
$("body").removeClass("aktiv-eins");
return false;
});

Die Formatierung für kleine Bildschirme und die Off-Canvas-Funktionalität sind damit abgeschlossen.

© Internet Magazin

Mehr Platz

Die bisherigen CSS-Formatierungen waren nicht innerhalb von Media Queries angeordnet, das heißt, sie gelten immer, unabhängig vom verfügbaren Viewport. Bei größeren Viewports müssen wir aber andere Formatierungen festlegen.

Ab einer gewissen Breite brauchen wir nämlich die Off-Canvas-Darstellung nicht, sondern können die Bereiche normal anzeigen lassen. Dafür formulieren wir erst einmal die entsprechende Media-Query-Angabe:

@media screen and (min-width: 800px) {}

Im Beispiel sollen ab einer Breite von 800 Pixeln (min-width: 800px) beide Spalten normal angezeigt werden. Die folgenden Angaben stehen innerhalb der geschweiften Klammern der angegebenen @media-Regel. Zuerst einmal können wir die Links zum Ein- und Ausblenden der Spalten entfernen, weil die Spalten ja direkt sichtbar sind:

.naveins, .navzwei {
display: none;
}

Übrigens: Wenn Sie häufiger Komponenten in Abhängigkeit vom verfügbarem Viewport anzeigen oder ausblenden lassen wollen, könnten Sie hierfür auch eigene Klassen definieren, wie es beispielsweise bei den Frameworks Bootstrap und Foundation gehandhabt wird. Außerdem können wir die Elemente normal anordnen, das heißt ihnen eine passende Breite geben und sie floaten:

.js .eins, .eins {
width: 30%;
margin-left: 0;
float: left;
padding: 3%
}
.js .zwei, .zwei {
width: 54%;
float: left;
padding: 3%;
}

Im Code sind die Selektoren immer gedoppelt, neben .js .eins ist auch .eins als Selektor angegeben und das erklärt sich folgendermaßen: An sich funktioniert die bei .eins angegebene Formatierung sowohl bei aktiviertem als auch bei deaktiviertem Javascript. .js .eins brauchen wir aber bei aktiviertem Javascript, um genügend Spezifität zu haben, damit die zuvor für .js .eins definierten Angaben überschrieben werden können.

Das Beispiel lässt sich natürlich noch verbessern - es wäre etwa sinnvoll, die Links zum Ein- und Ausblenden der Bereiche bei deaktiviertem Javascript zu entfernen, da sie dann nicht mehr sinnvoll sind.

© Internet Magazin

Variationen

Das für zwei Bereiche gezeigte Grundprinzip von Off-Canvas können Sie natürlich auch bei drei Spalten anwenden. Bei viel verfügbarem Platz sind alle drei Spalten sichtbar. Außerdem gibt es auch noch eine Zwischenstufe ab 600 Pixeln Größe: In diesem Fall werden zwei Spalten angezeigt - die erste und die zweite - und nur die dritte Spalte ist off-canvas angeordnet. Auch das lässt sich natürlich noch variieren:

• Bei der Off-Canvas-Darstellung auf kleinem Bildschirm kann standardmäßig selbstverständlich auch eine andere als nur die mittlere Spalte angezeigt werden.
• Bei größeren Bildschirmen müssen die Bereiche nicht einfach nebeneinander angezeigt, sondern es könnte auch eine Spalte oben als Kopfzeile angeordnet werden.
• Eine raffinierte Variation zeigt lab.hakim.se/meny/: Wenn die Spalte links eingeblendet wird, dreht sich der ursprünglich sichtbare Bereich durch 3D Transforms nach hinten, wodurch die Aufmerksamkeit gezielt auf die nichtgedrehte linke Spalte gelenkt wird.

Ohne Javascript

An sich könnte man Off-Canvas-Layouts auch ohne Javascript erstellen - nämlich über den neuen CSS3-Selektor :target. Mit :target können Sie das Ziel von internen Verweisen formatieren. Wikipedia setzt :target beispielsweise ein, um bei einem Klick auf eine Fußnotennummer die angesprungene Fußnote durch eine Hintergrundfarbe zu kennzeichnen.

Wie man :target für Off-Canvas verwendet, demonstriert Chris Coyier. Zuerst ist der Bereich eingeklappt, beispielsweise durch eine Breite von 0.

#navi {
/* eingeklappt */
width: 0;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
height: 100%;
}

Und bei Klick auf den Link <a href= "#navi">Menü</a> wird für das angesprungene Ziel die Formatierung - hier die Breite der Spalte - verändert:

#navi:target {
width: 20%;
}

Um wieder zur ursprünglichen Version zurückzukommen, benötigt man einen Link wie <a href="#">Zurück</a>, dann greift der :target-Selektor nicht mehr. Diese Lösung ist elegant, weil sie ohne Javascript auskommt. Aber sie hat derzeit noch den Nachteil der schlechteren Browserunterstützung: Der :target-Selektor, mit dem die Interaktivität steht und fällt, funktioniert im Internet Explorer erst ab Version 9.

Ein weiterer Nachteil ist, dass Sprungmarken in den Browserverlauf aufgenommen werden und es für den Besucher irritierend ist, wenn ein Klick auf den Zurück-Button die Version mit Menü aktiviert.

Nützliche Helfer

Es gibt auch Beispiele für den direkten Einsatz von Off-Canvas-Layouts. Besonders praktisch sind diejenigen von Zurb Foundation: Hier finden Sie vier Off-Canvas-Varianten zum Download, die Sie an Ihre Bedürfnisse anpassen können. Jede der Varianten setzt auf dem sehr schönen Frontend-Framework Foundation auf.

• Variante 1 "Off-Canvas Bottom Nav": Hier ist die Navigation bei kleinen Screens unterhalb des Hauptinhalts angeordnet und kann durch Scrollen erreicht werden, aber es gibt auch einen Link, über die sie sich direkt anspringen lässt. Der Bereich Extras ist außerhalb des sichtbaren Bereichs - nämlich links angeordnet - und wird auf Anforderung hereingeschoben.
• Variante 2 "Off-Canvas Top Nav": Bei dieser Variante gibt es bei kleinen Screens im oberen Bereich Links für die Navigation und die Extras. Die Navigation ist standardmäßig oberhalb angeordnet und wird auf Anforderung von oben hereingeschoben. Die Extras befinden sich links außerhalb des sichtbaren Bereichs.
• Variante 3 "Paneled" eignet sich zur Darstellung mehrerer relativ gleichwertiger Inhalte und funktioniert ähnlich wie Javascript-Tabs, mit dem einzigen Unterschied, dass die Inhalte nicht versteckt, sondern eben off-canvas platziert sind und beim Klick auf die oberen Tabs jeweils hereingeschoben werden. Bei großem Bildschirm sind die Inhalte untereinander platziert und können durch Scrollen oder durch direkte Auswahl oben angesteuert werden.
• Variante 4 "Sidebar on Mobile Online": Das Menü ist standardmäßig links außerhalb des sichtbaren Bereichs platziert und lässt sich animiert einblenden. Die Sidebar mit Zusatzinformationen befindet sich unterhalb des Hauptinhalts und wird durch Scrollen erreicht.

Off-Canvas ist ein Prinzip, das von nativen Apps bekannt ist - beispielsweise von der Facebook-App -, aber auch beim responsiven Webdesign verdient dieses Schema seinen Platz. Wichtig ist dabei, dass auch bei deaktiviertem Javascript alle Inhalte erreichbar sind. Das Grundprinzip, dass man von einer funktionierenden Basis ausgeht, die dann für fähigere Geräte verbessert wird - kurz Progressive Enhancement - ist eine der zentralen Strategien im Umgang mit der Flut an neuen Geräten, die zur Betrachtung von Internetseiten genutzt werden.

Apropos mobile Geräte: Wenn jQuery wirklich nur zum Hinzufügen und Entfernen von Klassen verwendet wird und nicht für weitere Funktionen, wäre es besser, die Klassenergänzung ohne Zuhilfenahme von jQuery in Javascript pur zu erledigen; jQuery wäre dann nur Overkill.