jQuery

HTML,CSS Javascript,jQuery

【JS】jQueryとCSSで作る「ハンバーガーメニュー」を少しリニューアルしてみました

2019/12/26

以前作成した『jQueryとCSSで作る「ハンバーガーメニュー」』に少し手を入れて、よりスタイリッシュ(?)に使えるものにしてみましたので、ご紹介したいと思います。

ハンバーガーメニューの機能追加

主に以下のことに対して対応してみました。

  1. 画面左からメニューをスライドさせる
  2. メニュー内容を増やしてスクロールさせる
  3. メニューをスクロールしてもメインブロックは固定する

上からロールダウンしてくるのも良いですが、今回の版では画面左からメニューを出現させることとしました。
なお、スクリプト(CSS)の設定でメニューを右から出すことも可能です。
ただし右から出す場合はハンバーガー(メニュー)の位置を調整する必要があると思いますが、今回は触れませんのであしからず。

ひとまず、サンプルデモはこちら。

PCでの操作ですが、動画も作成してみました。

右肩にあるハンバーガーメニューをクリック(タップ)することで、画面左側から20個の内容があるメニューがせり出してきます。

上下のスクロールに対応し全てのコンテンツを表示させるのと、メニューの一番下までスクロールさせた状態でさらにスクロールさせた場合の前の版ですとメインコンテンツがスクロールされてしまいましたが、今回はメインコンテンツはスクロールしないようにしています。

なお、PCで見ている場合にブラウザの横幅によって背景色が変わるようになっていますが、これは単にブレイクポイントを調整していた時の設定を消し忘れているだけです(苦笑)

ハンバーガーメニューの各種スクリプト

では恒例のスクリプト紹介です。

jQuery読み込み

まず、ヘッダでjQueryを読み込んでおきます。
バージョンは任意のもので構いません。

(メニュー用)HTML

左からせり出すメニュー本体のHTMLです。
スクロールさせるために、あえてメニュー項目を20個作ってみました。

今回はメニュー内にタイトル用にヘッダーを追加しています。

CSS

(グローバルナビ用)CSS

左からせり出してくるメニュー用のCSS。
装飾と、メニューそのものを見えない位置に配置する内容となっています。

(ハンバーガー用)CSS

(タップした後)CSS

タップした後の「X」の形とするためのCSSです。
transformプロパティを使用します。

Javascript(jQuery)

  • ハンバーガーメニューをタップすることでactiveクラスを付与/削除する
  • メニューを表示させた時に、body に対して overflow:hidden を付与し、不要なスクロールをさせない

ということをするjQueryのスクリプトです。

以上で、jQueryとCSSで作るハンバーガーメニューの出来上がりです。

デモ

デモはこちら。

関連する投稿

【JS】スマホ用のハンバーガーメニューをjQueryとCSSで作成する方法

-HTML,CSS, Javascript,jQuery
-, ,