Zum eigenen Off-Canvas-Menü in wenigen Schritten

Responsives Webdesign liegt schwer im Trend. Gerade auf den kleinen Displays von mobilen Endgeräten kann nicht immer der komplette Seiteninhalt ausgegeben werden bzw. man muss umplanen. Dabei bieten sich beispielsweise Menü-Slider oder sogenannte Off-Canvas-Layouts an. Aber was ist das überhaupt? Bei dieser Methode wird das Design so entworfen, dass links oder rechts zusätzliche Bereiche vorhanden sind, allerdings standardmäßig unsichtbar. Durch einen Button-Klick lassen sich die Flächen dann anzeigen. Das komplette Webdesign wird dabei in die entsprechende Richtung mitgeschoben. Dadurch entsteht der Eindruck eines richtigen Side-Menüs, wo zum Beispiel die Seitennavigation, Suche, zusätzliche Informationen etc. auftauchen könnten.

Darstellung eines Off-Canvas-Layouts
Darstellung eines Off-Canvas-Layouts

Der Einsatzzweck hierfür ist groß. Nun aber die Frage: Wie baue ich mir ein solches Menü? Ich zeig euch, wie ihr das ganz einfach hinbekommt. Alles was ihr dazu benötigt, ist etwas HTML, CSS und jQuery. Fangen wir an. Achtung: Ich warne euch lieber gleich vor, nachfolgend kommt einiges an Quelltext, aber keine Angst, kompliziert ist es nicht.

Am Anfang war der HTML-Quellcode

Zunächst brauchen wir ein kleines HTML-Grundgerüst. Um Inhalte in der Sidebar darzustellen, eignet sich vorzugsweise eine simple Liste. Innerhalb des Navigationsbereichs habt ihr freie Hand. Lediglich die ID menu und die Klasse menu-link müssen zwingend zum Einsatz kommen.

<nav id="menu">
    <a href="#" class="menu-link">Menu</a>
       <ul>
       <li><a href="#">Minions</a></li>
       <li><a href="#">poopayee</a></li>
       <li><a href="#">Bappleees</a></li>
       <li><a href="#">bananaaaa</a></li>
    </ul>
   </nav>
   <div id="content">
    <!-- restlicher Seiteninhalt -->
</div>

CSS3 leistet die Hauptarbeit

Ist dieser Schritt geschafft, folgt der CSS-Part. Um das Menü später zu verschieben, verwende ich in dieser Anleitung CSS-Transform. Ich schrieb ja bereits davon, dass damit unwahrscheinlich viel möglich ist. Damit können auch Boxen oder Ähnliche Elemente verschoben werden. Die Eigenschaft wird mittlerweile von mehr als 80 Prozent aller Browser unterstützt. Die Leiste wird zusätzlich absolute gesetzt, bekommt eine feste Breite und 100 Prozent Höhe. Mittels der Klasse active findet später die Verschiebung statt.

#menu {
         position: absolute;
         top: 0;
         bottom: 0;
         width: 15.625em;
         left: -15.625em;
         height: 100%;
         -webkit-transform: translate(0px, 0px);
        -moz-transform: translate(0px, 0px);
        -o-transform: translate(0px, 0px);
        -ms-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
        -webkit-transition: 0.25s ease;
        -moz-transition: 0.25s ease;
        -o-transition: 0.25s ease;
        transition: 0.25s ease;
        background:dimgrey;}
#menu.active {
        -webkit-transform: translate(15.625em, 0px);
        -moz-transform: translate(15.625em, 0px);
        -o-transform: translate(15.625em, 0px);
        -ms-transform: translate(15.625em, 0px);
        transform: translate(15.625em, 0px);}

Was wir mit dem Menü gemacht haben, kann ebenso mit dem restlichen Seiteninhalt geschehen. Dazu sei allerdings gesagt, es muss nicht. Lasst ihr nachfolgende Auszeichnungen weg, sollte #menu als weitere Eigenschaft unbedingt z-index: 0; oder höher erhalten, da die Sidebar quasi über den Rest der Seite gelegt wird. Das kann auch ein interessanter Effekt sein.

