Menu

Off-Canvas Menu

Off-Canvas Menu

Dark Mode

What is an Off-Canvas Menu?

Off-canvas Menus are also called flyout or side panel. It is a section of a website that is initially hidden (off-canvas). When triggered by an action on the page it appears from the side of the screen. The typical trigger is a click on a button, but it can also be activated by clicking an icon, image or text.

Features

  • Simple
  • Mobile first
  • Multi level
  • Lightweight: ~6KB

Getting started

  1. Download the zip file of the latest release from GitHub. You will find a js and a css file inside.
  2. Include the css file at the top of your page in the head section:
    <link href="path/to/off-canvas-menu.css" rel="stylesheet" />
  3. Place the script tag at the bottom of your page right before the closing body section:
    <script src="path/to/off-canvas-menu.js"></script>
  4. Create a navigation list for your off-canvas menu:
    <div class="off-canvas">
      <div class="off-canvas-header">
        <h4 class="off-canvas-title">Menu</h4>
        <div aria-label="Close">
          <div class="icon-close"></div>
        </div>
      </div>
    
      <div class="off-canvas-body">
        <nav class="off-canvas-nav">
          <div class="list-level-0">
            <div class="list-item">
              <a href="#" class="link-level-1"> Home </a>
            </div>
            <div class="list-item">
              <a href="#" class="link-level-1">
                Services <span class="link-arrow">›</span>
              </a>
            </div>
            <div class="list-level-1">
              <div class="list-item">
                <a href="#" class="link-level-2">
                  UX-Design <span class="link-arrow">›</span>
                </a>
              </div>
              <div class="list-level-2">
                <div class="list-item">
                  <a href="#" class="link-level-3">
                    Screendesign
                  </a>
                </div>
                <div class="list-level-3"></div>
              </div>
              <div class="list-item">
                <a href="#" class="link-level-2"> Webdesign </a>
              </div>
              <div class="list-item">
                <a href="#" class="link-level-2">
                  Content Marketing
                </a>
              </div>
            </div>
            <div class="list-item">
              <a href="#" class="link-level-1">
                Team <span class="link-arrow">›</span>
              </a>
            </div>
            <div class="list-level-1">
              <div class="list-item">
                <a href="#" class="link-level-2"> John </a>
              </div>
              <div class="list-item">
                <a href="#" class="link-level-2"> Peter </a>
              </div>
              <div class="list-item">
                <a href="#" class="link-level-2"> Michael </a>
              </div>
            </div>
            <div class="list-item">
              <a href="#" class="link-level-1"> Contact </a>
            </div>
          </div>
        </nav>
      </div>
    </div>
    
  5. Create a menu toggle:
    <aside class="icon-open-row">
      <div class="icon-open-container">
        <div class="icon-open-col-1">☰</div>
        <div class="icon-open-col-2">Open Menu</div>
      </div>
    </aside>
    

Local Development

Feel free to reach out for any kind of cooperation or feedback. PRs welcome.

1. Create a new OffCanvasMenu instance with the OffCanvasMenu constructor:
const menu = new OffCanvasMenu();

2. Call init-method on new instance:
menu.init();

Constructor parameters

Parameter Default Description
closeOtherSubMenus false Whether unaffected subMenus should be closed after click on subMenu-item.
closeMenuOnBackdropClick true If true, menu closes on backdrop click.
closeSubMenusOnMenuClose true If true, all subMenus are closed on menu close.

About the header image

The picture (taken in July 2015) shows the weavers houses Zwölf Apostel in Schömberg (Chełmsko Śląskie) in today's Poland. They were built in the year 1707 as a weaver settlement. Eleven of the original twelve houses are still preserved today.

Über das Titelbild

Das Bild (aufgenommen im Juli 2015) zeigt die Weberhäuser Zwölf Apostel in Schömberg (Chełmsko Śląskie) im heutigen Polen. Gebaut wurden die Holzlaubenhäuser im Jahr 1707 und dienten als Webersiedlung. Von den ursprünglich zwölf Häusern sind heute noch elf erhalten.

Reach out

Do you need some help or have any questions? Please feel free to reach out.

Send E-Mail