Multi-level Toggle Responsive Navigation Menu using Pure CSS

Category: CSS & CSS3 , Menu & Navigation , Recommended | January 28, 2015
6 Comments
Demo Download
Author:codezero-be
Views Total:56,171 views
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>

See Also:

You Might Be Interested In:

6 thoughts on “Multi-level Toggle Responsive Navigation Menu using Pure CSS”

  1. PhilipPeake

    The text above does not match the download. For example, there is no navigation.min.css file in the css directory. The demo source definitely doesn’t match the description. It appears to use javascript.

    Reply ↓
  5. Mike Henden

    Looked good but can’t access the menu in mobile view. It disappears before you can click a menu item!

    Reply ↓
  6. ask me

    This is NOT pure CSS3, it has JS and JSON on it and it doesn’t match. Please be careful with using CSS3 PURE because IT ISN’T

    Reply ↓

Leave a Reply