エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
CSSのみ(JavaScriptなし)でハンバーガーメニューを実装する | Sabigara
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
CSSのみ(JavaScriptなし)でハンバーガーメニューを実装する | Sabigara
最近開発しているプロジェクトで、JavaScriptを使わずにハンバーガーメニューを実装したい場面があった... 最近開発しているプロジェクトで、JavaScriptを使わずにハンバーガーメニューを実装したい場面があった。いろいろ試してみたところ、最低限は実現できたのでここにメモしておく。 ただし、hackyというか無理矢理感があったり、アクセシビリティを担保するのが難しかったりするので、JavaScriptを使えるなら使ったほうがいい。このあたりの問題点は後述する。 CodeSandbox 仕様 スクリーンの幅に余裕がある場合 ハンバーガーメニューではなく、下図のように普通のナビゲーションとして表示する。 スクリーンの幅が一定以上狭い場合 ナビゲーションを非表示にして、ハンバーガーメニューを開くためのボタンを表示する。 クリックしたら右から滑ってくる。 閉じるボタンで閉じる 当然閉じてほしい。 オーバーレイのクリックで閉じる できればメニューの範囲外、すなわち黒の半透明のオーバーレイをクリックしたと