JSFiddle - React, Tailwind, and code Playground

by Ben Clayton

HTML

<div id="navigation">

</div>

JavaScript

/*
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!! DO NOT MERGE WITH THE NORMAL INFX-NAVIGATION !!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
*/



/*
THIS SCRIPT IS REPURPOSED FROM INFX-NAVIGATION, WITH MAJOR DIFFERENCES TO DRIVE THE BESPOKE CC MENU
*/



$.fn.classList = function() {
  return this[0].className.split(/\s+/);
};

/* javascript to initialise the dropdown menu if present */
// $(document).ready(function(){
// 	_infx.navigation.genericNav.init();
// });
// 
// create the _infx namespace if it doesn't exist already
_infx = (typeof(_infx) === 'undefined') ? {} : _infx;

_infx.consumercare = (typeof(_infx.consumercare) === 'undefined') ? {} : _infx.consumercare;
_infx.navigation = (typeof(_infx.navigation) === 'undefined') ? {} : _infx.navigation;


_infx.navigation.genericNav = function() {
  // if required by the current sites configuration this property will be set to a data
  // structure which accurately represents the required navigation structure for the entire
  // site.
  var _self = this;

  // NEW, GENERIC NAV	

  _self.config = {

    configFromDOM: false,

    useSliding: false,

    JSONMenu: {},

    template: ""

  };

  _self.currentLevel = 0;

  _self.wrapperHeight = 0;

  _self.closeTimer = null;

  _self.removeOriginalNav = true;

  _self.forceWidestWidth = false;

  _self.widestWidth = 0;

  _self.positionedLeft = true;

  _self.autoCorrectNoWrap = true;

  _self.menuShown = false;

  _self.templateReadyJSON = {
    levels: []
  };

  _self.myHandlebarsTemplate = null;

  _self.templateObject = null;


  _self.prepareJSONNavigationLevels = function(jsonArray, $parent, level, parentLevel, createLevel) {

    if (createLevel === true) {
      _self.$topWrapper.append($parent = $('<div class="sliding-nav-level sliding-nav-level-' + level + '" data-level="' + level + '"></div>'));

      _self.$topWrapper.append($parent = $('<ul class="top"></ul>'));
    };


    for (var i = 0; i <...