%E3%83%91%E3%83%8A%E3%82%BD%E3%83%8B%E3%83%83%E3%82%AF %E9%A3%9F%E6%B4%97%E6%A9%9F %E6%B0%B4%E6%BC%8F%E3%82%8C %E5%BA%95

ハンバーガーメニューについて今回調べている中で面白い情報を得たので併せてご紹介します。 このボタンもハンバーガーメニューだろうと思いきや、少しカタチが変わると一部では別の名前で呼ばれることもあるそうです。 しばらくブログを書くタイミングが無かったので久しぶりの更新です。書き方を忘れないうちに更新しておこうと思います。今回はちょっと前に見たCSS position:sticky;のご紹介です。 position:sticky;とは 一般的にスクロールに応じた要素の固定といえばposition:fixed モバイル表示の時右上に「≡」アイコンで設置したりするハンバーガーメニュー。通常ならばJavaScriptを用いてクリック時に開くようコードを組むのが普通ですが、CSSだけで設置してみようと思います。今回作るハンバーガーメニューはマウスホバー時に開くタイプです。 ホームページ作成や運用支援する情報サイト「ホームページTips」は静岡県浜松市を拠点にホームページ制作を行うアドレック事業部が運営しています。プロのクリエイターがホームページ制作や運用のノウハウについて無料公開しています。 どういうことかというとページ内をスクロールしていてもメニューは同じ場所に既存コンテンツにかぶさる形で表示されるということです。 おなじようにハンバーガメニューの部分もfixedに変えておけばページをスクロールしても追従してきます。 html、cssのコピペで簡単にできる「ハンバーガーメニュー」・「ナビゲーションドロワー」を作り、その中にサイトのカテゴリリンクを入れていく方法を解説します。この記事を読めば、レスポンシブ対応の綺麗なハンバーガーメニューを簡単に作れること間違いなし！