Question about SmartMenus 2 initialization

[matt-bernhardt]

If there is a better place to ask questions about SmartMenus 2, I'm happy to close this issue and ask in that place.

I'm attempting to upgrade our implementation of SmartMenus from 1.2.1 to the 2.0.0-alpha1, and am running into a question about what markup the library expects to be present before initialization.

As context, we are working with Omeka S, a PHP-based application (which is important only insofar as we're using the "browser" code snippets in the documentation for SmartMenus 2, rather than anything with Node.

The basic setup instructions give a set of sample markup that already includes all the classes that SmartMenus 2 appears to need, but which SmartMenus 1 was capable of building itself. I'm wondering if I missed something.

I was hoping that markup like this would be sufficient for initialization:

<div id="navbar-container" class="sm-navbar">
  <ul class="navigation">
    <li>
      <a href="#">Home</a>
    </li>
    <li class="active">
      <a href="#">Page 2</a>
      <ul>
        <li>
          <a href="#">Page 2.1</a>
        </li>
        <li>
          <a href="#">Page 2.2</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">Page 3</a>
    </li>
    <li>
      <a href="#">Page 4</a>
    </li>
  </ul>
</div>

The initialization would then look like this, based on the documentation:

// smartmenus-init.js

const navbar = new SmartMenus(document.querySelector('#navbar-container'));

From my initial investigations, though, this doesn't seem to be the case - and I need to be generating all the classes in the menu beforehand, prior to running new SmartMenus(). I'm hoping that I missed something, and was wondering if you could clarify what markup the library now expects?

[vadikom]

Please note the v2 code is still in early alpha and it might change quite notably (I already have some breaking changes locally that are still not committed - e.g. the single SmartMenus JS component will be split into at least 3 new components Collapse/Offcanvas/Nav for improved flexibility). So I wouldn't really recommend upgrading a working solution at the moment.

That being said to answer your question - the v2 script allows for arbitrary HTML structure by providing a few selectorX options. So in your case, you would need something like this:

const navbar = new SmartMenus(document.querySelector('#navbar-container'), {
  selectorNav: '.navigation',
  selectorSub: 'ul',
  selectorItem: 'li',
  selectorLink: 'a'
});

[matt-bernhardt]

Thanks, I appreciate your reply. I may end up recommending that we hold off on changing our menu until a later time. In the meantime, though, I'll work on an approach like you detail above to see what the level of effort is likely to be.