メニューをJavaScriptで一括更新させたい

質問

いつもお世話になっております。
ページが増えてしまったので、
横並びのメニューをjavaScriptで一括更新できるようにしたいのですが、
JavaScriptが勉強不足でうまく記述できません。（これから勉強していくつもりです）

今回は急ぎのため時間がなく…
どうかアドバイス等、記述を教えていただけないでしょうか？
宜しくお願いいたします。

現在メニューはこのように１ページごと書いてあります。

<div id="globalnavi">
<ul>
<li id="menu1"><a href="#">Home</a></li>
<li id="menu2"><a href="#">menu</a></li>
<li id="menu3"><a href="#">menu</a></li>
<li id="menu4"><a href="#">menu</a></li>
<li id="menu5"><a href="#">menu</a></li>
<li id="menu6"><a href="#">menu</a></li>
<li id="menu7"><a href="#">menu</a></li>
</ul>
</div>

CSS↓-----------------------------------------------

#globalnavi{
margin: 0;
padding: 0;
width: ***;
height: 40px;
}

#globalnavi ul{
list-style-type: none;
margin: 0;
padding: 0;
}

#globalnavi li{
text-indent: -9999px;
float:left;
width: 100px;
margin: 0;
padding: 0;
}

#globalnavi a{
display: block;
width: 100%;
height: 40px;
background-image: url(画像のパス);
background-repeat: no-repeat;
}

#menu1 a{background-position: 0 0;}
#menu2 a{background-position: -100px 0;}
#menu3 a{background-position: -200px 0;}
#menu4 a{background-position: -300px 0;}
#menu5 a{background-position: -400px 0;}
#menu6 a{background-position: -500px 0;}
#menu7 a{background-position: -600px 0;}

#globalnavi a:hover{
background-image: url(画像のパス);
background-repeat: no-repeat;
}

#menu1 a:hover{background-position: 0 -40px;}
#menu2 a:hover{background-position: -100px -40px;}
#menu3 a:hover{background-position: -200px -40px;}
#menu4 a:hover{background-position: -300px -40px;}
#menu5 a:hover{background-position: -400px -40px;}
#menu6 a:hover{background-position: -500px -40px;}
#menu7 a:hover{background-position: -600px -40px;}

回答No.1

y3k · ベストアンサー

●HTMLファイル

<div id="globalnavi">
<ul>
<li id="menu1"><a href="#">Home</a></li>
<li id="menu2"><a href="#">menu</a></li>
<li id="menu3"><a href="#">menu</a></li>
<li id="menu4"><a href="#">menu</a></li>
<li id="menu5"><a href="#">menu</a></li>
<li id="menu6"><a href="#">menu</a></li>
<li id="menu7"><a href="#">menu</a></li>
</ul>
</div>

↓へ置き換えましょう。*.jsは任意のファイル名を指定してください。

<script type="text/javascript" src="*.js"></script>

●JavaScript(ファイル名：*.js)

document.write("<div id=\"globalnavi\">");
document.write("<ul>");
document.write("<li id=\"menu1\"><a href=\"#\">Home</a></li>");
document.write("<li id=\"menu2\"><a href=\"#\">menu</a></li>");
document.write("<li id=\"menu3\"><a href=\"#\">menu</a></li>");
document.write("<li id=\"menu4\"><a href=\"#\">menu</a></li>");
document.write("<li id=\"menu5\"><a href=\"#\">menu</a></li>");
document.write("<li id=\"menu6\"><a href=\"#\">menu</a></li>");
document.write("<li id=\"menu7\"><a href=\"#\">menu</a></li>");
document.write("</ul>");
document.write("</div>");

こうしておけばメニューを変更する際は、*.jsを変更するだけでいいはずです。

お礼

御礼が遅くなり大変申し訳ありません。
教えていただいたコードでばっちり再現できました！
blankも簡単に設定できて、わかりやすく書いていただいて本当に助かりました。
本当にありがとうございます！