Responsive Web Design

Knowledge Base

Responsive Web Design > ZURB Foundation

Off-Canvas

Beim Off-Canvas im ZURB Foundation Framework 6.2.1 handelt es sich um Plugin, welches ermöglicht eine zunächst unsichtbare Fläche (mit einer Breite von 250px) von links oder rechts des Viewport hineingleiten zu lassen.

Dies wird z. B. verwendet, um ein vgl. großes Menü bei kleinen Viewports auf Bedarf (z. B. durch Klick auf ein Menü-Button oder Menü-Icon) zur Verfügung zu stellen - bei größeren Viewports (z. B. bei Tablets oder auf dem Desktop). Solange das Off-Canvas sichtbar ist, wird der Content-Bereich deaktiviert. Wählt der Benutzer eine Funktion auf dem Off-Canvas aus, dann geht es entsprechend weiter. Klickt er auf den Content-Bereich - gleitet das Off-Canvas wieder hinaus (und der Content-Bereich ist wieder benutzbar).

Beispiel-Implementierung:

<div class="off-canvas-wrapper">
        <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
 
            <div id="pLeftOffCanvas" class="off-canvas position-left" data-off-canvas>
                Ich bin das anfänglich unsichtbare linke Off-Canvas.
            </div>
 
            <div id="pRightOffCanvas" class="off-canvas position-right" data-off-canvas data-position="right">
                Ich bin das anfänglich unsichtbare rechte Off-Canvas.
            </div>
 
            <div class="off-convas-content" data-off-canvas-content>
 
                <div class="top-bar">
                    <div class="top-bar-left">
                        <button type="button" data-open="pLeftOffCanvas" id="bOpenLeftOffCanvas">
                            <span class="menu-icon dark"></span>
 
                            <strong>Off-Canvas-Menü (links)</strong>
                        </button>
                    </div>
 
                    <div class="top-bar-right">
                        <button type="button" data-open="pRightOffCanvas" id="bOpenRightOffCanvas">
                            <strong>Off-Canvas-Menü (rechts)</strong>
                            <span class="menu-icon dark"></span>
                        </button>
                    </div>
                </div>
 
                <div class="row">
                    <p class="small-12 columns">
                        Ich bin der Content-Bereich.
                    </p>
                </div>
                 
                <div class="row">
                    <p class="small-12 columns">
                        Ist das Off-Canvas sichtbar, bin ich deaktiviert (und bei Klick auf mich
                        gleitet das Off-Canvas wieder raus).
                    </p>
                </div>
 
            </div>
        </div>
    </div>