XDを使ってヘッダーのメニューをホバーしたときにサブメニューを表示する方法について解説します完成イメージホバー時にサブメニューが表示されるように作っていきます。実際に試してみよう【まとめ】XDを使ってサイトデザインをリッチに手順1:対象のメニューをコンポーネントにし、ステートを設定まずは対象となる親メニューをコンポーネントに設定します。コンポーネントにすることでホバー時の状態を変化するためのステートが設定できます。コンポーネントにしたら、右メニューからステートのプラスボタンをクリックし、ホバーステートを選択します。これでホバー時の状態を編集することができます。手順2:ホバーステートを編集し、サブメニューを追加ホバーステートを選択した状態でコンポーネントを編集していきます。コンポーネントの編集は、コンポーネント自体をダブルクリックして編集します。選択しただけではコンポーネント自体を編集できないので注意を。編集状態にしたら、下記のようにサブメニューを追加していきます。これで準備は完了です。現在はコンポーネントをホバーしたときの状態にサブメニューが追加されているだけです。試しに、「初期設定のステート」を選択して状態を確認してみます。上記のように、初期設定のステートではサブメニューがないことが確認できると思います。実際に試してみようではプレビューで動きを確認してみましょう。うまくできましたでしょうか!【まとめ】XDを使ってサイトデザインをリッチにというわけで今回はXDでメニューホバー時にサブメニューを表示する方法を解説しました。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。前の記事Webディレクターにプログラミングの知識は必要か?←必要です【...次の記事スプレッドシートのチェックボックスの値を判定し処理を実行する方...サイト管理人づみ元工場勤務のWebディレクター。現在はWeb制作会社に勤めながら兼業でWeb制作事業を営んでいます。工場退職→フリーのWebライターに転身。→コーディング・プログラミングを独学で学ぶ→Web制作会社に入社。兼業でWeb制作事業。