#content {
       -webkit-transform: translate(0px, 0px);
       -moz-transform: translate(0px, 0px);
       -o-transform: translate(0px, 0px);
       -ms-transform: translate(0px, 0px);
       transform: translate(0px, 0px);
       -webkit-transition: 0.25s ease;
       -moz-transition: 0.25s ease;
       -o-transition: 0.25s ease;
       transition: 0.25s ease;}
#content.active {
       -webkit-transform: translate(15.563em, 0px);
       -moz-transform: translate(15.563em, 0px);
       -o-transform: translate(15.563em, 0px);
       -ms-transform: translate(15.563em, 0px);
       transform: translate(15.563em, 0px);}

Um das Menu aufzurufen, brauchen wir natürlich einen Button. Dieser wurde oben im HTML-Markup bereits eingebettet. Aber das richtige Styling muss auch noch her. Wie ihr den Schalter am Ende gestaltet ist euch relativ freigestellt. Beachtet aber im Tutorial die absolute Positionierung, samt der rechten Position, solange sich der Aufruf innerhalb des Menüs befindet. Denn der Schalter weiß nicht, wann er ein Element überlappt, da dieser fest steht. Der Link kann genauso gut an einer x-beliebigen Stelle innerhalb der Webseite erscheinen. Einzige Voraussetzung, die Sidebar sollte das Element nicht überdecken oder aus dem Anzeigebereich schieben.

.menu-link {
      position: absolute;
      top: 15px;
      right: -70px;
      background:black;
      color: white;
      padding: 10px;
      border-radius: 5px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;}

Im Beispiel erscheint das Menü links. Ihr könnt es aber auch ganz leicht von rechts ausklappen lassen. Ändert lediglich left auf right und verseht alle Transform-Werte größer Null mit einem Minus. Falls das Off-Canvas-Element nur bei einer bestimmten Displayauflösung erscheinen soll, bietet sich der Einsatz von CSS-Mediaqueries an.

Ein wenig jQuery muss schon sein

So, nach all dem vielen CSS sind wir fast fertig. Wenn ihr das jetzt so testen würdet, dann passiert erst mal nichts Spannendes. Da geht kein Menü auf. Stimmt, denn diesen überaus wichtigen Schritt erledigt jQuery. Bindet hierzu das Script ein, falls ihr das JavaScript-Framework noch nicht verwendet. Danach fügt ihr das Click-Event, wie nachfolgend dargestellt, an. Durch das Anklicken des Menü-Buttons erscheint das Off-Canvas-Menü und verschiebt den Seiteninhalt entsprechend mit. Durch erneutes Klicken des Schalters, verschwindet das Menü wieder. Der restliche Inhalt wird in seinen Ursprungszustand zurückversetzt.

$(".menu-link").click(function(){
      $("#menu").toggleClass("active");
      $("#content").toggleClass("active");
});

Ich habe auf jsFiddle zusätzliche eine kleine Demo erstellt, damit ihr das Ganze gleich mal live testen könnt. Im Grunde eine recht einfache Sache.


Simple Off Canvas Menu

Zwar existieren für Off-Canvas-Menüs zahlreiche andere Lösungen, wie jQuery-Plugins, reine CSS-Ansätze etc. pp. aber gerade bei Ersterem hat das immer den faden Beigeschmack von überdimensionierten Scripten sowie gewisse Einschränkungen bei der Gestaltung. Daher ist einfach manchmal besser.


Avatar von reraiseace
Autor: Markus Werner (reraiseace) Twitterreraiseace, Google+reraiseace, Twittercb_werner
Ich bin Redaktionsvolontär bei der COMPUTER BILD in Hamburg, Fernstudent am Deutschen Journalistenkolleg und schreibe auf re{raise}ace privat über Webdesign und Programmierung. Seit 2015 schrieb ich auch regelmäßig für andere Medien.

2 Kommentare

Du kannst diesen Artikel nicht mehr kommentieren.

  1. Kommentar von Hans · · #

    Gut erklärt, wenn man nun nur den letzten Fetzen javscript noch wegrationalisieren könnte wäre ich ein glücklicher Mann. Ich will gerade die Seite responsiv erstellen, tue mich mit den Anforderungen an responsives Design aber sehr schwer.

  2. Kommentar von reraiseace · · #

    Schau mal bei CSS-Tricks vorbei, da gibts eine CSS only Lösung