|
|
このページは隠しメニューのサンプルです |
|
|
上部の 「TOP」 「小技集」 「FAQ」 「質問掲示板」 の各メニューの上にマウスを重ねると、その下にメニューが表示され、そのままマウスをメニュー上へ移動するとメニュー内のリンクを選択できます。
マウスを別の場所へ持っていくと、メニューは再度隠れる隠しメニューのサンプルです。
|
|
 サンプルの概要
このサンプルではホームページビルダーのみの操作で作成しており、またレイアウト枠も使用しません。
メニュー部分のセルは 「スタイル」 → 「現在のタグのみに〜の編集」 → 「位置」 → 「不可視」 を使ってあらかじめ隠しておき、「イベント」 の OnMouseOver （マウスが上に来た時） に隠してあるセルを表示、 OnMouseOut （マウスが出て行った時）に再度隠す設定がしてあります。
また、マウスが表示されたメニュー部分に来た時にメニューが正しく選択できるように、隠しメニューの各セルにも同じ設定がしてあります。
利点と難点
この方法の利点は表などの要素などを使ってホームページビルダーの基本的な操作で作成できる所です。
難点はレイアウト枠を利用しない為に重ねる事ができず、非表示時に実際のメニュー表示部分に余白が出来てしまう為、上のサンプルのように背景画像を使ったりして余白部分をごまかす必要があるなどがあります。
また、JavaScriptがOFFになっているブラウザでは全く動作しませんので、このサンプルのようにメニュー自体にもリンクを設定しておくなど配慮する必要があります。
|
|
|
|
|
操作FAQ