off Canvas Navigation erstellen

Eine off Canvas Navigation ist normalerweise nicht zu sehen, da sie aus dem sichtbaren Bereich „geschoben“ ist. Sie wird nur nach Klicken einer Schaltfläche sichtbar. Wie du eine solche off Canvas Navigation erstellen kannst, zeige ich hier.

Für die Erstellung einer off Canvas Navigation ist ein wenig CSS, JavaScript und natürlich HTML notwendig. Beginnen wir mit dem HTML-Code (Head, Doctype sowie öffnender und schließender HTML-Tag fehlen. Der body-Tag ist nur wegen der Klasse aufgeführt, die später noch wichtig ist):

Code der off Canvas Navigation

HTML

<body class="nojs">
<a class="sidebar-button" href="#sidebar-menu">Menü</a>
<div id="content">
    <h1>off Canvas Navigation</h1>
    <p>Viel Lorem Ipsum ...</p>
</div>
<aside id="sidebar" role="sidebar">
    <div id="sidebar-content">
        <h4>Letzte Beiträge</h4>
        <ul>
            <li><a href="https://florianbrinkmann.com/712/mohn-im-kornfeld/" title="Mohn im Kornfeld">Mohn im Kornfeld</a></li>
            <li><a href="https://florianbrinkmann.com/703/openhpi-online-kurse-zur-informationstechnologie/" title="openHPI — Online-Kurse zur Informationstechnologie">openHPI — Online-Kurse zur Informationstechnologie</a></li>
            <li><a href="https://florianbrinkmann.com/692/fanoe-free-wordpress-theme/" title="Fanoe — Free WordPress Theme">Fanoe — Free WordPress Theme</a></li>
            <li><a href="https://florianbrinkmann.com/667/theme-options-seite-fuer-wordpress-erstellen/" title="Theme Options Seite für WordPress Themes erstellen">Theme Options Seite für WordPress Themes erstellen</a></li>
            <li><a href="https://florianbrinkmann.com/654/neues-rathaus-bilderreihe/" title="Neues Rathaus Bilderreihe">Neues Rathaus Bilderreihe</a></li>
        </ul>
    </div>
</aside>
</body>

Wie du siehst, werden hier lediglich ein Inhaltsbereich sowie eine Sidebar definiert. Wichtig ist der Link zum Menü, der nachher die Möglichkeit bietet, die off Canvas Navigation anzusehen.
Stylen wir das ganze nun mit CSS, damit nunmehr nur noch der Inhaltsbereich sichtbar ist, die Sidebar aber nicht mehr.

CSS

/*******Link für Sidebar**********/
.js .sidebar-button{
	background:#fff;
	background:rgba(255,255,255,.9);
	font-size:1.2em;
	padding:20px;
	position:fixed;
	right:0;
	top:0;
	z-index:100;
}
.nojs .sidebar-button{
	display:none;
}
.active-sidebar .sidebar-button{
	right:60%;
}
/*******Link für Sidebar Ende**********/


/*******Content**********/
#content{
    margin:0 auto;
    position:relative;
    width:936px;
}
/*******Content Ende**********/


/*****Sidebar allgemein**********/
#sidebar{
    display:block;
    position:relative;
    width:100%;
}
#sidebar h4{
    font-size:1.4em;
    margin-bottom:1em;
}
#sidebar .widget ul{
    margin:0;
    margin-bottom:1.6em;
    padding:0;
    widt:50%;
}
#sidebar .widget li{
    list-style-type:none;
    text-align:left;
}
#sidebar .widget p{
    text-align:left;
}
#sidebar .widget li{
    padding:5px 0;
}
/*********Siedbar allgemein Ende**********/

/*********Siedbar mit JavaScript**********/
.js #sidebar{
    height:0;
    left:100%;
    overflow:hidden;
    position:absolute;
    top:0;
    width:0;
    z-index:1;
}
.js #sidebar-content{
    height:100%;
    padding-top:40px;
}
.active-sidebar #content{
    right:60%;
}
.active-sidebar .sidebar-button{
    background:none;
    height:100%;
    text-align:right;
    width:100%;
}
.active-sidebar #sidebar{
    border-left:5px solid #84A11D;	
    min-height:100% !important;
    height:auto;
    left:40%;
    width:59%;
}
/********Sidebar mit JavaScript Ende ******/

