今日は友達のリクエストで、私のウェブサイトにスライド メニューの効果に関する簡単なチュートリアルを書きます。牛江大学のソフトウェア学部では、Itnow の広告にもレイヤー スライドの効果があるようです。この効果を使用しない場合は、ボタン レイヤーをクリックすると、ボタン レイヤーがゆっくりとスライドして表示され、限られたページ スペースを節約し、うらやましい視覚効果を実現できます。この効果を表示するには、ここをクリックしてください。
本題に取り掛かり、くだらない話はやめましょう。準備は次のとおりです。
1. dw で新しい空のドキュメントを作成します (または、効果を追加するページを開きます)。
2. 独自の CSS スタイルを設定します。
3． ページ上に 500 ピクセルの長さのテーブルを挿入します (ここに注意してください: テーブルを挿入する目的は、さまざまな解像度でコントロール レイヤの相対位置を変更しないようにすることです。ページでこれまでに関連する設定を行っていない場合は、これを行う必要がある場合があります)ページ構造の整理に時間をかけてください)。
4. 表内にカーソルを置き、メニュー[挿入 - レイヤー]をクリックして、長さ500、高さ20のレイヤーを挿入し、「layer1」という名前を付けます。
5. 次に、レイヤーlayer1にカーソルを置き、メニュー[挿入 - レイヤー]をクリックし、長さ500、高さ130のレイヤー2を挿入し、レイヤー2のプロパティの左マージンと上マージンを0に設定し、次のように指定します。お好みの背景色です。
6． 次に、ステップ 5 の方法を繰り返し、レイヤー「layer3」を挿入します。このレイヤーには特別な用途はありません。単にいくつかのボタンを配置するだけです。最終的に私の場合は次のようになりました。
ヒント: ここでこれを行う目的は、スライドさせたいレイヤーの前にバッフルを追加することです。これをクリックしたときにのみ、レイヤーがレイヤーの下からゆっくりとスライドします。
いよいよ、今日作成するスライドメニューの制作工程に正式に入ります。
ここで、上記の手順 5 を再度繰り返し、別のレイヤー Layer4 を挿入し、レイヤーのプロパティを幅 500 と高さ 150 (レイヤー 2 とレイヤー 3 の高さの合計) に設定し、レイヤー Layer4 を下の他の 2 つの画像レイヤーに合わせて調整します。 。図に示すように:
次に、レイヤー 2 の前の目をクリックして目を閉じ、その下のレイヤー 4 が見えるようにします。
この時点で、ALT + F9 をクリックしてタイムライン パネルを開きます。DW によってデフォルトのタイムライン Timeline1 が追加されました。次に、スライドするレイヤー Layer4 を選択し、それを右クリックして [タイムラインに追加] を選択します。 ] この時点で、タイムライン パネルに作成したばかりのレイヤー「layer4」が表示され、正常に追加されたことがわかります。 
次に、タイムラインの 15 番目のフレームをクリックし、レイヤー 4 のプロパティ パネルで上マージンを 150 に調整します。この時点で、スライド レイヤーの準備が整いました。タイムライン上の赤い四角を 1 から 15 までゆっくりとドラッグすると、レイヤー 2 とレイヤー 3 の下からレイヤーがゆっくりとスライドして出てくるのがわかります。 
さて、このスライディング レイヤー「layer4」にアクションを設定してアクティブにするだけで済みます。これで完了です:) この前に、追加した「layer3」にテーブルを挿入し、「layer4」ボタンに 2 つを設定しました。
まず、スライディング レイヤーをアクティブにするアクションを設定します。 [このボタンを展開する] を選択し、[動作] パネルに移動して、
DW が出てくるメニューで [タイムライン - タイムラインの再生] を選択すると、フォームが表示されます。上のドロップダウン メニューで timeline1 を選択します。
次に、動作パネルでイベントが onclick であることを確認します。
ここで、展開ボタンをクリックすると、レイヤーが上から下にゆっくりとスライドして表示されます。
どうですか、ご覧のとおりです:) 単純な閉じるアクションをレイヤーに追加しましょう。つまり、閉じるボタンをクリックするとレイヤーが非表示になります。 [閉じる] ボタンを選択し、[動作] パネルに移動して、表示されるメニューで [非表示のレイヤーを表示] を選択し、ポップアップ フォームでレイヤー 4 を選択し、下の [非表示] ボタンをクリックして非表示に設定します。以下の図を参照します。 
さて、もう一度プレビューしたところ、展開した後、クリックしてレイヤーを閉じると、レイヤーが消えてしまったことがわかりました:) しかし、もう一度クリックして展開しても、まだ何も起こらないようです。設定されていないアクションがあります。
先ほどの手順 5 を繰り返し、展開ボタンを選択し、[タイムライン - タイムライン フレームに移動] アクションを追加し、ポップアップ フォームのドロップダウン メニューから timeline1 を選択し、フレーム番号に 1 を追加します。
さて、このプレビューでは、この問題が解決されたことがわかりました。しかし、まだ問題を見落としているようです。クリックして閉じるとレイヤーが非表示に設定され、クリックして展開しても反応しません。問題を解決するには、古い方法を使用して展開ボタンにアクションを追加するだけです。
手順 5 を繰り返し、[非表示レイヤーを表示] を選択します。先ほどの手順 6 とは逆に、確認後、非表示レイヤーが動作パネルに表示される時間が onclick であることを確認します。この時の展開ボタンの動作パネルは以下の通りです。
OK、もう一度プレビューします。すべて問題ありません。
この時点でエフェクトは完成しました。もちろん、誰でも自分でより良いエフェクトを作成できますが、タイムラインとアクション動作の使い方をマスターしている限り、すべてのエフェクトは単なる操作の問題であることに変わりはありません。