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のコードを削除もしくはコメントアウトすれば、固定は解除させます。
↓下記本は知識ゼロからJavaScriptがわかる本です。
▪スラスラわかるJavaScript
初めてプログラミングを学ぶ人を対象にした“スラスラわかる”シリーズ。JavaScriptの基礎知識や作法、基本構文、基本テクニックなどを無理なく習得し、かつプログラムが自力で作れるようになるところまで。JavaScriptの基礎固めをしっかりしたい方だけでなく、ほかの入門書で挫折した方やプログラミングに苦手意識を持っている方にもおすすめの一冊です。
↓下記本はコピペのみならず、しっかり理解しながら知識が身につくお勧めの本です。
▪動く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デザイン アイディア帳」の姉妹本で「サイトを印象付ける基本の動き」+「世界観を作る動き」を集めた現場で使える実践サンプル集!「サイトの印象を決定付ける動き」をこの1冊が丸ごとカバーしています。
別パターのハンバーガーメニュー
