codrops/multilevelmenu

A simple menu with multiple levels and an optional breadcrumb navigation and back button.

Blueprint: Multi-Level Menu

A simple multi-level menu with delayed item animations and optional breadcrumb navigation and back button.

Article on Codrops

Demo

The Blueprints are a collection of basic and minimal website concepts, components, plugins and layouts with minimal style for easy adaption and usage, or simply for inspiration.

Check out all of our Blueprints here

Integrate or build upon it for free in your personal or commercial projects. Don't republish, redistribute or sell "as-is".

Read more here: License

Organic Food Icons by Wojciech Zasina.

Feather Icons by Cole Bemis.

Follow us: Twitter, Facebook, Google+, GitHub, Pinterest

© Codrops 2015

multilevelmenu's Issues

HTML structure

Hi guys,

For a better text semantics, or just a better integration with WordPress, do you think it's possible to use the plugin with this HTML structure ?

      <ul data-menu="main" class="menu__level">
        <li class="menu__item"><a class="menu__link" data-submenu="submenu-1" href="#">Item 1</a>
          <ul data-menu="submenu-1" class="menu__level">
            <li class="menu__item"><a class="menu__link" href="">Item 1 child</a></li>
            <li class="menu__item"><a class="menu__link" href="">Item 1 child</a></li>
            <li class="menu__item"><a class="menu__link" href="">Item 1 child</a></li>
            <li class="menu__item"><a class="menu__link" href="">Item 1 child</a></li>
            <li class="menu__item"><a class="menu__link" href="">Item 1 child</a></li>
          </ul>
        </li>
        <li class="menu__item"><a class="menu__link" data-submenu="submenu-2" href="#">Item 2</a>
          <ul data-menu="submenu-2" class="menu__level">
            <li class="menu__item"><a class="menu__link" href="">Item 2 child</a></li>
            <li class="menu__item"><a class="menu__link" href="">Item 2 child</a></li>
            <li class="menu__item"><a class="menu__link" href="">Item 2 child</a></li>
          </ul>
        </li>
        <li class="menu__item"><a class="menu__link" data-submenu="submenu-3" href="#">Item 2</a>
          <ul data-menu="submenu-3" class="menu__level">
            <li class="menu__item"><a class="menu__link" href="">Item 3 child</a></li>
            <li class="menu__item"><a class="menu__link" href="">Item 3 child</a></li>
            <li class="menu__item"><a class="menu__link" href="">Item 3 child</a></li>
          </ul>
        </li>
      </ul>

I can't find the trick ...
Thanks!

— G

Problem IE11

IE 11 have Problems take a forEach method on NodeList. Resolve them by add this to main.js

    function NodeListToArray(nl) {
          for(var a=[], l=nl.length; l--; a[l]=nl[l]);
         return a;
     }

and
var items = menuEl.querySelectorAll('.menu__item');
items = Array.isArray(items) ? items : NodeListToArray(items);

		items.forEach(function(itemEl, iPos) { ...

and

                   var links = menuEl.querySelectorAll('.menu__link');
                    **links = Array.isArray(links) ? links : NodeListToArray(links);**
                    
		links.forEach(function(linkEl, lPos) {

IE8?

I'm not sure if I should be asking this question. lol
anyways, can't make the menu appear on IE8.

change of starting index doesn't allow usage of back / breadcrumbs control

Hello,
first of all I want to thank you for this awesome blueprint. :-)
I tried to make a non-ajax navigation out of it and managed to open the corresponding submenu via this.current when a subpage is loaded. But as I changed the index the back and breadcrumbs mistake it for the starting index / main menu and the controls do not behave accordingly. Is there any possibility to avoid this or to set a initial submenu when the page is loaded?

Dynamically added elements.

Hello.
Is it possible somehow to make minimal changes to make it work with dynamically created elements?
I use Vue, menu initialized inside of it, and then elemens are created dynamically.

Wordpress issues

I've implemented this to a wordpress theme but there is some kind of an error:
Uncaught TypeError: Cannot read property 'backIdx' of undefined at MLMenu._init (main.js:150) at new MLMenu (main.js:73) at (index):639 at (index):678

In header.php I've included .css files
In page.php menu structure has been added.
In footer page I've included all .js files including modernizr file. (also tried with option to add it in header.php | not working )

I tried it on another website, which has a static structure and all works perfectly so not sure what could be causing this error.

Wordpress version is: 4.9.2

Mobile menu opens and closes immediately on click but not on all pages.

Anyone have this issue? On some of my pages the code runs as expected. But (and only in mobile view), on some pages the menu opens on click but then closes immediately after.

Tried everything I can think of. Any thoughts, I didn’t alter the original JavaScript at all.

Any help would be greatly appreciated.