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

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

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

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

ハンバーガーメニューの【動作】
ハンバーガーメニュー【コード】
- ハンバーガーメニューコード
- 変更箇所
別パターのハンバーガーメニュー

動作例

デモページ
【コード付き】

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

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

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

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

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

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

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

変更箇所

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

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

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

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

is-fixed追加

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

ハンバーガースクロール固定【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');
    });
});