somemo's diary

プログラマ、雑記、プログラミング関係はLinkから、数式はこっちでまとめていることが多い

【Javascript】固定メニューの作成

左上など特定の位置に固定したメニューを作成し、その中に便利な情報を表示したいことがよくあります。それをJavascriptで実現する方法のメモです。

メニューの作成

これは、Javascriptで新しい要素を作成するだけです。

var menu = doument.createElement("div");
menu.innerHTML = "メニューの内容";
document.body.appendChild(menu);

div要素を作成し、body要素の末尾に追加しただけです。menuの内容は自由に作成してください。

位置の固定

これは、Javascriptではなくhtml/cssの内容です。実現するためにJavascriptを以下のように利用しています。

menu.style.top = "0px";
menu.style.position = "fixed";

位置を一番上にした後、固定しています。DOM操作でこのように書くことを知りませんでした。

おまけ

実行したページの背景や文字色などのスタイルによって作成したメニューが見えないことがあります。そんなときは、位置の固定でも行ったようにスタイルを変更してしまいましょう。

span.style.color="red";
span.style.backgroundColor="yellow";