TEAM × MARKETING × BRANDING

インビジョン株式会社

企業文化をデザインする
採用マーケティングチーム

03-5794-5433

お問い合わせフォーム

HOME>コラム>制作お役立ち情報

Category " 制作お役立ち情報 "

4892" class="post-4892 post type-post status-publish format-standard hentry category-column category-design"

2015/2/26(Thu)

誰でも作れる「動くハンバーガーボタン」の作り方!【スマホの基本知識】

「閉じる」導線がすぐに分かる!ユーザビリティばっちりのハンバーガーボタンを作りましょう。





前回ご紹介した、電通やDeNAの採用サイトのような、動くハンバーガーボタン。
私もこのようなボタンが作りたい!と思って作ってみたところ、クリックした途端元に戻っちゃダメだし、マウスオーバーじゃスマホは対応できないし、マウスオーバーではそもそもオンマウスの時しか×にならないし…、と色々苦労しましたので、今回はこのような動くハンバーガーボタンの作り方をご紹介します。

「閉じる」が分かる、動くハンバーガーボタン

まずは下のハンバーガーボタンを何度かクリックしてみてください。

「≡」をクリックしたらアニメーションで「×」になって、またクリックしたらアニメーションで「≡」に戻ります。


それでは、こちらを実際に作ってみたいと思います。

HTML

<div class="menu">
<div class="menu1"></div>
<div class="menu2"></div>
<div class="menu3"></div>
</div>

ボタン自体のHTMLはこれだけです。

CSS

.menu
{ width: 100px; height:100px; top: 0px; position:relative; cursor:pointer; }
.menu1
{ width:100px; height:20px; background-color:#000; top:0px; position:absolute; } 
.menu2
{ width:100px; height:20px; background-color:#000; top:40px; position:absolute; } 
.menu3
{ width:100px; height:20px; background-color:#000; top:80px; position:absolute; } 

↑ここまでは、ただの黒い棒を3つ作るだけです。
before、after要素を使って作ることもあるかと思いますが、今回は動かしたかったので、分かりやすく全てclassで指定しています。

.menu1,.menu2,.menu3
{ transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out; /* Opera */
  -moz-transition: all 0.5s ease-out; /* Firefox */
  -webkit-transition: all 0.5s ease-out; /* GoogleChrome, Safari */
  -ms-transition: all 0.5s ease-out; /* IE */ }

↑次に、アニメーション。

.menuclick1
{ top:40px;
  -o-transform: rotate(405deg);
  -moz-transform: rotate(405deg);
  -webkit-transform: rotate(405deg);
  -ms-transform: rotate(405deg);
  transform: rotate(405deg); }
.menuclick2
{ opacity:0;}
.menuclick3
{ top:40px;
  -o-transform: rotate(-405deg);
  -moz-transform: rotate(-405deg);
  -webkit-transform: rotate(-405deg);
  -ms-transform: rotate(-405deg);
  transform: rotate(-405deg); } 

↑そして、クリックした後の動き。

jQuery

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
	$(".menu").click(function(){
		$(".menu1").toggleClass("menuclick1")
	});
	$(".menu").click(function(){
		$(".menu2").toggleClass("menuclick2")
	});
	$(".menu").click(function(){
		$(".menu3").toggleClass("menuclick3")
	});	
});
</script>

最初にjQueryを読み込んで(既に読み込んである場合は大丈夫です)、menuをクリックした時の動作を記入していきます。

このjQueryを作成の際、こちらの記事が大変参考になりました。ありがとうございます。
「AをBしたらCをDする」ということが良く分かりました。
さて、その方程式が分かったので、実際に作成にうつります。

しかし、classを追加したい場合はどうしたら…。
そこで、「.toggleClass」を使います。こちらは、左で指定したclassに、右のclassを追加するという指示が出せます。
これで、クリックしたら回転の動きがされました。

「menuをクリックしたら、menu1にmenuclick1のclassを追加する。」(以下同様)
という指示を出したことになります。

まとめ

以上で、動くハンバーガーボタンを作成することができました!

合わせて読みたい
このエントリーをはてなブックマークに追加
今日の執筆:有谷 メディアチーム アートディレクター 退社

「コールドプレスジュース」

Category

Writer

Media

  • SNS

         

    instagram写真を見る

    Home

    PAGE TOP

    All Rights Reserved / インビジョン株式会社