タップすると横からメニューが出てくる、通称「ハンバーガーメニュー」をjs等は使わずcssだけでコピペで簡単に実装する方法を紹介。レスポンシブ対応です。 追記でページ内リンクにも対応しました。ページ内リンクはjQueryをコピペで追加することで実装できます！

ただlion mediaのヘッダーメニューはグローバルメニューではありますが、スマホで表示を確認した場合、表示させるメニュー項目が多いと画面表示されてなくてスクロールしないとメニューが分かりづらい仕様になっています。

スクロールしても固定表示されるヘッダーは珍しくありませんが、その方法はいくつかあります。今回は5つのパターンでサンプルを作成してみました。 Contents1 最初から固定表示1.1 H ハンバーガーメニューの機能追加. ハンバーガーメニューのスクロール時に後ろのbodyタグの中身がスクロールされる場合があるのですが、メニュー部分のみスクロールさせることはできますか？ 企業のhpなどにアクセスすると、必ずと言っていいほど設置されている機能があります。それは『ハンバーガーメニュー』と呼ばれていますが、これは決して食べ物ではありません。こちらではハンバーガーメニューの目的や作り方などを紹介します。 主に以下のことに対して対応してみました。 画面左からメニューをスライドさせる; メニュー内容を増やしてスクロールさせる; メニューをスクロールしてもメインブ …
CSS だけでハンバーガーメニューを設置する という記事を以前書いたのですが、iPhone など CSS のセレクタで hover が効かないデバイスではメニューが開きませんでした。 今回の記事はそれを解消すべく input 要素の checkbox を使う事で、hover ではなく click に反応するようにして iPhone でも CSS だけ …