Press "Enter" to skip to content

[Flyout] Pure CSS Responsive Off-canvas Hamburger Menu

Pure CSS Responsive Flyout Menu is a CSS-only responsive multi-level menu that expands a hamburger toggle button into a horizontal dropdown menu on the desktop or an off-board side menu on mobile.

It works as an off-canvas menu on mobile windows and a popup on desktops. It is powered by a simple hamburger icon that sticks to the top of the page.

How to make use of it:

1. Include the main style sheet flyout-menu.css in the header of the document.

<link rel="stylesheet" href="flyout-menu.css">

2. Create a hamburger launcher to toggle responsive navigation.

<input type="checkbox" class="menu-trigger">

3. Create a multilevel list of nested HTML lists like this one.

<ul class="menu" role="menu">
  <li class="start">
      <a href="#">
          <svg preserveAspectRatio="xMidYMid meet" focusable="false" viewBox="-5 -5 34 34">
              <g><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" fill="white"></path></g>
          </svg>
      </a>
  </li>
  <li>
      <a href="#">Level 1</a>
      <ul>
          <li><a href="#">Level 2</a>
              <ul>
                  <li><a href="#">Level 3</a>
                      <ul>
                          <li><a href="#">Level 4</a></li>
                          <li><a href="#">Level 4</a></li>
                          <li><a href="#">Level 4</a></li>
                      </ul>
                  </li>
                  <li><a href="#">Level 3</a></li>
                  <li><a href="#">Level 3</a></li>
              </ul>
          </li>
          <li><a href="#">Level 2</a>
              <ul>
                  <li><a href="#">Level 3</a></li>
                  <li><a href="#">Level 3</a></li>
                  <li><a href="#">Level 3</a></li>
              </ul>
          </li>
          <li><a href="#">Level 2</a>
              <ul>
                  <li><a href="#">Level 3</a></li>
                  <li><a href="#">Level 3</a></li>
                  <li><a href="#">Level 3</a></li>
              </ul>
          </li>
      </ul>
  </li>
  <li>
      <a href="#">Level 1</a>
      <ul>
          <li><a href="#">Level 2</a>
              <ul>
                  <li><a href="#">Level 3</a></li>
                  <li><a href="#">Level 3</a></li>
                  <li><a href="#">Level 3</a></li>
              </ul>
          </li>
          <li><a href="#">Level 2</a>
              <ul>
                  <li><a href="#">Level 3</a></li>
                  <li><a href="#">Level 3</a></li>
                  <li><a href="#">Level 3</a></li>
              </ul>
          </li>
          <li><a href="#">Level 2</a>
              <ul>
                  <li><a href="#">Level 3</a></li>
                  <li><a href="#">Level 3</a></li>
                  <li><a href="#">Level 3</a></li>
              </ul>
          </li>
      </ul>
  </li>
  <li>
      <a href="#">Level 1</a>
      <ul>
          <li><a href="#">Level 2</a>
              <ul>
                  <li><a href="#">Level 3</a></li>
                  <li><a href="#">Level 3</a></li>
                  <li><a href="#">Level 3</a></li>
              </ul>
          </li>
          <li><a href="#">Level 2</a>
              <ul>
                  <li><a href="#">Level 3</a></li>
                  <li><a href="#">Level 3</a></li>
                  <li><a href="#">Level 3</a></li>
              </ul>
          </li>
          <li><a href="#">Level 2</a>
              <ul>
                  <li><a href="#">Level 3</a></li>
                  <li><a href="#">Level 3</a></li>
                  <li><a href="#">Level 3</a></li>
              </ul>
          </li>
      </ul>
  </li>
</ul>

4. Create an overlay to navigate outside the panel in mobile view.

<div class="overlay"></div>

responsive hamburger menu css only, pure css responsive flyout menu Plugin/Github


See Demo And Download

Official Website(dneustadt): Click Here

This superior jQuery/javascript plugin is developed by dneustadt. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.