XDでヘッダーのホバーメニューを作成する方法

今回はAdobe XDを使ってヘッダーのメニューをホバーしたときにサブメニューを表示する方法について解説します

完成イメージ

ホバー時にサブメニューが表示されるように作っていきます。

手順1:対象のメニューをコンポーネントにし、ステートを設定

まずは対象となる親メニューをコンポーネントに設定します。

コンポーネントにすることでホバー時の状態を変化するためのステートが設定できます。

コンポーネントにしたら、右メニューからステートのプラスボタンをクリックし、ホバーステートを選択します。

これでホバー時の状態を編集することができます。

手順2:ホバーステートを編集し、サブメニューを追加

ホバーステートを選択した状態でコンポーネントを編集していきます。

コンポーネントの編集は、コンポーネント自体をダブルクリックして編集します。選択しただけではコンポーネント自体を編集できないので注意を。

編集状態にしたら、下記のようにサブメニューを追加していきます。

これで準備は完了です。現在はコンポーネントをホバーしたときの状態にサブメニューが追加されているだけです。

試しに、「初期設定のステート」を選択して状態を確認してみます。

上記のように、初期設定のステートではサブメニューがないことが確認できると思います。

実際に試してみよう

ではプレビューで動きを確認してみましょう。

こんな感じ。うまくできましたでしょうか!

【まとめ】XDを使ってサイトデザインをリッチに

というわけで今回はXDでメニューホバー時にサブメニューを表示する方法を解説しました。

デザイン段階でこれくらい動きが表現できればクライアントも制作サイドもイメージがしやすいですので、ぜひ使ってみては!

それではっ!

その他XDに関連する記事はこちら

XDでハンバーガーメニューを実装する方法 【2分で実践】XDで画面下固定フッターを作成する方法 XDで固定ヘッダーを作成する方法【応用方法もセットで解説】

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA