並び替えドロップダウン
並び替えドロップダウンは、「新着順・人気順・価格順」などの並び順を選ぶための UI です。トリガーには現在選ばれている項目名が表示され、クリックでメニューが開きます。JavaScript は二役を担い、開閉のトグルと外側クリックでの自動クローズに加え、項目を選ぶと現在表示のテキストを textContent で更新…
解説
並び替えドロップダウンは、「新着順・人気順・価格順」などの並び順を選ぶための UI です。トリガーには現在選ばれている項目名が表示され、クリックでメニューが開きます。JavaScript は二役を担い、開閉のトグルと外側クリックでの自動クローズに加え、項目を選ぶと現在表示のテキストを textContent で更新し、選択中を示す is-current クラスを付け替えます。これにより「今どの順で並んでいるか」が常にボタン上に出る仕組みです。
使う場面
- EC サイトの商品一覧の並び替え
- 検索結果ページのソート切り替え
- ブログや作品一覧の表示順選択
各項目の値は data-val 属性に持たせてあるので、ここを実際の並び替えキー（日付・価格・評価など）と対応づけ、選択時に一覧を再描画する処理を足せば本番で機能します。メニューの位置は left の値で調整でき、ラベル幅に合わせて開く位置を整えます。項目はリンクの行を増減するだけで変更でき、影の濃さや角丸で見た目を調整できます。キーボードでも選べるよう、矢印キーや Enter での操作を足すとアクセシビリティが向上します。
よくある質問
選んだ並び順で実際にデータを並び替えるには？
各項目の data-val 属性を並び替えキーとして使い、選択時のクリック処理の中で一覧データをそのキーで並べ替えて再描画してください。スニッペット自体は表示の切り替えまでを担当します。
選択肢を追加・削除できますか？
できます。メニュー内のリンク行をコピーまたは削除し、data-val とラベルを書き換えるだけです。表示中のテキストは選択時に自動で更新されるため、初期値だけ整えれば問題ありません。