メニュー名を配列に入れ、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);
}