JSFiddle - React, Tailwind, and code Playground

by grafixguy76

HTML

<nav id="nav">
  <ul>
    <li>
      <a href="?=item-1">Top Level Item 1</a>
      <ul>
        <li><a href="?=sub-1">Sub Item 1</a></li>
        <li><a href="?=sub-2">Sub Item 2</a></li>
        <li><a href="?=sub-3">Sub Item 3</a></li>
        <li><a href="?=sub-4">Sub Item 4</a></li>
        <li><a href="?=sub-5">Sub Item 5</a></li>
      </ul>
    </li>
    <li>
      <a href="?=item-2">Top Level Item 2</a>
    </li>
    <li>
      <a href="?=item-3">Top Level Item 3</a>
    </li>
    <li>
      <a href="?=item-4">Top Level Item 4</a>
      <ul>
        <li><a href="?=sub-1">Sub Item 1</a></li>
        <li><a href="?=sub-2">Sub Item 2</a></li>
        <li><a href="?=sub-3">Sub Item 3</a></li>
        <li><a href="?=sub-4">Sub Item 4</a></li>
        <li>
          <a href="?=sub-5">Sub Item 5</a>
          <ul>
            <li><a href="?=sub-sub-1">Sub-sub Item 1</a></li>
            <li><a href="?=sub-sub-2">Sub-sub Item 2</a></li>
            <li><a href="?=sub-sub-3">Sub-sub Item 3</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</nav>
<script>
      selectnav();
    </script>

JavaScript

var select = document.createElement('select');
var first = document.createElement('option');

first.innerHTML = 'Navigation';
first.setAttribute('selected', 'selected');
select.setAttribute('id', 'mobile');
select.appendChild(first);

var nav = document.getElementById('nav');
var loadLinks = function(element, hyphen, level) {

  var e = element;
  var children = e.children;

  for(var i = 0; i < e.children.length; ++i) {

    var currentLink = children[i];

    switch(currentLink.nodeName) {
      case 'A':
        var option = document.createElement('option');
        option.innerHTML = (level++ < 1 ? '' : hyphen) + currentLink.innerHTML;
        option.value = currentLink.href;
        select.appendChild(option);
        break;
      default:
        if(currentLink.nodeName === 'UL') {
          (level < 2) || (hyphen += hyphen);
        }
        loadLinks(currentLink, hyphen, level);
        break;
    }
  }
}

loadLinks(nav, '- ', 0);

nav.appendChild(select);

var mobile = document.getElementById('mobile');

if(mobile.addEventListener) {
  mobile.addEventListener('change', function () {
    window.location.href = mobile.options[mobile.selectedIndex].value;
  });
} else if(mobile.attachEvent) {
  mobile.attachEvent('onchange', function () {
    window.location.href = mobile.options[mobile.selectedIndex].value;
  });
} else {
  mobile.onchange = function () {
    window.location.href = mobile.options[mobile.selectedIndex].value;
  }
}