JavaScript
ループ
メニュー
グローバルナビ

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

More than 1 year has passed since last update.

メニュー名を配列に入れ、jsでグローバルメニューのliを回してメニュー名を配列からとってきて入れていく

html
<body>
  <div class="nav" id="navID">
  </div>
</body>
css
/*
a:hoverでのポイント
li は margin:0; padding:0; に
その中のaタグをdisplay:block;にしてブロック要素とし、そこでpaddingを設定する。
こうすることでhoverした時にli全体にhoverの変化が反映される(margin0かつpadding0だから)
*/
*{ 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;
}
javascript
  window.onload = function(){
    /*navをjson形式でnavメニュー名を取得し、ループで回す*/

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

        /*メニューのループ*/
        for(var i = 0;i < menuData.length; i++){
            /*liエレメントを生成(生成だけで未表示)*/
            var li = document.createElement('li');
            /*innerHTMLで、配列に入ってるデータをli内に入れるtextを入れ込む。*/
            li.innerHTML = '<a href="#">メニュー' + menuData[i] + '</a>';
            /*設定したliをulの中に入れ込む*/
            ul.appendChild(li);
        }
        /*ループで生成したliをulの中にいれていく*/
        navID.appendChild(ul);

  }