レスポンシブでハンバーガーメニューと固定ナビを切り替え！コピペ用jQuery+CSS3つき
2020.12.24
ハンバーガーメニューが進化しているのをご存知ですか？スマホやタブレットの利用者が増えるにつれて、Webサイトの要素すべてにレスポンシブ化が求められています。そこで今回は、スマホではハンバーガーメニューに、タブレットやPCではヘッダーメニューに切り替える方法についてご紹介しましょう。
ハンバーガーメニューはスマホの定番！
ユーザビリティーがSEOで重視されている以上、より素早く目的地へと誘導してくれるナビゲーションは、Webサイトにとって欠かせない要素です。
ここで問題となるのが、デバイスごとに違う画面の大きさ！
表示エリアのサイズごとに適切なメニューを設置しなければ、使い勝手が悪いのはもちろんメインのコンテンツを表示させるスペースさえ十分に確保できません。
たとえば、PCでコンテンツを閲覧する場合は、全てのメニューをヘッダーに横並びで表示させたりサイドバーを設けたりする方が便利です。
これに対し、表示エリアが限られているスマートフォンでは、コンテンツ以外の要素に割ける表示スペースがほとんどありません。
そこで重宝するのが、レスポンシブに対応した格納型のハンバーガーメニュー（ハンバーガーリスト）です。
下記画像の左上、赤枠で囲ってあるハンバーガーメニューであれば、必要に応じて表示・非表示が選択でき、コンテンツの邪魔にもなりません。
ちなみに、ハンバーガーメニュー（ハンバーガーリスト）の作り方については、下記の記事で詳しく解説しております。
ハンバーガーメニューは万能ではない！？
スマートフォンでWebサイトを閲覧しているユーザーにとって、ハンバーガーメニューが有益なのは紛れもない事実です。
だからと言って、ハンバーガーメニューが全てのデバイスに対して万能という訳ではありません。
特に下記のような理由から、むしろスマートフォンの画面下部に固定表示させる「ボトムナビゲーション」や従来通り「一目でメニューと分かるデザイン」の方が好ましいケースもあるのです。
▼ハンバーガーメニューのデメリット
- ユーザーがセクションを移動する際の作業が増える
- たった3本の水平線だと、メニューボタンだと認識されにくい
- タブレットやPCだと存在感が薄く、メニューが隠れていると不便
今では、スマートフォンのUI・UXにおいても評価が分かれており、4項目ほどであればハンバーガーメニューを、5項目以上であれば固定ナビゲーションを採用しているサイトが増えているようです。
なお、レスポンシブのメニューとしても有効なボトムナビゲーションについては、下記の記事をご一読下さい。
レスポンシブでハンバーガーメニューと固定ナビを切り替える
ハンバーガーメニューにも固定ナビゲ―ションにも、それぞれ長所と短所があります。
つまり、最も理想的なのは使用するデバイスによって最適なデザインに変化する切り替え式のレスポンシブメニュー！
そこで今回は、下記の3点を盛り込んだ切り替え式レスポンシブメニューの作り方をご紹介します。
▼メニューに盛り込む要素
- スマホではハンバーガーメニューに、タブレットやPCではヘッダーメニューに切り替える
- スマホでページ内リンク（アンカーリンク）を利用した後に、メニューを自動で閉じる
- スムーススクロールのjsを追記して、ゆっくり移動させる
完成形については下記の「DEMO」をご覧ください。
DEMO
HTML：コピペ用ソースコード例
メニューアイコンもコードで作成すれば余計な素材は必要ありません。
<!-- header -->
<header class="header" id="head_wrap">
<div class="inner">
<div id="mobile-head">
<h1 class="logo">
ロゴ
</h1>
<div id="nav-toggle">
<div>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<nav id="global-nav">
<ul>
<li><a href="#menu1">MENU1</a></li>
<li><a href="#menu2">MENU2</a></li>
<li><a href="#menu3">MENU3</a></li>
<li><a href="#menu4">MENU4</a></li>
<li><a href="#menu5">MENU5</a></li>
</ul>
</nav>
</div>
</header>
<!-- /header -->
jQuery：コピペ用ソースコード例
jQueryのアニメーションはモバイルだと動作が重いため、CSSで設定するのがオススメです。
// 追従ナビ・スマホでハンバーガーメニューになる
(function($) {
$(function() {
var $header = $('#head_wrap');
// Nav Fixed
$(window).scroll(function() {
if ($(window).scrollTop() > 350) {
$header.addClass('fixed');
} else {
$header.removeClass('fixed');
}
});
// Nav Toggle Button
$('#nav-toggle, #global-nav ul li a').click(function(){
$header.toggleClass('open');
});
});
})(jQuery);
// ゆっくりスクロールする
$(function(){
$('a[href^="#"]').click(function() {
var adjust = 0;
var speed = 1200;
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top + adjust;
$('body,html').animate({scrollTop:position}, speed, 'swing');
return false;
});
});
CSS：コピペ用ソースコード例
ハンバーガーメニューのアニメーションは現在早めに設定していますので、
もう少し落ち着かせたい場合にはdegを調整ください。
※scssで記述しております。
/*ーーーーーーーーーー
.header
ーーーーーーーーーーー*/
#head_wrap {
top: -100px;
position: relative;
width: 100%;
margin: 100px auto 0;
line-height: 1;
z-index: 999;
height: 0px;
text-decoration: none;
a {
text-decoration: none;
}
.inner {
width: 100%;
margin: 0 auto;
&:after {
content: "";
clear: both;
display: block;
}
position: relative;
}
.logo {
float: left;
font-size: 36px;
}
}
#global-nav {
position: absolute;
right: 0;
top: 0;
ul {
list-style: none;
font-size: 14px;
margin-right: 10px;
display: inline-flex;
@include sp {
display: block;
margin-right: 0px;
}
li{
padding: 20px 10px;
&:last-child{
border-right: none;
}
@include sp {
border-right: none;
}
a {
padding: 0 5px;
padding: 2px;
transition : all .6s ease 0s;
box-sizing: border-box;
font-weight: bold;
&:hover {
}
}
}
}
}
/* Fixed */
#head_wrap.fixed {
margin-top: 0;
top: 0;
position: fixed;
height: 100px;
transition: top 0.65s ease-in;
-webkit-transition: top 0.65s ease-in;
-moz-transition: top 0.65s ease-in;
z-index: 9999;
.logo {
font-size: 36px;
color: #333;
}
#global-nav ul li a {
color: #333;
padding: 0 20px;
}
}
/* Toggle Button */
#nav-toggle {
display: none;
position: absolute;
right: 12px;
top: 14px;
width: 34px;
height: 36px;
cursor: pointer;
z-index: 101;
div {
position: relative;
}
}
@include sp {
#head_wrap {
top: 0;
position: fixed;
margin-top: 0;
width: 100%;
padding: 0;
.inner {
width: 100%;
padding: 0;
}
/* Fixed reset */
.fixed {
padding-top: 0;
background: transparent;
}
}
#mobile-head {
background: rgba(255,255,255,.9);
width: 100%;
height: 56px;
z-index: 999;
position: relative;
}
#head_wrap.fixed .logo,
#head_wrap .logo {
position: absolute;
left: 13px;
top: 13px;
color: #333;
font-size: 26px;
}
#global-nav {
position: absolute;
/* 開いてないときは画面外に配置 */
top: -500px;
background: rgba(255,255,255,.9);
width: 100%;
text-align: center;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
transition: .5s ease-in-out;
ul {
list-style: none;
position: static;
right: 0;
bottom: 0;
font-size: 14px;
margin-top: 20px;
li {
float: none;
position: static;
}
}
}
#head_wrap #global-nav ul li a,
#head_wrap.fixed #global-nav ul li a {
width: 100%;
display: block;
padding: 5px 0;
}
#nav-toggle {
display: block;
}
/* #nav-toggle 切り替えアニメーション */
#nav-toggle {
span {
display: block;
position: absolute;
height: 4px;
width: 100%;
background: #666;
left: 0;
-webkit-transition: .35s ease-in-out;
-moz-transition: .35s ease-in-out;
transition: .35s ease-in-out;
&:nth-child(1) {
top: 0;
}
&:nth-child(2) {
top: 11px;
}
&:nth-child(3) {
top: 22px;
}
}
}
.open {
#nav-toggle {
span {
&:nth-child(1) {
top: 11px;
-webkit-transform: rotate(315deg);
-moz-transform: rotate(315deg);
transform: rotate(315deg);
}
&:nth-child(2) {
width: 0;
left: 50%;
}
&:nth-child(3) {
top: 11px;
-webkit-transform: rotate(-315deg);
-moz-transform: rotate(-315deg);
transform: rotate(-315deg);
}
}
}
}
/* #global-nav スライドアニメーション */
.open #global-nav {
/* #global-nav top + #mobile-head height */
-moz-transform: translateY(556px);
-webkit-transform: translateY(556px);
transform: translateY(556px);
}
}
ユニークなハンバーガーメニュー5選！
デザインの余地が無いようにも思えるハンバーガーメニューですが、そうとも言い切れません。
この段落では、レスポンシブかつデザイン性に優れたユニークなハンバーガーメニューを5つご紹介しましょう。
ソーシャル共有アイコンGIFへのハンバーガーメニュー
出典：Hamburger Menu To Social Sharing Icons
こちらは、三本線のアイコンをクリックすると、隠れていたSNSマークが出現するハンバーガーメニューです。
もちろん、デバイスごとに最適化されて表示されるレスポンシブになっています。
画像マークを差し替えれば、色々なナビゲーションとして応用できそうですね。
3D効果のあるオフキャンバスメニュー
出典：Off Canvas Menu With 3D Effect
クールさと洗練されたスタイリッシュさを兼ね備えたデザインが秀逸なハンバーガーメニュー。
クリエイティブな3Dオフキャンバスメニューならではの存在感が目を引きます。
GSAPを使用したハンバーガーメニューのモーダルポップ
出典： Hamburger Menu Modal Pop Using GSAP
こちらは、モバイルデバイスに特化したポップアップ形式のハンバーガーメニューです。
タップすると、アニメーションのような動きとともにメニューが出現します。
ドーナツメニューアニメーションへのハンバーガーボタン
出典：Hamburger Button To Doughnut Menu Animation
シンプルながら、どこか遊び心をくすぐるアニメーションのハンバーガーメニュー。
ジャンルを問わず、さまざまなWebサイトに応用が効くレスポンシブ仕様になっています。
act2
出典：act2
パッと見、ハンバーガーメニューとは気づかないほどの存在感が魅力。
こちらはイケメン俳優育成ゲームのWebサイトですが、大胆なデザインは参考になるはずです。
まとめ
Webサイトのメニューは、何よりユーザーにとっての機能性が重要です。
だからこそ、PCには固定ナビゲーションが、スマートフォンにはハンバーガーメニューが定番となっていたのでしょう。
とはいえ、デバイスの多様化が進むにつれてメニュー表示にもレスポンシブ化が求められるようになってきました。
デバイスを問わず常にユーザーが快適に閲覧できるよう、切り替え式のハンバーガーメニューを導入してみてはいかがでしょうか。
関連
