ミスティーネット･JavaScript講座

■ ポップアップメニューの表示

ポップアップメニューとは、メニュー項目をマウスでポイントしたときにサブメニューを表示させる機能です。限りあるブラウザーの領域を圧迫せずに、たくさんのメニュー項目を持たせることが出来ます。

サンプルスクリプト

ポップアップメニューのサンプルです。
メニューにマウスを持っていくとサブメニューが表示されます。
サブメニューをクリックすると、そのサイトへリンクします。

検索エンジン

新聞社

コンピューターニュース

生活情報

ネットの本屋さん

スクリプトの説明

ポップアップメニューではJavaScrip を使ってスタイルの設定を動的に変更することで、メニューの表示や消去、色の変更、リンク先へのジャンプ設定などを行っています。
下記の4つの関数を使ってメニューの表示を行っています。

▼ rollOver	･････	メニュー･ロールオーバー
▼ jumpUrl	･････	URLリンク
▼ popupMenu	･････	ポップアップメニュー
▼ displayMode	･････	表示モード切替

[ HTML部分(関数の呼び出し) ]

<div class="sampleMenu01"
onmouseover="popupMenu(this, 1,360,380);rollOver(this,'sampleMenu02');"
onmouseout="displayMode('none');rollOver(this,'sampleMenu01');"
>検索エンジン</div>

サンプルのピンク色のメニューを表示しているソースです。
メニュー項目ごとに、このソースを追加していきます。

onmouseover の動作
「popupMenu」関数でサブメニュー(ポップアップメニュー)の表示を行います。また、「rollOver」関数でメニューの色を薄いピンク色に変更しています。色を変更することで、どのメニュー項目をポイントしているかがわかりやすくなります。

onmouseout の動作
「displayMode」関数でサブメニュー(ポップアップメニュー)の消去を行います。同時に、「rollOver」関数でメニューの色を元のピンク色に戻しています。

[ rollOver 関数の内容 ]

function rollOver ( obj, val ) {
obj.className = val;
}

予め、通常時とマウスオーバー時の２つのメニュースタイルを準備しておきます。
マウスオーバー時に rollOver 関数を使用して、メニューのスタイルクラスを変更することで、現在指定しているメニュー項目の背景色･文字色をかえてわかりやすくしています。

[ jumpUrl 関数の内容 ]

function jumpUrl ( url ) {
window.open(url, "new");
}

jumpUrl 関数では指定されたURLをポップアップウィンドウで表示します。

[ popupMenu 関数の内容 ]

function popupMenu ( obj, item, w, h ) {
･･････
}

popupMenu 関数は各メニュー項目のサブメニューを表示する関数です。
各引数の内容は下記のとおりです。

obj ････指定されたオブジェクト名
item ････メニュー項目の番号 (どのメニュー項目を指定したか)
w ････サブメニューの位置(横)
h ････サブメニューの位置(縦)

popupMenu 関数詳細

[ displayMode 関数の内容 ]

function displayMode ( mode ) {
document.getElementById('submenu').style.display = mode;
}

desplayMode 関数では、サブメニューの表示･非表示の切替を行います。

▲TOPへ


	HOME / ご利用について / リンクに関して / 推奨環境 / 免責･規約 / お問合せ / リンク集 / Ｑ＆Ａ