読者です 読者をやめる 読者になる 読者になる

WEBサイト制作の勉強|フェリカテクニカルアカデミー

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を付ける。
		  });
});