I am stupid. How to set up?

[mark22]

I've included the nav-priority.js and nav-priority.css in my header and I've put the sample HTML in:

Toggle navigation BBC

• Home
• UK
• World
• Sport
• Opinion
• Culture
• Business
• Lifestyle
• Fashion
• Environment
• Tech
• Travel

But nothing works.

It looks like your sample page uses bootstrap, is that a requirement for this? Is there an explicit JS call I need to run to actually initialize the menu system?

Right now All I see is a big blocky/ugly "Toggle navigation" button which doesnt do anything and a list of the menu items horizontally, but no prioirty+ or anything dynamic. Thanks much!

[skywalkapps]

Hello @mark22,
the example uses Bootstrap for styling of the navbar component. The plugin itself can work without it, however you have to provide your own CSS for the navbar and change plugin defaults. I will add one more example to the documentation, which does not use Bootstrap. Will let you know...

[mark22]

@skywalkapps thanks for getting back to me so quickly. So besides the styling, the navigation items will not actually autopopulate into a MORE type of dropdown. I can stylize them to float:left just fine, but they expand their container and don't shrink when the page shrinks.

Is there a JS call I need to make to get the navigation system to intialize/start up? Most JS/JQuery plugins I use have a minimal call to get the plugin to startup. Just wondering if I missed a step here...

Thanks!

[mark22]

@skywalkapps

For example, I found this on your demo page, is this the bare bones JS needed for it to start up?

Thanks!

<script>
document.addEventListener("DOMContentLoaded", function(event) {
  window.navPriority('[data-nav="priority"]')

  var triggerEvent = function(element, eventName) {
    var event; // The custom event that will be created

    if (document.createEvent) {
      event = document.createEvent("HTMLEvents");
      event.initEvent(eventName, true, true);
    } else {
      event = document.createEventObject();
      event.eventType = eventName;
    }

    event.eventName = eventName;

    if (document.createEvent) {
      element.dispatchEvent(event);
    } else {
      element.fireEvent("on" + event.eventType, event);
    }
  }


});

</script>

[skywalkapps]

I have added one more example to the documentation to show, how it works without the Bootstrap... To make it work, you need to include only nav-priority.min.js and nav-priority.min.css. Then you just initialize it via:
document.addEventListener("DOMContentLoaded", function(event) { window.navPriority('[data-nav="priority"]') }

Then you need just a few lines of CSS to style your menu as inline list. That is basically it.

[adamjohnson]

I looked at this too. Tried using this sans-Bootstrap but it appears Bootstrap is indeed still handling the interaction layer. This includes toggling dropdown classes, aria-expanded, and aria-hidden⁠—maybe others.

So, it appears that, at this time, if you're going to use it without Bootstrap, you'd need to handle most of the styling and toggling of classes and attributes (CSS + JS).

Also, in case anyone needs to know how to specify plugin options, here's a copy-paste snippet that should get the point across:

// Options:
var navPriorityOptions = {
  dropdownLabel: 'More',
  dropdownMenuClass: 'nav-priority-dropdown-menu'
};
document.addEventListener('DOMContentLoaded', function (event) {
  window.navPriority('[data-nav="priority"]', navPriorityOptions); // <---- Options object goes here
});