Da die off Canvas Navigation nicht funktioniert, wenn JavaScript ausgeschaltet ist, kommt in dem CSS Code erstmal der allgemeine Teil für die Sidebar, der auch genutzt wird, wenn kein JavaScript aktiviert ist. Anschließend folgt der Teil der nur greift, wenn JS aktiv ist. Der Link für die Sidebar wird logischerweise ebenfalls nur angezeigt, wenn JavaScript aktiv ist.

Nun sind wir fast am Ziel. Damit die off Canvas Navigation auch funktioniert, muss noch ein wenig JavaScript geschrieben werden.

JavaScript

document.body.className=document.body.className.replace('nojs', 'js');

var showSidebar = function() {
    jQuery('body').toggleClass("active-sidebar");
    jQuery('.sidebar-button').toggleClass("active-button");
    jQuery('content').click(function(e) {
        hideSidebar();
    });
}
var hideSidebar = function(){
    jQuery('body').removeClass("active-sidebar");
    jQuery('.sidebar-button').removeClass("active-button");	
}

jQuery(document).ready(function(jQuery) {
    jQuery('.sidebar-button').click(function(e) {
        e.preventDefault();
        showSidebar();
        jQuery('html, body').animate({ scrollTop: 0 }, 0);							
    });	
});

Am Anfang folgt die Überprüfung, ob JavaScript aktiviert ist. Ist das der Fall, wird die body-Klasse nojs in js umgewandelt (mit der wir oben im CSS Code arbeiten).
Anschließend wird in der Variablen showSidebar festgelegt, dass beim Aufruf der Funktion dem body-Tag die Klasse active-sidebar hinzugefügt werden soll. Dem Link mit der Klasse sidebar-button wird die Klasse active-button zugewiesen. Wenn nun auf das div mit der id content geklickt wird, wird die Funktion hideSidebar aufgerufen.
Diese Funktion entfernt die Klassen, die in der Funktion showSidebar hinzugefügt wurden.
Das letzte Stück Code gibt an, wann die Funktion showSidebar aufgerufen werden soll. Nämlich dann, wenn auf den Link mit der Klasse sidebar-button geklickt wird.

Wenn nun auf den Link Menü geklickt wird, dann wird dem body die Klassen active-sidebar zugewiesen. Dadurch wird mittels CSS das div mit der id content um 60% nach links verschoben. Der Link für das Menü wird nun auf 100% Höhe und Breite gebracht, sodass nur noch ein Klick auf diesen Link oder in die Sidebar möglich ist. Das div mit der Sidebar wird 40% vom linken Rand entfernt platziert und kommt so in den sichtbaren Bereich.
Wenn nun auf den Content Bereich geklickt wird, werden wieder alle geänderten Klassen entfernt und die Sidebar verschwindet wieder. In dem Artikel Implementing Off-Canvas Navigation For A Responsive Website vom SmashingMagazine wird zusätzlich noch gezeigt, wie das ganze animiert werden kann.

Demo

Fazit

Das war es auch schon. So schnell ist eine off Canvas Navigation umgesetzt. Meiner Meinung nach sind diese sehr praktisch, wenn viele Informationen in dem Menü/der Sidebar untergebracht werden sollen. Natürlich sind sie auch sehr sinnvoll im responsive Webdesign einzusetzen. Hierzu kann die Navigation/Sidebar ganz normal angezeigt werden, und ab einer bestimmten Viewportbreite wird die Navigation versteckt, und der Menü-Link wird sichtbar. Mit MediaQueries von CSS3 ist das keine allzu schwierige Aufgabe.

Was hältst du von der off Canvas Technologie? Sinnvoll oder eher überflüssig? Würdest du sie auch ohne „Platzmangel“ einbinden, also für eine Desktop-Version, wie hier auf dem Blog?

Das könnte auch interessant sein

2 Kommentare zu »off Canvas Navigation erstellen«

  1. Nils

    Hallo Florian,

    danke für diesen interessanten Artikel. Ich arbeite gerade an einer Umsetzung innerhalb eines WoltLab Burning Boards. In dem Javascript ist in folgender Zeile bei content ein Hochkomma zu viel.

    jQuery(''content').click(function(e) {

    Gruß
    Nils

Schreib einen Kommentar

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