今回は６７回目です。
メニューをクリックすると下に詳しい項目が表示されます。
メニューをクリックすると下に詳しい項目が表示されます。
クリックすると出るメニュー
| 今回の効果は、メニューをクリックすると、下のメニューがずれて下がり、更に詳しい項目が表示されるというものです。 メニューをもう一度クリックすると、あとから出て来た項目は無くなり、下にずれていたメニューが上に戻ります。 今月も少しだけこの実験にお付き合い下さい。 |
 |
ポイント | 最初の .parent、.child、.item、.content は、各レイヤーの名前です。今回は４つのレーヤーに分けています。 .parent の top:150 の数字を変えると、メニュー全体の画面上からの位置が変わります。大きい数字にすると下になります。 left:310 は、画面左からの位置です。大きい数字にすると右に寄ります。 width:200 は、このメニューを表示させる親レイヤーの幅の大きさです。 .item は、最初に表示されているメニュー３行レイヤーで、height:26 の２６の部分を変えることによって改行幅を変更できます。 .content は、詳しい項目のレイヤーで、項目の長さが長くなる場合は、width:200 の２００の部分を大きい数字にする必要があります。 layer-background-color:#ffffff の色の指定は、＜body＞タグの bgcolor="#ffffff" の指定と同じにします。 ＜head＞タグの中の４つ目の script language= の一番初め blockN = 4; の４はレイヤーの数を表します。 それよりちょっと下の interval = 30; の３０を大きくすると、詳しい項目が表示される時のスピードが遅くなります。 |
|---|---|---|
 |
効果 | メニューをクリックすると、interval = 30; で指定したスピードで項目が下に表示されます。 |
 |
使い方 | 実際の実験画面のソースをご覧下さい。 |
今回の実験でわかったこと
| この効果はＩＥの６.０と、ネットスケープの７.０で確認しています。 Ｍａｃは確認していません。 この実験は、JavaScript が長くて難しいので、まずはとにかくソースをコピーして、メニュー項目とリンク先だけ変更してみて下さい。 画像を使わないで動きのあるメニューを作ることができると思います。 ご意見などありましたらメールを送って下さい。お待ちしています。
(E-mail:hiroko@ladys-page.com)
|
