Multi-level Toggle Responsive Navigation Menu using Pure CSS

Category: CSS & CSS3 , Menu & Navigation , Recommended | January 28, 2015
Author:
Views Total: 6,019
Official Page: Go to website
Last Update: January 28, 2015
License: MIT

Preview:

Multi-level Toggle Responsive Navigation Menu using Pure CSS

Description:

A pure CSS mobile-friendly navigation that automatically transform your horizontal navigation into a toggleable vertical accordion menu on smaller screen devices, with support for unlimited sub menu items.

How to use it:

Load the required navigation.min.css in the head section of your document.

<link rel="stylesheet" href="css/navigation.min.css">

Add the CSS class nav-no-js to the Html tag.

<html lang="en" class="nav-no-js">

Create a nav toggle button that only appears on mobile devices.

<div class="nav-button"></div>

Create your navigation menu using nested Html lists.

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li class="submenu"><a href="#">Services</a>
      <ul>
        <li><a href="#">Some Service</a></li>
        <li><a href="#">Another Service</a></li>
        <li><a href="#">Good Service</a></li>
        <li><a href="#">Room Service</a></li>
      </ul>
    </li>
    <li class="submenu"><a href="#">Products</a>
      <ul>
        <li><a href="#">Food</a></li>
        <li class="submenu"><a href="#">Drinks</a>
          <ul>
            <li><a href="#">Water</a></li>
            <li class="submenu"><a href="#">Cola</a>
              <ul>
                <li class="submenu nav-left"><a href="#">Coca Cola</a>
                  <ul>
                    <li><a href="#">This one goes left!</a></li>
                    <li><a href="#">Too much sugar...</a></li>
                    <li><a href="#">Yummy</a></li>
                  </ul>
                </li>
                <li><a href="#">Pepsi</a></li>
                <li><a href="#">River</a></li>
              </ul>
            </li>
            <li><a href="#">Lemonade</a></li>
          </ul>
        </li>
        <li><a href="#">Candy</a></li>
        <li><a href="#">Ice Cream</a></li>
      </ul>
    </li>
    <li class="submenu"><a href="#">Albums</a>
      <ul>
        <li><a href="#">Christmas</a></li>
        <li><a href="#">New Year</a></li>
        <li><a href="#">Easter</a></li>
      </ul>
    </li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Create a close button to dismiss the accordion menu on mobile devices.

<div class="nav-close"></div>