ホームページビルダー・グレート初心者講座

　隠しメニューの作成

通常は何も表示されず、マウスを重ねた時だけメニュー部分が表示される隠しメニューの説明です。

　サンプル

以下のサンプルページでは 「TOP」「小技集」「FAQ」「質問掲示板」 の各メニューの上にマウスを重ねると、その下にメニューが表示され、そのままマウスをメニュー上へ移動するとメニュー内のリンクを選択できます。

・隠しメニューサンプルページ

　隠しメニューの概要

サンプルではホームページビルダーのみの操作で作成しており、またレイアウト枠も使用しません。
メニュー部分のセルは 「スタイル」 → 「現在のタグのみに～の編集」 → 「位置」 → 「不可視」 を使ってあらかじめ隠しておき、「イベント」 の OnMouseOver （マウスが上に来た時）に隠してあるセルを表示、 OnMouseOut （マウスが出て行った時）に再度隠す設定がしてあります。
また、マウスが表示されたメニュー部分に来た時にメニューが正しく選択できるように、隠しメニューの各セルにも同じ設定がしてあります。

　作成手順

完成品


・リンク１・リンク２・リンク３・リンク４・リンク５	・リンク１・リンク２・リンク３・リンク４・リンク５

作成手順A では反応するセルとメニュー部を同じ幅で作成する場合の説明です。
オンマウスで表示されるメニューの幅に自由を持たせたい時は作成手順 B を参照して下さい。
この手順で作成すると下の完成品のようなメニューを作成する事ができます。

説明が分かりにくい場合は 隠しメニューサンプルページ か、このページを保存してホームページビルダーで開き、どの部分にどのような設定がされているのかを確認して下さい。

まず、下のように表を挿入し（サイズは指定しません）

オンマウス時に動作させる対象の画像を挿入します。
これは画像でなくセルなどにも反応させる事もできますが、ここでは画像を使います。

下側のセルが隠しメニューとなりますので、リンクなど表示したいものを入力します。


・リンク１・リンク２・リンク３・リンク４・リンク５	・リンク１・リンク２・リンク３・リンク４・リンク５

[1] メニュー部分セルの不可視設定】

左端の列から順番に行っていきます
下部セルのメニュー部分に隠すスタイルを適用します。
下部のセルを右クリックし 「スタイルの設定」 → 「現在のタグのみ～の編集」 → 「位置」タブと辿っていくと以下のような設定画面が表示され、この中の 「見え方」 という項目の 「不可視」 にチェックを入れて「OK」を押します。

[2] 隠すメニューに ID を設定する

上記手順で「OK」をすると以下の画面が表示されていると思いますので、ここの ID の欄にセルの ID をつけます。
閉じてしまった場合は、再度同じセルを右クリックし 「スタイルの設定」から、この画面を開いて下さい。
この ID は適用な名前でいいですが、同じページに同じ ID は使用できませんので、メニューが複数ある場合は必ず別の ID を付けて下さい。
例えば左から　menu1　menu2　menu3　menu4 ・・・　などといった ID を付けると良いと思います。
手順通りに作成する場合、左のメニューセルに menu1 と付けて下さい。

[3] 画像にイベントの設定をする

次にマウスが上に乗った時に先ほど不可視の設定をしたセルが表示されるようにします。
左側の反応させる画像（この例ではTOPという画像）を右クリックして 「イベントの設定」を選択すると以下のような設定画面が表示されますので、下の画像の矢印の順番で選択して設定します。

最後の オブジェクトの ID(I) は、どの ID を表示するかを指定する項目で、先ほど付けた ID がオプションメニューで選択できるようになっており、現在設定中の画像に対応させたいセルの ID を指定します。 この例では menu1 とします。
設定が終わったら、そのまま引き続き次の手順を行って下さい。

次はマウスが画像から離れた時に、表示したメニューを再度消すイベントを設定します。
下の画像の矢印の手順をクリックしていき、最後にオブジェクト ID を指定します。
ここで設定するオブジェクト ID も上記で設定したオブジェクト ID と同じものです。
この例では menu1 とします。

ここまで設定できたら、一度プレビューで正しく動作するかを確認してみて下さい。
画像の上にマウスを乗せた時にメニューが表示され、マウスを画像から離した時にメニューが消えればＯＫです。

[4] メニュー部分のセルにイベントの設定をする

上記手順と同様なので説明は省きますが、今度は表示させるメニュー部分のセルにも同様のイベント設定を行います。
上記の設定だけの場合、画像の上にマウスがある間はメニューが表示されますが、表示されたメニューを操作しようとしてマウスを動かすとメニューが消えてしまうという状態となりますので、表示されたメニュー部分にマウスが乗っている間もメニューが表示され続けるようにしておきます。

下のココを設定という部分のセルを右クリックし上記 画像にイベントの設定をする と同じ手順でイベントを設定します。
このイベントを設定すれば左側のメニューは完了ですので、プレビューで確認してみて下さい。
TOP部分の画像の上にマウスを持っていった時にメニューが表示され外すとメニューが消える、またTOP部分の画像の上にマウスを持っていった時にメニューが表示されメニューの上にマウスを持っていってもメニューが消えない事を確認します。


ココを設定

【2つめ以降のメニュー設定】

2つめ以降のメニュー設定をする場合は上記説明の [1]～[4] の手順を繰り返しますが、以下の注意事項がありますので、必ず読んだ後に設定を行って下さい。
自信が無い方はとりあえず１つめのメニューが正しく動作した時点で保存しておくか、ページを新規作成して実験して下さい。

1.　ID は必ず別の名前を使用する
一番目のメニューが menu1 ならニ番目は menu2 、三番目は menu3 ・・・など

2.　イベント設定をする場所に注意する
画像やセルなど設定する部分が正しく選択されている事を確認した後「イベントの設定」を行って下さい。
反応する部分が画像の場合は問題ありませんが、正しく選択されているつもりでも B や A タグが選択されてしまっている場合がありますので注意が必要です。

3.　オブジェクト ID は対応するものを設定する

上記手順を１回行うと、以下の表の左端のメニューのみが設定された状態となります。
２つめのメニューを行う場合は、上記説明中の menu1 部分を menu2 に読み替えて行い、３つめの場合は menu3 ・・・
４つめは menu4 ・・・と読み替えながら設定を行って下さい。

イベントのオブジェクトID は menu1	イベントのオブジェクトID は menu2	イベントのオブジェクトID は menu3	・・・
スタイル設定のID は menu1 イベントのオブジェクトID は menu1	スタイル設定のID は menu2 イベントのオブジェクトID は menu2	スタイル設定のID は menu3 イベントのオブジェクトID は menu3	・・・・・・

説明が分かりにくい場合は 隠しメニューサンプルページ か、このページを保存してホームページビルダーで開き、どの部分にどのような設定がされているのかを確認して下さい。
実際に説明を見ながら、サンプルページなどの設定を確認すると分かりやすいと思います。

マウスカーソルが移動する部分のテーブルやセルの枠線は 0ピクセルにして下さい。
枠線があると、隠しメニューが表示されてから、表示されたメニューにマウスを移動する際にメニューが消えてしまいます。