通知ベル（未読バッジ付き）
通知ベルは、ヘッダーに置くベルアイコンの右上に未読件数の赤バッジを重ね、クリックで通知一覧をドロップダウン表示する UI です。バッジは position:absolute でベルの右上に重ね、件数を表示します。
解説
通知ベルは、ヘッダーに置くベルアイコンの右上に未読件数の赤バッジを重ね、クリックで通知一覧をドロップダウン表示する UI です。バッジは position:absolute でベルの右上に重ね、件数を表示します。メニューは普段 opacity:0 と pointer-events:none で隠れており、ボタンを押して is-open が付くと transition でふわっと開きます。JavaScript はボタンのクリックで開閉を切り替え、メニュー外をクリックすると自動で閉じる動作も持っています。
使う場面
- SNS や Web アプリのヘッダーで未読通知を知らせたいとき
- 管理画面でお知らせやアラートをまとめて表示したいとき
- コメント・いいね・フォローなどの活動通知を一覧で見せたいとき
未読の項目は .nb__item--new で背景に淡い色を付け、左に小さな赤い点を添えて既読と区別しています。件数バッジの数字は HTML を書き換えるか、JavaScript で更新します。クリック時に stopPropagation を呼んでいるため、ボタン自身のクリックで即座に閉じてしまう問題を防いでいます。バッジ色 #dc5050 は注意を引く赤で固定されています。
よくある質問
未読件数のバッジはどう更新しますか。
バッジは .nb__badge の中の数字を書き換えるだけです。実運用では通知データの件数を JavaScript でこの要素に反映させます。0件のときはバッジ自体を非表示にすると自然です。
メニューの外をクリックすると閉じるのはなぜですか。
document 全体のクリックで is-open を外す処理を入れているためです。ボタン自身のクリックでは stopPropagation でこの処理を止めているので、開いた直後に閉じることはありません。