私のブログのナビゲーションは input タグを使ってトグル機能を実装しました。
<input id="toggle-nav" type="checkbox" hidden />
<div id="nav">
<label for="toggle-nav">トグル</label>
メニュー...
</div>label の for 属性を使用して見えない input をトグルできましたが、この方法はメンテナンス性が低く、現代的なアプローチではありませんでした。今回はこのコードを最新の文法に改善しつつ、no-js 環境でも動作を保証できるように変更しました。
コードの置き換え
コードを変更する作業は非常に簡単でした。
labelタグの代わりに実際にボタンの役割を果たすbuttonタグを使用- ポップオーバー対象に新しい属性を付与
- ユーザー定義スタイルを適用
- <input id="toggle-nav" type="checkbox" hidden>
+ <button popovertarget="nav" popoveraction="toggle">トグル</button>
- <div id="nav">
+ <div id="nav" popover>
- <label for="toggle-nav">トグル</label>
+ <button popovertarget="nav" popoveraction="toggle">トグル</button>
メニュー...
</div>
+ <style>
+ #nav {
+ /* reset */
+ display: block;
+ padding: unset;
+ }
+ </style>ポップオーバー API の追加機能
ポップオーバー API は外部ライブラリなしで HTML のみで実装できるため、コードの依存性を減らし、コードの長さを最小限に抑える機能を提供します。これはコードのメンテナンス性の面で大きな利点を提供し、クリーンで管理しやすいコードを書くことができます。
-
背景ぼかし処理: ポップオーバーがアクティブになると背景をぼかし、ユーザーインターフェースでポップオーバーの内容にのみ集中できるようにします。この機能は純粋な HTML で簡単に実装でき、追加のスクリプトなしで視覚的効果を簡単に追加できます。
-
自動閉じ機能: ユーザーがポップオーバーの外をクリックしたり ESC キーを押すと、ポップオーバーが自動的に閉じるように設定できます。これも HTML 属性のみで実装可能で、不要な JavaScript コードを書くことなく機能を完成させることができます。
-
アニメーション効果: ポップオーバーの登場と退場を自然にするアニメーション効果も HTML で簡単に適用でき、コードの複雑さを減らし、メンテナンスを容易にします。
ただし、この API は最新のブラウザでのみサポートされているため、互換性が重要なプロジェクトでは caniuse でサポート状況を確認してください。