有限会社ミスティーネット JavaScript講座 HOME / ご利用について / リンクに関して / 推奨環境 / 免責・規約 / お問合せ / リンク集 / Q&A
安心・高速・低価格!ホスティングサービスは有限会社ミスティーネットへ!

JavaScript 入門編

JavaScript 活用編

ラブラブメールでツーショット

人気サイトランキング


   HOME >> 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;
}
予め、通常時とマウスオーバー時の2つのメニュースタイルを準備しておきます。
マウスオーバー時に 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 関数では、サブメニューの表示・非表示の切替を行います。




Copyright (C) since 2004 有限会社ミスティーネット All Rights Reserved .