動的 エレメント追加と変更( LI を使った横メニュー )

ページの最後にスクリプト追加して、好きな場所へメニューを追加します。
これは、既存のページ仕様を持つ「ブログ」等のユーザー部分の追加による
画面内のカスタマイズを想定しています

まず、追加したい部分のオブジェクトを取得する必要があります。id 属性があれば、
document.getElementById で取得できますし、無くても、
document.getElementsByTagName("要素名")[n] で取得できます。

取得後は、その要素内の新たな DIV に position = "absolute" を指定して
好きな場所に表示位置を定めます( left と top を使用 )
但し、その要素内での位置指定にする為には、最初に取得したオブジェクトに対して、
position = "relative" を指定する必要があります。

エリアの定義は DOM を使用して作成していますが、データ部分は複雑になるので
innerHTML で作成します。そして、LI に対して一括で表示設定を行っています
( getElementsByTagName("LI") で一覧を取得 )

ここで特殊なのは、IE で styleFloat、それ以外で cssFloat になるのですが、
これに関して両方に設定してもエラーになりません。この指定で横並びになりますが、
親の表示エリアが幅を確保していないと横にならないので注意する必要があります
( リストの前に表示されるマークは、listStyle = "none" で非表示にします )

ul の指定でも、IE と それ以外の差が出るのですが、margin と padding を両方 0
にする事によって、表示後の状態を同じようにする事が可能です

1) 対象オブジェクトに position = "relative"
2) 追加 DIV に position = "absolute"
3) 上記 DIV に UL を追加
4) UL 内の LI は、innerHTML で追加
5) LI 毎の設定は、ループ処理で行う
6) 追加 DIV に表示幅を与える
7) その範囲で収まる事を前提に、LI に float:left を指定する
8) listStyle = "none" によって、行のマークを非表示
9) UL の margin と padding を両方 0 にして表示位置を共通にする

背景画像を LI 毎に作成して指定すると、画像ベースのメニューにする事ができます

※ 実際は、LIの内容として、リンクをセットします。

<SCRIPT language="javascript" type="text/javascript">

var newDiv;
var myParent;
newDiv = document.createElement("div");		// 新しい要素作成
newDiv.style.position = "absolute";		// 位置指定可能にする
newDiv.style.left = "0px";			// 位置指定
newDiv.style.top = "0px";			// 〃
newDiv.style.width = "600px";			// 横表示用の表示幅を与える
newDiv.style.backgroundColor = "#909090";

myParent = document.getElementById("main");
myParent.style.position = "relative";
myParent.appendChild( newDiv )

var newUl;
newUl = document.createElement("ul");
newUl.style.position = "absolute";
newUl.style.left = "1px";
newUl.style.top = "0px";
newUl.style.margin = "0";
newUl.style.padding = "0";
newUl.innerHTML = "<LI>過去の記事</LI><LI>Flex3 トピックス</LI><LI>ギャラリー</LI>"

var colList;
colList = newUl.getElementsByTagName("LI");
for( i = 0; i < colList.length; i++ ) {
	colList[i].style.styleFloat = "left";	// IE での横並び
	colList[i].style.background = "url('http://winofsql.jp/image/h1.png') left top repeat-x transparent";
	colList[i].style.cssFloat = "left";	// IE 以外(Opearは両方可)での横並び
	colList[i].style.listStyle = "none";	// 行マークを付けない( IE は横にしたら自動的になくなる )
	colList[i].style.margin = "0 1px 0 0";	// メニューとメニューの間の幅
	colList[i].style.width = "100px";	// メニュー一つ一つの幅
	colList[i].style.padding = "5px";	// メニュー内のテキスト用
}
newDiv.appendChild( newUl )

↓背景画像

このページでは、以下のボタンで実行します