WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

スマートフォン専用サイトにハンバーガーメニューを追加する

f:id:yachin29:20151113021339p:plain

ハンバーガーメニュー

この赤枠で囲ったものが「ハンバーガーメニュー」と呼ばれるものです。1~2年前から良く見かけるようになりましたが、三本の線がハンバーガーに見える事からこう呼ばれるようになりました。Googleなどのメジャーサイトでも採用されている事で「3本の横線=メニュー」という認識が浸透して来ています。特にディスプレイ領域が限られているスマートフォンサイトに多く使われています。
ですが、一方で、スマホを持ったばかりのユーザーやネットを普段余り使用しないユーザーなどには、それがメニューのボタンと認識できずに離脱してしまう可能性もあるので注意が必要です。


f:id:yachin29:20151113020407j:plain


/*ハンバーガーメニュー*/
.menu {
  display: block;
  float: right;
  margin-right: 10px;
}
.menu ul {
  display: none;
}
.menu p#menuToggle{
  background: url(../img/icon_hum.png) no-repeat center center;
  width: 44px;
  height: 44px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
.menu.open ul {
  display: block;
  left: 2%;
  position: absolute;
  top: 48px;
  width: 96%;
  margin: 0 auto;
  z-index: 9999;
}
.menu.open ul li a {
  display: block;
  background: #48a5bf;
  border-top: 1px solid #FFF;
  color: #fff;
}
.menu.open ul li:first-child a {
  border-top: none;
}

追加するjQuery

$(function(){

  $('#menuToggle').click(function(){ //#menuToggleをクリックすると
    $(this).parent().toggleClass('open'); //親要素に.openを付ける。
		  });
});