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を固定することによって下にスクロールしてしまわないように設定しています。
スクロール固定を解除したい方は下記の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');
});
});