mameno-web https://blog.hatena.ne.jp/mameno-web/ Webデザインのための備忘録 https://mameno-web.hatenablog.com/ こんにちは。webデザイン学習中、mamenoです。 今回は、ハンバーガーメニューとその挙動について、私なりに考えて作ってみたのでそのことについて書いていきたいと思います。 今回のゴール 1. ハンバーガーメニューを作る(HTML編) 空の要素を作らない 三本線アイコンについて メニュー展開時の背景のマスクについて 音声読み上げ用クラスについて スマホバージョンとPCバージョンのメニューは分けない 2. ハンバーガーメニューを作る(CSS編) 3.ハンバーガーメニューの挙動を作る（JS編-1） aria-expandedって？ 4.背景をクリックした時でもメニューが閉じるようにする（JS編-2… 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fmameno-web.hatenablog.com%2Fentry%2F2022%2F09%2F30%2F224833" title="ハンバーガーメニューの作り方（疑似要素で頑張ろう編） - Webデザインのための備忘録" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1049228/e7d3103e-8175-dc18-896e-135ee4bdac55.jpeg Hatena Blog https://hatena.blog 2022-09-30 22:48:33 rich https://mameno-web.hatenablog.com/entry/2022/09/30/224833 1.0 100%