ウェブ

ハンバーガーメニューをコピペで簡単実装【HTML・CSS・jQuery】

ハンバーガーメニュー

PCなどの大きいモニターサイズでナビゲーションメニューを全部表示できるが、スマホなどの小さいディスプレイでは表示できる面積が狭い為、ヘッダーのナビゲーションメニューを全て綺麗に表示する事ができません。

ディスプレイサイズが1150px以上であれば、ナビメニューをすべて表示し、1150px以下はナビメニューを非表示にして、クリックorタップで表示させるようにする設定が必要になってきます。

今回はWeb制作で必須となるハンバーガーメニューjQueryを使ったハンバーガメニューの作り方を解説します。

動作例

ハンバーガーメニューの【動作】

↓1150px以上の幅がある時の表示

ハンバーガーメニュー1150px以上
ハンバーガーメニュー1150px以上

↓1149px以下の幅の時にハンバーガーメニュー表示

ハンバーガーメニュー1149px以下
ハンバーガーメニュー1149px以下

↓マウスホバー時&クリックやタップした時に文字色が変わります。

マウスホバー時&クリックやタップ動作
マウスホバー時&クリックやタップ動作

ハンバーガーメニュー【コード】

ハンバーガーメニューコード

Run Penをクリックして動作を確認することができます。

See the Pen ハンバーガーメニュー by pull-design (@design90806871) on CodePen.

HTML CSS JS のコードを下記に記述しています。JSjQueryの記述になるので、jQueryを「WEB上から読み込む」か「ダウンロードして読み込む」必要です。

変更箇所

ハンバーガーメニューに:hoverアクションを付けていますので、色の変更や線が不要場合はCSSの部分を削除してください。

:hoverアクションは下記のcssで、マウスが上に乗った時の下線のカラー設定になります。

下線のカラーを変更する場合は/* 下線カラー */backgroundの変更。
テキストカラーを変更する場合は/* テキストカラー */colorの変更で出来ます。

ハンバーガーメニュークリック後

三本線(ハンバーガーメニュー)をクリックするとhtmlclass=”is-fixed”を自動で付くようになります。
この動作は三本線(ハンバーガーメニュー)をクリックした際に、高さheightを固定することによって下にスクロールしてしまわないように設定しています。

is-fixed追加

スクロール固定を解除したい方は下記のcssjsのコードを削除もしくはコメントアウトすれば、固定は解除させます。

ハンバーガースクロール固定【css】

/*------------------------------------
ハンバーガースクロール固定↓
------------------------------------*/
html.is-fixed,
html.is-fixed {
    height: 100%;
    overflow: hidden;
}

ハンバーガースクロール固定【jQuery】

//ハンバーガースクロール固定//
$(function() {
$('.btn-gNav').on("click", function(){
    $(this).toggleClass('is-fixed');
    $('html').toggleClass('is-fixed');
    });
});
$(function() {
    $('.gNav-menu li a').on("click", function(){
    $('#gNav').removeClass('is-fixed');
    });
});

別パターのハンバーガーメニュー

ハンバーガーメニューでメニュー外をクリックした際も閉じるを実行するナビゲーションの作り方
ハンバーガーメニューでメニュー外をクリックした際も閉じるを実行するナビゲーションの作り方【JavaScript】端末の幅が狭い場合にハンバーガーメニューを表示しますが、PC版のサイトでもナビゲーションメニューが入りきらなかった時にも使用します。メニューは白背景の部分でグレーにの箇所をクリックorタップでメニューが閉じる動作になります。...