jQuery

HTML,CSS Javascript,jQuery

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

以前作成したjQueryとCSSで作る「ハンバーガーメニュー」に少し手を入れて、もうちょっとだけ使えるものにしてみましたのでご紹介したいと思います。

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

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

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

上からしか出てこないメニューってのも面白くないので、とりあえずは画面の左から隠れているメニューを表示させるようにしています。

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

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

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

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

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

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

各種スクリプト

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

jQuery読み込み

まず、ヘッダでjQueryを読み込んでおきましょう。

(メニュー用)HTML

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

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

(グローバルナビ用)CSS

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

(ハンバーガー用)HTML

(タップした後)CSS

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

Javascript

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

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

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

サンプルデモはこちら。

関連する投稿

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

-HTML,CSS, Javascript,jQuery
-, ,