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

Yahoo!ブックマークに登録

グレート初心者講座トップへグレート初心者講座 小技集へグレート初心者講座 FAQへグレート初心者講座 質問掲示板へ





 隠しメニューの作成

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


 サンプル

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

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




 隠しメニューの概要

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






 作成手順


完成品



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


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


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



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



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



[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 とします。

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





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

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

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




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


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

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

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

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

上記手順を1回行うと、以下の表の左端のメニューのみが設定された状態となります。
2つめのメニューを行う場合は、上記説明中の menu1 部分を menu2 に読み替えて行い、3つめの場合は menu3 ・・・
4つめは menu4 ・・・ と読み替えながら設定を行って下さい。
イベントのオブジェクトID は
menu1
イベントのオブジェクトID は
menu2
イベントのオブジェクトID は
menu3
・・・
スタイル設定のID は
menu1
イベントのオブジェクトID は
menu1
スタイル設定のID は
menu2
イベントのオブジェクトID は
menu2
スタイル設定のID は
menu3
イベントのオブジェクトID は
menu3

・・・



・・・





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

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



| トップページへ | 小技集 | FAQ | 質問掲示板 | 免責事項  | リンクについて  | お問い合わせ  |
ホームページビルダー・グレート初心者講座 Copyright © 2002-2005 aimix All Rights Reserved