javascriptでグローバルナビをループ その2

・メニュー名を配列に入れる
・jsでグローバルメニューのliを回してメニュー名を配列からとってきて入れていく
・メニュー幅を、メニュー数に依存せずに常にwidthを等倍にする

html

<div class="nav" id="navID">
</div>

css

*{ margin: 0; padding: 0;}
.nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
}
.nav ul li {
  display: inline-block;
  background: #ddd;
  width:-webkit-calc(100%/6);
  width:-moz-calc(100%/6);
  width:calc(100%/6);
  /*border:1px solid #ff00ff;*/
}
.nav ul li a {
  display: block;
  text-decoration: none;
  color: #4e4e51;
  padding: 10px;
  border:1px solid #d4d4d4;
  /*width:100%;*/
}
.nav ul li a:hover {
  background-color: #999;
  color: #fff;
  border:1px solid #999;
}
/*
a:hoverでのポイント
li は margin:0; padding:0; に
その中のaタグをdisplay:block;にしてブロック要素とし、そこでpaddingを設定する。
こうすることでhoverした時にli全体にhoverの変化が反映される(margin0かつpadding0だから)
*/

javascript

window.onload = function(){
  /*navをjson形式でnavメニュー名を取得し、ループで回す*/

      /*ulのIDを取得(この中で処理します)*/
      var navID = document.getElementById('navID');
      /*メニューデータ用配列*/
      var menuData = ['メニュー1','メニュー2','メニュー3','メニュー4'];
      /*ulを生成*/
      var ul = document.createElement('ul');

      /*メニューのループ*/
      for(var i = 0;i < menuData.length; i++){
          /*liエレメントを生成(生成だけで未表示)*/
          var li = document.createElement('li');
          /*生成したliエレメントのwidthを調整  100% をメニュー数のぶん割り算(borderありの時は調整が必要かも)*/
          li.style.width = 100 / menuData.length + '%';
          /*innerHTMLで、配列に入ってるデータをli内に入れるtextを入れ込む。*/
          li.innerHTML = '<a href="#">' + menuData[i] + '</a>';
          /*設定したliをulの中に入れ込む*/
          ul.appendChild(li);
      }
      /*ループで生成したliをulの中にいれていく*/
      navID.appendChild(ul);
}