Programmatically Make NavBar for HTML via CSS3 and JS

Make NavBar for HTML via CSS3 and JS

by James Wassinger

HTML

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<div>
<ul id="test" class="w3-navbar w3-border w3-light-grey w3-center">

</ul>
</div>

JavaScript

function makeNavigation(navArray, navID) {
  var numNav = navArray.length;
  var spaceAllocated = (100 - 2) / numNav;
  var theID = document.getElementById(navID);
  for (var i = 0; i < numNav; i++) {
   theID.innerHTML += '<li style = "width:"'+spaceAllocated+'%><a  href="#'+navArray[i]+'.html">'+navArray[i]+'</a></li>';
  }
  }
  
  makeNavigation(["PageOne","PageTwo","PageThree"], "test")