プロフィールメニュードロップダウン
プロフィールメニュードロップダウンは、ヘッダー右上のアバターをクリックすると開く、ユーザー向けの設定メニューです。トリガーにはアバター・名前・メールアドレスを丸ピル型に収め、開いたメニューの先頭にも同じユーザー情報のヘッダー部を置くことで「今ログインしているのは誰か」を明確にします。
解説
プロフィールメニュードロップダウンは、ヘッダー右上のアバターをクリックすると開く、ユーザー向けの設定メニューです。トリガーにはアバター・名前・メールアドレスを丸ピル型に収め、開いたメニューの先頭にも同じユーザー情報のヘッダー部を置くことで「今ログインしているのは誰か」を明確にします。開閉は短い JavaScript が担い、トリガークリックで toggle、画面のどこかを押すと自動で閉じます。stopPropagation によってボタン自身のクリックでは閉じない作りです。
使いどころ
- Web アプリやダッシュボードのヘッダー右上
- マイページ・設定・課金・ログアウトへの導線集約
- 会員サイトのアカウントメニュー
カスタマイズは、ピルの角丸やアバターのグラデーション、メニュー項目の増減が中心です。<hr> の下に置いたログアウトは色を変えて他の操作と区別すると分かりやすくなります。アバターは頭文字のままでも、写真に差し替えても構いません。ヘッダーが右端にある場合は、メニューが画面外に飛び出さないよう right:0 で右寄せに展開させると安定します。Esc キーでの閉じる処理を足すと操作性がさらに上がります。
よくある質問
ヘッダーの右端に置くとメニューが画面外に出ます。
メニューの位置指定を left:0 ではなく right:0 にすると、トリガーの右端を基準に左方向へ展開するため、画面の外にはみ出しにくくなります。設置場所に合わせて調整してください。
アバターの頭文字を写真に変えられますか？
変えられます。pd__av や pd__head-av の背景グラデーションの代わりに img を入れるか、background-image に画像を指定してください。丸い形はそのまま維持されます。