ウェブ

ハンバーガーメニューをコピペで簡単実装【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追加
is-fixed追加

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

↓下記本は知識ゼロからJavaScriptがわかる本です。

スラスラわかるJavaScript
スラスラわかるJavaScript

▪スラスラわかるJavaScript
初めてプログラミングを学ぶ人を対象にした“スラスラわかる”シリーズ。JavaScriptの基礎知識や作法、基本構文、基本テクニックなどを無理なく習得し、かつプログラムが自力で作れるようになるところまで。JavaScriptの基礎固めをしっかりしたい方だけでなく、ほかの入門書で挫折した方やプログラミングに苦手意識を持っている方にもおすすめの一冊です。

book
created by Rinker
¥2,530 (2022/10/04 16:20:13時点 楽天市場調べ-詳細)

↓下記本はコピペのみならず、しっかり理解しながら知識が身につくお勧めの本です。

▪動くWebデザインアイディア帳
Webサイトを動かすことが苦手な右脳系ウェブデザイナーが、サイトを動かす第1歩を踏み出すための「動きの逆引き事典」です。 近年のウェブサイトで使用されている基本的な動きの原理や仕組みをサンプルコードと共に紹介します。

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

↓下記本は実践編としてさらに踏み込んだ知識が身につくお勧めの本です。

動くWebデザインア帳イディア帳
動くWebデザインア帳イディア帳

▪動くWebデザイン アイディア帳 実践編
好評の「動くWebデザイン アイディア帳」の姉妹本で「サイトを印象付ける基本の動き」+「世界観を作る動き」を集めた現場で使える実践サンプル集!「サイトの印象を決定付ける動き」をこの1冊が丸ごとカバーしています。

book
created by Rinker
¥2,860 (2022/10/04 10:32:31時点 楽天市場調べ-詳細)

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

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

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA